HTML外部文件引入

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的区别就是，引用和引入。