HTML中的引入最好都用相对路径,以免更换服务器或移动根目录时发生错误。
1. 图片or视频引入
<img src="img/smile.jpg">//图片在同层文件夹【img】中。
<video src="/video/movie.mp4" controls="controls">your browser does not support the video tag</video>//文件在下层文件【video】中。
2. <a>
标签
<a href="/example/html/lastpage.html">
<img border="0" src="/i/eg_buttonnext.gif" />
</a>//把一个图片作为<a>标签的连接。
在这个例子中,a标签是href属性,img是src属性,这个就说明,没有链接不会影响页面,但没有img会影响页面。
3. CSS样式引入
CSS样式引入主要有四种:
1. 行内样式(不推荐使用)
2. 内嵌样式
3. 外部导入样式
4. 外部链接样式
//内嵌样式
<style type="text/css">...</style>
//外部链接样式表
<link type="text/css" rel="stylesheet" href="../styles/main.css" />
//外部导入样式
<style type="text/css">@import"css/mystyle.css"; </style>
链接式与导入式的区别
- 链接式会以网页文件主体装载前装载CSS文件,因此显示出来的网页从一开始就是带样式的效果的,它不会象导入式那样先显示无样式的网页,然后再显示有样式的网页,这是链接式的优点。但如果样式复杂,加载花去很多时间,这也成了缺点。
- 使用链接式后,浏览器会识别该文档为css文件,就会并行下载资源并且不会停止对当前文档的处理。这也是为什么建议使用link方式来加载css,而不是使用@import方式。
- 一般来说,做网站时把样式多写在多个样式表文件中,因此我们先用链接式引入一个总的CSS文件,然后在这个CSS文件中在使用导入式来引入其他的CSS文件。但如果通过JavaScrip来动态引入CSS文件则只能使用链接式。
4. JS文件引入
<script type="text/javascript" src="../JS/myJS.js"></script>
<script src="JS/myJS.js"></script> //这两种方式均可,在HTML5中已经默认script的类型是js了,所以就不需要再写type。
在浏览器下载,编译,执行这个文件之前页面的加载和处理会被暂停。这个过程与把js文件放到<script>
标签里类似。这也是建议把JS文件放到底部加载的原因。当然,img标签页与此类似。浏览器暂停加载直到提取和加载图像。
总结src和href的区别
- href 表示超文本引用(hypertext reference),在 link和a 等元素上使用,是引用。href 的内容,是与该页面有关联。
- src 表示来源地址,在 img、script、iframe 等元素上,是引入。src 的内容,是页面必不可少的一部分,如果没有src,页面是不完整的。
- 所以href和src的区别就是,引用和引入。