HTML中url、rel、href、src的使用

￡神魔★判官ぃ 2022-05-13 06:52 139阅读 0赞

### url（Uniform Resource Locator） ###

统一资源定位符，表示从互联网上得到的资源的位置和访问方法，是互联网上标准资源的地址。互联网上每一个文件都有一个唯一的URL，它包含的信息指出文件的位置以及浏览器应该怎么处理它。基本URL包含模式（或称协议）、服务器名称（或IP地址）、路径和文件名。

1、绝对url（absolute URL）

显示文件的完整路径，这意味着绝对URL本身所在的位置与被引用的实际文件的位置五关。

2、相对url（relative URL）

以包含URL本身的文件夹的位置为参考点，描述目标文件夹的位置。如果目标文件与当前页面（也就是包含URL的页面）在同一个目录，那么这个文件的相对URL仅仅是文件名和扩展名，如果目标文件在当前目录的子目录中，那么它的相对URL是子目录名，后面是斜杠，然后是目标文件的文件名和扩展名。

经常会看到使用两个句点和一条斜杠，不能理解，其表示的意思是引用文件层次结构中更高层目录中的文件，可以组合重复使用两个句点和一条斜杠，从而引用当前文件所在的硬盘上的任何文件，一般来说，对于同一服务器上的文件，应该总是使用相对URL，他们更容易输入，而且在将页面从本地系统转移到服务器上时更加方便，只要每个文件的相对位置保持不变，链接几句仍然是有效的。

举例说明（在使用相对路径时，我们用符号“.”；“..”表示当前目录的父目录）：

“.”：代表目前所在的目录，相对路径。如：<a href="./aaa">内容</a>、<img src="./aaa" />

“..”：代表上一层的目录，相对路径。如：<a href="../aaa">内容</a>、<img src="../aaa" />

“../../”：代表的是上一层目录的上一层目录，相对路径。如：<img src="../../aaa" />

“/”：代表根目录，绝对路径。如：<a href="/aaa">内容</a>或<img src="/aaa" />

“D:/aaa/”：代表根目录，绝对路径。

### rel（relationship） ###

REL属性用于定义链接的文件和HTML文档之间的关系。StyleSheet，的意思就是样式调用，REL=StyleSheet指定一个固定或首选的样式而REL="Alternate StyleSheet"定义一个交互样式。设置或检索对象之间的链接目标的关系。如果没有值指出，rel属性的默认关系是一个空字符串。使用此属性仅当href属性应用。

### href（Hypertext Reference） ###

指定网络资源的位置，从而在当前元素或者当前文档和由当前属性定义的需要的锚点或资源之间定义一个链接或者关系。

例：<link href="style.css" rel="stylesheet" />

浏览器明白当前资源是一个样式表，页面解析不会暂停（由于浏览器需要样式规则去画或者渲染页面，渲染过程可能会被暂停）。这与把css文件内容卸载<style>标签里不相同，因此建议使用link标签而不是@import来把样式表导入到html文档里。

### src（Source） ###

仅仅嵌入当前资源到当前文档元素定义的位置。当浏览器找到<script src="aaa.js"></script>，在浏览器下载、编译、执行这个文件之前页面的加载和处理会被暂停。这个过程与把JS文件放到<script>标签里类似。这也是建议把JS文件放到底部加载的原因。img标签与次类似，浏览器暂停加载直到提取和加载图像。