这次给大家带来前端中关于url、href、src知识详解，前端中关于url、href、src的注意事项有哪些，下面就是实战案例，一起来看一下。
一、URL的概念
统一资源定位符（或称统一资源定位器/定位地址、URL地址等，英语：Uniform Resource Locator，常缩写为URL），有时也被俗称为网页地址（网址）。如同在网络上的门牌，是因特网上标准的资源的地址（Address）。
二、URL的格式
2.1 标准格式
协议类型:[//服务器地址[:端口号]][/资源层级UNIX文件路径]文件名?查询
2.2 完整格式
协议类型:[//[访问资源需要的凭证信息@]服务器地址[:端口号]][/资源层级UNIX文件路径]文件名?查询
其中【访问凭证信息@；:端口号；?查询；#片段ID】都属于选填项。
三、URL的语法规则
比如网址 http://segmentfault.com/html/index.asp，必须遵守以下的语法规则：
scheme: //host.domain:port/path/filename
3.1 说明
（1）scheme – 定义因特网服务的类型。最常见的类型是 http
（2）host – 定义域主机（http 的默认主机是 www）
（3）domain – 定义因特网域名，比如 w3school.com.cn
（4）:port – 定义主机上的端口号（http 的默认端口号是 80）
（5）path – 定义服务器上的路径（如果省略，则文档必须位于网站的根目录中）。
（6）filename – 定义文档/资源的名称
3.2 URL Schemes
以下是其中一些最流行的 scheme：
http超文本传输协议以 http:// 开头的普通网页。不加密。https安全超文本传输协议安全网页。加密所有信息交换。ftp文件传输协议用于将文件下载或上传至网站。file您计算机上的文件。
四、URL的类型
4.1 绝对URL
绝对URL（absolute URL）显示文件的完整路径，这意味着绝对URL本身所在的位置与被引用的实际文件的位置无关。
4.2 相对URL
相对URL（relative URL）以包含URL本身的文件夹的位置为参考点，描述目标文件夹的位置。
一般来说，对于同一服务器上的文件，应该总是使用相对URL，它们更容易输入，而且在将页面从本地系统转移到服务器上时更方便，只要每个文件的相对位置保持不变，链接就仍然是有效地。
以下为建立路径所使用的几个特殊符号，及其所代表的意义。
（1） .：代表目前所在的目录，相对路径。 如： 文本 或 
（2） ..：代表上一层目录，相对路径。 如： 文本 或
（3） ../../：代表的是上一层目录的上一层目录，相对路径。 如：
（4） /：代表根目录，绝对路径。 如：[文本] (https://www.php.cn/abc) 或
五、href的概念
5.1 规范解释
href (Hypertext Reference)指定网络资源的位置，从而在当前元素或者当前文档和由当前属性定义的需要的锚点或资源之间定义一个链接或者关系。
5.2 通俗理解
href 目的不是为了引用资源，而是为了建立联系，让当前标签能够链接到目标地址。
六、src的概念
source（缩写），指向外部资源的位置，指向的内容将会应用到文档中当前标签所在位置。
七、href和src的区别
7.1 请求资源类型不同
（1）href 指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的联系。
（2）在请求 src 资源时会将其指向的资源下载并应用到文档中，比如 JavaScript 脚本，img 图片；
7.2 作用结果不同
（1）href 用于在当前文档和引用资源之间确立联系；
（2）src 用于替换当前内容；
7.3 浏览器解析方式不同
（1）若在文档中添加 ，浏览器会识别该文档为 CSS 文件，就会并行下载资源并且不会停止对当前文档的处理。这也是为什么建议使用 link 方式加载 CSS，而不是使用 @import 方式。
（2）当浏览器解析到 ，会暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕，图片和框架等也如此，类似于将所指向资源应用到当前内容。这也是为什么建议把 js 脚本放在底部而不是头部的原因。
八、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不支持。
相信看了本文案例你已经掌握了方法，更多精彩请关注【创想鸟】其它相关文章！
推荐阅读：
JS用正则判断出生日期
Vue过滤器格式化方法详解
以上就是前端中关于url、href、src知识详解的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2763356.html
