CSS_url 、src 、href 的区别

url、href、src 区别

URL(Uniform Resource Locator)

统一资源定位符是对可以从互联网上得到的资源的位置和访问方法的一种简洁的表示,是互联网上标准资源的地址。互联网上的每个文件都有一个唯一的URL,它包含的信息指出文件的位置以及浏览器应该怎么处理它。

结构

基本URL包含模式(或称协议)、服务器名称(或IP地址)、路径和文件名,如“协议://授权/路径?查询”。完整的、带有授权部分的普通统一资源标志符语法看上去如下:协议://用户名:密码@子域名.域名.顶级域名:端口号/目录/文件名.文件后缀?参数=值#标志

第一部分:

模式/协议(scheme):它告诉浏览器如何处理将要打开的文件。最常用的模式是超文本传输协议(HypertextTransfer 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,它们更容易输入,而且在将页面从本地系统转移到服务器上时更方便,只要每个文件的相对位置保持不变,链接就仍然是有效地。

以下为建立路径所使用的几个特殊符号,及其所代表的意义。

·       .:代表目前所在的目录,相对路径。如:<ahref="./abc">文本</a><img src="./abc" />

·       ..:代表上一层目录,相对路径。如:<ahref="../abc">文本</a><img src="../abc" />

·       ../../:代表的是上一层目录的上一层目录,相对路径。如:<imgsrc="../../abc" />

·       /:代表根目录,绝对路径。如:<ahref="/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://www.cnblogs.com/lucky1024/p/10992532.html

时间: 2024-08-14 22:30:43

CSS_url 、src 、href 的区别的相关文章

link @import区别 src href的区别

先说页面引入css的四种方式吧 1 在头部写在style里面 2 行内样式 tyle= 3 外部引入 link和@import的区别 link属于XHTML的标签,而@import只是css提供的一种方式 link除了加载css还能做其他的事情,比如定义RSS 而@import只能加载css link在页面加载的时候会被同时加载 比较快 @import会在页面全部加载完后再加载 比较慢 有兼容问题 link兼容性好 @import在IE5以上才支持 =======================

浅析src与href的区别

src与href的区别 SRC src用于替换当前元素,href用于在当前文档和引用资源之间确立联系. src是source的缩写,指向外部资源的位置,指向的内容将会嵌入到文档中当前标签所在位置:在请求src资源时会将其指向的资源下载并应用到文档内,例如js脚本,img图片和iframe等元素. 举例: script元素:<script src ="js.js"></script> 当浏览器解析到该元素时,会暂停其他资源的下载和处理,直到将该资源加载.编译.执行

easyUI Tab href,content区别

easyUI的Tab面板是继承了panel Tab中js的两种用法: 说明:jsp主页面添加一个id为tab的div,要引入easyUI的相关js.css <div data-options="region:'center'" > <div id="tab" class="easyui-tabs" fit="true"> <div title="主页"></div&

HTML中关于url、scr、href的区别

HTML中关于url.scr.href的区别 URL是什么 URL:Uniform Resource Locators(统一资源定位器)的简写,Web浏览器通过URL从Web服务器请求页面. url不是属性,src和href是属性,src用于替换当前元素,href用于在当前文档和引用资源之间确立联系,也就是说src引用的路径是img等要加载的路径,href引用的路径是要跳转到的地方. src是什么 src是source的简写,表示的是引入文件,目的是要把文件加载到html页面中去,当浏览器解析的

document.URL 和 windows.location.href的区别

1. 从输出结果上,document.URL 和 windows.location.href 没有区别.2. 非要说区别的话,你只可以读取document.URL的值,不能修改它.windows.location.href的值你即可以读取也可以修改.3. windows.location.href是旧的写法,新的标准推荐用document.URL替代.(如果你只是读取的话)

a标签的href=&quot;javascript:void(0)&quot;和href=&quot;#&quot;的区别

好文要推:a标签的href="javascript:void(0)"和href="#"的区别 张鑫旭这篇文章也挺风趣的,作为一个轻微代码洁癖的程序员,该纠结时就纠结:是习惯还是规范!?   疑问:为什么要使用href="javascript:void(0);"? a 标签要写href属性!~有了href属性,天然鼠标手型,以及可以被键盘focus以及focus时候回车模拟点击行为(支持回车点击和默认可以获取焦点). href="#&qu

img, script, link 的 src/href 为空时的bug

重复加载 这个 bug 并不新鲜.早在 2009 年,Nicholas C. Zakas 就发现了空 src 的危害性:Empty image src can destroy your site. Nicholas 的发现可以概括为一句话:img, script, link 的 src/href 为空时,有可能会导致冗余请求. 今天这个 bug 的起因,可以补充 Nicholas 的发现:CSS 里,background url 为空时,也有可能会导致冗余请求. 除了空值,还有一个值也会出问题:

href=&#39;#&#39;和href=&#39;###&#39;的区别以及javascript:;与javascript:void(0)使用介绍

href='#': 我们有时会写这样的连接<a href="#" >xxx</a>为了不发生跳转,其实是不太正确的,因为href="#",包含了一个位置信息.默认的锚是#top,也就是网页的上端,其实它是发生了跳转的,每次都跳转到网页的顶端,如果你的网页只有一屏,当然看不出来,但是会有问题,因为每次点击都发生了跳转,所以,如果频繁点击会导致浏览器巨慢甚至崩溃. href='###': 这种写法是个人习惯问题,解释一下就会明白,基于href=&

链接中 href=&#39;#&#39; 和 href=&#39;###&#39; 的区别以及优缺点

首先,<a> 标签 + onclick='{jscode}' 是很常用的一种 js 运用方式,而不使用 href='javascript:{jscode}' 是为了兼容多种浏览器对 <a> 标签的解释和处理不同.其次,使用 <a> 标签 + onclick='{jscode}'  时经常会加一个 href='###',而有时这个 href='###' 会被误写为 <a href='#'> 是因为使用者没有理解 '#' 和 '###' 的区别. 简单地说,就是

链接中 href=&#39;#&#39; 和 href=&#39;###&#39; 的区别

<a> 标签 + onclick='{jscode}' 是很常用的一种 js 运用方式,而不使用 href='javascript:{jscode}' 是为了兼容多种浏览器对 <a> 标签的解释和处理不同. 使用 <a> 标签 + onclick='{jscode}'  时经常会加一个 href='###',而有时这个 href='###' 会被误写为 <a href='#'> 是因为使用者没有理解 '#' 和 '###' 的区别, '#' 是有特定意义的,