外部资源引入与路径表示

除了HTML本身，有时候我们需要在页面上引入外部资源，加载外部资源涉及到常见的属性

• href: hypertext reference
• src: source

src 用于替换标签内容

src是source的缩写，所指向的外部资源会嵌入到文档中，替换该标签的位置。

<img src="xxx.jpg"/>
<script type="text/javascript" src="xxx.js"></script>

即使在script标签中间写了内容也会被替换掉

<script type="text/javascript" src="aaa.js">
  alert(123);
</script>

加载JavaScript、img等用src。

href 用于标示资源和文档关系

href是Hypertext Reference的缩写，指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的链接

<a href="http://www.baidu.com">百度</a>
<link href="xxx.css" rel="stylesheet"/>

超链接、锚点、加载 CSS 用 href。

路径表示

我们在引入资源的时候，需要知道资源的路径。路径的方式可分为绝对路径（包括绝对路径和根路径）和相对路径和两种。

绝对路径

绝对路径是指文件真实存在位置的完整路径。例如：

http://www.adminwang.com/index.htm
d:/www/html/images/bg.jpg

windows 文件系统 \ 为目录分隔符

根路径

根路径一般以/开头，以同协议，同主机名为根，查找目录。例如：

/styles/main.css
/js/main.js

特别的，如果想只保留协议，而访问不同主机，需要以//开头：

//api.mafengshe.com/news
//www.mafengshe.com/style.css

相对路径

相对路径是指要引用的文件相对于当前文件路径的位置。

• 同级目录 main.html 或 ./main.html。
• 上级目录 ../main.html,上两级目录../../main.html。
• 下级目录 next/main.html，下两级目录next/next/main.html。

特别注意：相对路径的基地址默认是当前文件路径位置，但是可以通过使用 <base href="xxx" /> 修改基地址。

如 <base href="https://www.mafengshe.com/aaa" /> 修改当前基目录为 https://www.mafengshe.com/aaa

对比总汇

假设当前页所在位置：https://www.mafengshe.com/aaa/bbb

参考

Difference between SRC and HREF

为什么加载 JavaScript 使用 "src"，CSS 使用 "href"？