title: url、href、src区分
date: 2024年11月24日15点59分
tags: HTML
内容源自简单介绍一下url、href、src到底是什么？可能好多人不太明白-CSDN博客
url、href、src区分
1.先说结论
主要区别应该放在href与src身上，url是个基础的概念，是前两位的其中一部分。
区别主要为：（1）请求资源类型不同（2）作用结果不同（3）浏览器解析方式不同
（1）请求资源类型不同
href 指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的联系。靠浏览器检索并显示 href 属性指定的 URL 所表示的文档
src会将其指向的资源下载并直接应用到文档中,比如 JavaScript 脚本，img 图片；
（2）作用结果不同
href 用于在当前文档和引用资源之间确立联系；；src 用于替换当前内容；
（3）浏览器解析方式不同
若在文档中添加href ，浏览器会识别该文档为 CSS 文件，就会并行下载资源并且不会停止对当前文档的处理。 这也是为什么建议使用 link 方式加载 CSS，而不是使用 @import 方式。
当浏览器解析到src ，会暂停其他资源的下载和处理， 直到将该资源加载、编译、执行完毕，图片和框架等也如此，类似于将所指向资源应用到当前内容。这也是为什么建议把 js 脚本放在底部而不是头部的原因。
2.简单理解url
（一）简介
全名为“统一资源定位符”，是Uniform Resource Locator的缩写。有时称为“URL地址”、“统一资源定位器”，俗称为“网页地址”或“网址”。
（二）格式
标准格式：协议类型:[//服务器地址[:端口号]] [/资源层级UNIX文件路径]文件名?查询
完整格式：协议类型:[//[访问资源需要的凭证信息@]服务器地址[:端口号]] [/资源层级UNIX文件路径]文件名?查询
其中【访问凭证信息@；:端口号；?查询；#片段ID】都属于选填项。
（三）语法规则
scheme://host.domain:port/path/filename，比如segmentfault.com/html/index.…
简单解读一下：
1.scheme，指的是因特网服务的类型，常见的http（不加密），https（加密）等；
2.host，定义域主机，http的默认主机是www
3.domain，定义因特网域名，给ip起个名字，方便人们记忆，如wikipedia.org
4.port，定义主机上的端口号，http默认端口号是80
5.path，定义服务器上的路径（若要省略此部分，文档必须得在网站根目录）
6.filename，文档资源的名称
（四）绝对与相对URL
绝对URL（absolute URL）显示文件的完整路径，这意味着绝对URL本身所在的位置与被引用的实际文件的位置 无关。
相对URL（relative URL）以包含URL本身的文件夹的位置为 参考点，描述目标文件夹的位置。
3.简单理解href
href (Hypertext Reference)指定网络资源的位置，从而在当前元素或者当前文档和由当前属性定义的需要的锚点或资源之间定义一个链接或者关系。浏览器会尝试检索并显示 href 属性指定的 URL 所表示的文档
如同桥梁，建立标签与目标的联系。如<a href="URL">这样的
4.简单理解src
"src"是指源代码（source code）的缩写，指向外部资源位置，其内容会直接应用到文档中当前标签所在位置。
5.link与@import的区别
两者都是外部引用 CSS 的方式，但是存在一定的区别：
（1）link是XHTML标签，除了能够加载CSS，还可以定义RSS等其他事务；而@import属于CSS范畴，只可以加载CSS。
（2）link引用CSS时，在页面载入时同时加载；@import需要页面完全载入以后再加载。
（3）link是XHTML标签，无兼容问题；@import则是在CSS2.1提出的，低版本的浏览器不支持。
（4）link支持使用Javascript控制DOM改变样式；而@import不支持。
