url,href,src区别
URL(Uniform Resource Locator)
统一资源定位符是对可以从互联网上得到的资源的位置和访问方法的一种简洁的表示,是互联网上标准资源的地址。互联网上的每个文件都有一个唯一的URL,它包含的信息指出文件的位置以及浏览器应该怎么处理它。
结构
基本URL包含模式(或称协议)、服务器名称(或IP地址)、路径和文件名,如“协议://授权/路径?查询”。完整的、带有授权部分的普通统一资源标志符语法看上去如下:协议://用户名:密码@子域名.域名.顶级域名:端口号/目录/文件名.文件后缀?参数=值#标志
第一部分:
模式/协议(scheme):它告诉浏览器如何处理将要打开的文件。最常用的模式是超文本传输协议(Hypertext Transfer Protocol,缩写为HTTP),这个协议可以用来访问网络。1 其他协议如下:
- http——超文本传输协议资源
- https——用安全套接字层传送的超文本传输协议
- ftp——文件传输协议
- mailto——电子邮件地址
- ldap——轻型目录访问协议搜索
- file——当地电脑或网上分享的文件
- news——Usenet新闻组
- gopher——Gopher协议
- telnet——Telnet协议
第二部分:
文件所在的服务器的名称或IP地址,后面是到达这个文件的路径和文件本身的名称。服务器的名称或IP地址后面有时还跟一个冒号和一个端口号。它也可以包含接触服务器必须的用户名称和密码。路径部分包含等级结构的路径定义,一般来说不同部分之间以斜线(/)分隔。询问部分一般用来传送对服务器上的数据库进行动态询问时所需要的参数。
分类
1、绝对URL
绝对URL(absolute URL)显示文件的完整路径,这意味着绝对URL本身所在的位置与被引用的实际文件的位置无关。
2、相对URL
相对URL(relative URL)以包含URL本身的文件夹的位置为参考点,描述目标文件夹的位置。如果目标文件与当前页面(也就是包含URL的页面)在同一个目录,那么这个文件的相对URL仅仅是文件名和扩展名,如果目标文件在当前目录的子目录中,那么它的相对URL是子目录名,后面是斜杠,然后是目标文件的文件名和扩展名。
如果要引用文件层次结构中更高层目录中的文件,那么使用两个句点和一条斜杠。可以组合和重复使用两个句点和一条斜杠,从而引用当前文件所在的硬盘上的任何文件,一般来说,对于同一服务器上的文件,应该总是使用相对URL,它们更容易输入,而且在将页面从本地系统转移到服务器上时更方便,只要每个文件的相对位置保持不变,链接就仍然是有效地。
以下为建立路径所使用的几个特殊符号,及其所代表的意义。
.:代表目前所在的目录,相对路径。 如:<a href="./abc">文本</a>或<img src="./abc" />..:代表上一层目录,相对路径。 如:<a href="../abc">文本</a>或<img src="../abc" />../../:代表的是上一层目录的上一层目录,相对路径。 如:<img src="../../abc" />/:代表根目录,绝对路径。 如:<a href="/abc">文本</a>或<img src="/abc" />D:/abc/:代表根目录,绝对路径。
在使用相对路径时,我们用符号“.”来表示当前目录,用符号“..”来表示当前目录的父目录。
重点:href 和 src 的定义与区别
href和src是有区别的,而且是不能相互替换的。我们在可替换的元素上使用src,然而把href用于在涉及的文档和外部资源之间建立一个关系。
href (Hypertext Reference)指定网络资源的位置,从而在当前元素或者当前文档和由当前属性定义的需要的锚点或资源之间定义一个链接或者关系。当我们写下:
<link href="style.css" rel="stylesheet" />
浏览器明白当前资源是一个样式表,页面解析不会暂停(由于浏览器需要样式规则去画或者渲染页面,渲染过程可能会被被暂停)。这与把css文件内容写在<style>标签里不相同,因此建议使用link标签而不是@import来吧样式表导入到html文档里。
src (Source)属性仅仅 嵌入当前资源到当前文档元素定义的位置。当浏览器找到
<script src="script.js"></script>
在浏览器下载,编译,执行这个文件之前页面的加载和处理会被暂停。这个过程与把js文件放到<script>标签里类似。这也是建议把JS文件放到底部加载的原因。当然,img标签页与此类似。浏览器暂停加载直到提取和加载图像。
与img类似的有更多: replaced elements。
转载自:https://segmentfault.com/a/1190000002877022
url,href,src区别的更多相关文章
- url,href,src之间的区别
发现自己居然没把url.href.src关系及使用搞清楚,今天就理一下.主要包括:url.src.href定义以及使用区别. URL(Uniform Resource Locator) 统一资源定位符 ...
- url,href,src 之间的区别
url 统一资源定位符 <style> #bg{ background-image:url("img/bg.png"); } </style> 区别: sr ...
- url 、src 、href 的区别
url.href.src 详解 现自己居然没把url.href.src关系及使用搞清楚,今天就理一下.主要包括:url.src.href定义以及使用区别. URL(Uniform Resource L ...
- 浅析src与href的区别
src与href的区别 SRC src用于替换当前元素,href用于在当前文档和引用资源之间确立联系. src是source的缩写,指向外部资源的位置,指向的内容将会嵌入到文档中当前标签所在位置:在请 ...
- URL、SRC、HREF知识整理
今天理一下URL.SRC.HREF定义以及使用区别. URL(Uniform Resource Locator) 统一资源定位符是对可以从互联网上得到的资源的位置和访问方法的一种简洁的表示,是互联网上 ...
- src 和 href 的区别
因为理解不深,到写外部加载Javascript文件或者css文件的时候总是需要去找个例子,这样可不好.现在总结下 href 属性规定被链接文档的位置(URL). href是hyperrefresh的缩 ...
- src和href的区别
<html><!--头部标签--><!--src和href的区别src:引用,该资源是页面不可缺少的一部分,如(img标签 video标签 radio标签);href:引 ...
- link @import区别 src href的区别
先说页面引入css的四种方式吧 1 在头部写在style里面 2 行内样式 tyle= 3 外部引入 link和@import的区别 link属于XHTML的标签,而@import只是css提供的一种 ...
- document.URL 和 windows.location.href的区别
1. 从输出结果上,document.URL 和 windows.location.href 没有区别.2. 非要说区别的话,你只可以读取document.URL的值,不能修改它.windows.lo ...
随机推荐
- BZOJ3622(容斥+dp)
思路 "恰k个"考虑求至少k.k+1--个容斥 题面说所有数字都不同,可以将所求转化为糖比药多的组数恰为\((n+k)/2\)的方案数 \(f[i][j]\)数组我觉得更好的理解方 ...
- codeforces840E In a Trap
好巧妙啊,感觉从来没有用过按位dp的trick,也没有用过树上链分块的trick 挂个链,全程看他的思路写的,当然lych帮我理解了最难懂的一部分 首先这里有个玄学的分块 每个点统计它上面256(其实 ...
- 2017"百度之星"程序设计大赛 - 初赛(B)小小粉丝度度熊
Problem Description 度度熊喜欢着喵哈哈村的大明星——星星小姐. 为什么度度熊会喜欢星星小姐呢? 首先星星小姐笑起来非常动人,其次星星小姐唱歌也非常好听. 但这都不是最重要的,最重要 ...
- [NWPU2016][寒假作业][正常版第三组]搜索和二分 N
题意,一条数轴上,告诉你起点和终点,只能向前走1,向后走1,或者走到二倍的现在的位置,每次都耗时一分钟.问从起点到终点的最短时长. 简单地bfs #include <iostream> # ...
- php:一个题目,关于优先级,及$a++和$a=$a+1,
这几天常看到微博上转发的一条微博:就做了下,竟做错了,所以就试着分析了下~~ 这是微博: 这是代码: <?php $c = 3; $b = 6; if ($c = 4 || $b = 4) { ...
- Java通过图片url地址获取图片base64位字符串的两种方式
工作中遇到通过图片的url获取图片base64位的需求.一开始是用网上的方法,通过工具类Toolkit,虽然实现的代码比较简短,不过偶尔会遇到图片转成base64位不正确的情况,至今不知道为啥. 之后 ...
- 解决win10下python3和python2共存pip的问题
经过在查阅网友的各种经验,发现仍然解决不了问题,python2和python3在win10下的安装就不再演示了,直接在python的官网下载就好,我机器上使用的是python2.7.15和python ...
- Java 多线程概念
1.为什么要使用多线程: 更多的处理器核心. 更快的响应时间. 更好的变成模型. 2.线程的优先级: 现代操作系统基本采用时分的形式调度运行的线程,操作系统会分出一个个的时间片,线程会分配到若干时间片 ...
- 第十九章 排查和调试Web程序 之 防止和排查运行时问题
1. 概述 常见的几种运行时问题包括 错误数据.慢于预期的响应.未知行为 或者 未处理的异常. Visual Studio 提供了 排查.跟踪 和 日志 等工具 来帮助排查系统的问题.有些情况还需要插 ...
- 关于编译错误ambiguous call of overridden pre R14 auto-imported BIF get/1
今天写代码用到了进程字典,出现了一个编译错误 根据相关提示改成了erlang:put erlang/get以后即编译通过