发现自己居然没把url、href、src关系及使用搞清楚,今天就理一下。主要包括:url、src、href定义以及使用区别。

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标签页与此类似。浏览器暂停加载直到提取和加载图像。

url,href,src之间的区别的更多相关文章

  1. url,href,src 之间的区别

    url 统一资源定位符 <style> #bg{ background-image:url("img/bg.png"); } </style> 区别: sr ...

  2. url,href,src区别

    URL(Uniform Resource Locator) 统一资源定位符是对可以从互联网上得到的资源的位置和访问方法的一种简洁的表示,是互联网上标准资源的地址.互联网上的每个文件都有一个唯一的URL ...

  3. 三种角度解释href/src/link/import区别

    网上查到的几种不同但比较容易理解的解释 解释一: href是Hypertext Reference的缩写,表示超文本引用.用来建立当前元素和文档之间的链接.常用的有:link.a.例如: <li ...

  4. URI、URL和URN之间的区别与联系

    URI:Uniform Resource Identifier,统一资源标识符: URL:Uniform Resource Locator,统一资源定位符: URN:Uniform Resource  ...

  5. URI、URL和URN之间的区别

    URI标识一个事物,URL定位一个事物:然而,位置同样可以标识一个事物,所以,每个URL都是一个 URI,但一个URI并不一定是一个URL. 举例说明 罗杰·佩特 这是我的名字,这是一个标识.它就像一 ...

  6. URI和URL之间的区别

    URI的全称为统一资源标识符(Uniform Resource Identifier),是一个用于标识某一互联网资源名称的字符串. 该种标识允许用户对任何(包括本地和互联网)的资源通过特定的协议进行交 ...

  7. url 、src 、href 的区别

    url.href.src 详解 现自己居然没把url.href.src关系及使用搞清楚,今天就理一下.主要包括:url.src.href定义以及使用区别. URL(Uniform Resource L ...

  8. URL、SRC、HREF知识整理

    今天理一下URL.SRC.HREF定义以及使用区别. URL(Uniform Resource Locator) 统一资源定位符是对可以从互联网上得到的资源的位置和访问方法的一种简洁的表示,是互联网上 ...

  9. [转]ExtJs基础--Html DOM、Ext Element及Component三者之间的区别

    要学习及应用好Ext框架,必须需要理解Html DOM.Ext Element及Component三者之间的区别. 每一个HTML页面都有一个层次分明的DOM树模型,浏览器中的所有内容都有相应的DOM ...

随机推荐

  1. python统计词频

    arr = [1,2,3,4,5,6,4,5,2,3,6,8,9,6,5,3,6,2,4]dic={}for item in arr: if item in dic.keys(): dic[item] ...

  2. 多线程——工具类之Semaphore

    一.Semaphore功能介绍 Semaphore类相当于线程计数器,在获取Semaphore对象时设定可以产生的线程总数(线程并不是Semaphore类生成的,它只是统计线程的数量),创建Semap ...

  3. Android学习笔记2——shape

    Android有很多特别的xml文件,如常用的selector.style以及shape,熟练使用这些xml可以是我们的项目变得更个性化. 一.子标签(corners.gradient.padding ...

  4. c++ --> 父类与子类间的继承关系

    父类与子类间的继承关系 一.父类与子类 父类与子类的相互转换 1.派生类的对象可以赋给基类,反之不行 2.基类的指针可以指向派生类,反之不行 3.基类的引用可以初始化为派生类的对象,反之不行 4.派生 ...

  5. java 打印近似圆

    只要给定不同半径,圆的大小就会随之发生改变近似圆如图 设半径为r,圆心为(r,r). 由勾股定理 易得y = r -√(2*r*x-x*x) 此处注意x+=2.因为打印窗口上一行2个字节的宽度与一列的 ...

  6. 解决数据库mysql插入乱码问题

    当我们遇到mysql乱码问题的时候,一般要修改my.ini文件: 我遇到的是两个版本,一个是mysql5.5版本,另一个是mysql5.7 5.5的是在这个目录下面:C:\Program Files\ ...

  7. 关于hadoop集群下Datanode和Namenode无法访问的解决方案

    HDFS架构 HDFS也是按照Master和Slave的结构,分namenode,secondarynamenode,datanode这几个角色. Namenode:是maseter节点,是大领导.管 ...

  8. 使用git将文件上传到Coding

    1,首先在Coding上新建项目. 2,填写项目的相关内容. 3,建立项目后复制下面鼠标所选内容. 4,在自己的电脑中建立文件夹. 5,进入该文件夹后,点击鼠标右键,然后再点Git  Clone. 6 ...

  9. Linux下vim上编辑实现进度条

    1.效果展示: 进度条,先来看一个效果: 这是进度结果,模拟实现了进度条的前进.百分比的现实.以及稍微的动画特效. 2.原理描述: 因为Linux系统下的输出有缓存,如果及时刷新显示,就可以得到我们想 ...

  10. iOS 播放音频的几种方法

    Phone OS 主要提供以下了几种播放音频的方法: System Sound Services AVAudioPlayer 类 Audio Queue Services OpenAL 1. Syst ...