一、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:

Scheme 访问 用于...
http 超文本传输协议 以 http:// 开头的普通网页。不加密。
https 安全超文本传输协议 安全网页。加密所有信息交换。
ftp 文件传输协议 用于将文件下载或上传至网站。
file   您计算机上的文件。

四、URL的类型

4.1 绝对URL

绝对URL(absolute URL)显示文件的完整路径,这意味着绝对URL本身所在的位置与被引用的实际文件的位置无关

4.2 相对URL

相对URL(relative URL)以包含URL本身的文件夹的位置为参考点,描述目标文件夹的位置。

一般来说,对于同一服务器上的文件,应该总是使用相对URL,它们更容易输入,而且在将页面从本地系统转移到服务器上时更方便,只要每个文件的相对位置保持不变,链接就仍然是有效地。

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

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

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

(3) ../../:代表的是上一层目录的上一层目录,相对路径。 如: <img src="../../abc" />

(4) /:代表根目录,绝对路径。 如:[文本] (/abc) 或 <img src="/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不支持。

url、href、src的更多相关文章

  1. url、href、src 详解

    发现自己居然没把url.href.src关系及使用搞清楚,今天就理一下.主要包括:url.src.href定义以及使用区别.顺便试下在segmentfault来一发. URL(Uniform Reso ...

  2. 「HTML5」url、href、src区别

    一.URL的概念 统一资源定位符(或称统一资源定位器/定位地址.URL地址等,英语:Uniform Resource Locator,常缩写为URL),有时也被俗称为网页地址(网址).如同在网络上的门 ...

  3. 前端中url、href、src的详细含义

    一.URL的概念 统一资源定位符(或称统一资源定位器/定位地址.URL地址等,英语:Uniform Resource Locator,常缩写为URL),有时也被俗称为网页地址(网址).如同在网络上的门 ...

  4. 前端面试题-url、href、src

    一.URL的概念 统一资源定位符(或称统一资源定位器/定位地址.URL地址等,英语:Uniform Resource Locator,常缩写为URL),有时也被俗称为网页地址(网址).如同在网络上的门 ...

  5. 3、href和src的区别

    href:将现在的页面连接到新的页面 src:将需要引用的东西添加到现在的页面 <a href="mailto:youremailaddress@host.com">C ...

  6. url,href和src的区别,defer和async的区别

    URL(Uniform Resource Locator):统一资源定位符,互联网上的每个文件都有一个唯一的URL,基本URL包含协议,IP地址,路径和文件名. 重点:herf和src的区别 href ...

  7. url 、src 、href 的区别

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

  8. href,src,url 整理

    一.href 和 src 的定义及区别 href:Hypertext Reference(超文本引用),指定网络资源的位置,从而在当前元素或者当前文档和由当前属性定义的需要的锚点或资源之间定义一个链接 ...

  9. PyQt(Python+Qt)学习随笔:QTextEdit的setText、setHtml、setPlainText之间的区别

    专栏:Python基础教程目录 专栏:使用PyQt开发图形界面Python应用 专栏:PyQt入门学习 老猿Python博文目录 QTextEdit中提供了三个设置编辑器文本的方法,分别是setTex ...

随机推荐

  1. 2019牛客暑期多校训练营(第六场) H:Train Driver (最短路+概率)

    题意:给定无向图,Alice在A集合选一个点,Bob在B集合选一个点,CXK在全集里选择一个点. 然后问“三人到某一点集合打篮球的最小距离”的期望. 思路:做过一个裸题,就是给定三人位置,问去哪里集合 ...

  2. 五个wordpress调用随机文章的方法

    分享几个WordPress不用插件调用随机文章的方法,不仅增强用户粘性,而且当蜘蛛来爬你的文章的时候每次都会有变化,搜索引擎很喜欢.主要用到的是orderby rand参数,下面就随ytkah一起来看 ...

  3. 前端性能----CDN

    Content Distribute Network(内容分发网络)是构建在网络之上的内容分发网络,依靠部署在各地的边缘服务器,通过中心平台的负载均衡.内容分发.调度等功能模块,使用户就近获取所需内容 ...

  4. UI系统综述:iOS的图形绘制、动画与runloop

    一.一条业务pipeline: 一个连接核心:coreanimation 二.两个进程: 1.app进程: 2.render进程: 首先,由 app 处理事件(Handle Events),如:用户的 ...

  5. day006-python函数

    一.定义函数 def 函数名(): 函数体代码 例: #定义函数 def email(): print('send email') #调用执行函数 email() 二.函数的返回值 def email ...

  6. SDU暑假排位第一场 (Gym - 100889)

    啊今天有点挂机啊 D题和队友暴力后发现一组数据跑得飞快 然后遇上1e5组数据就没了..... 然后我疯狂优化暴力 然后去世了 最后半小时F也没写出来 主要还是最后有点慌并且没有考虑清楚 导致情况越写越 ...

  7. uni-app 获取网络状态

    uni.getNetworkType(OBJECT) 获取网络类型. OBJECT 参数说明 参数名 类型 必填 说明 success Function 是 接口调用成功,返回网络类型 network ...

  8. Ubuntu 14.04 安装python3.7

    下载: https://www.python.org/ftp/python/3.7.4/ .tgz文件,解压后,进入该文件夹 编译./configuremakesudo make install 当 ...

  9. Tecplot——为动画添加求解时间(翻译)

    翻译自:<Tecplot 360 Getting Started Manual>中的Scenic Detour: Add Solution Time Caption 首先展示效果: 在画图 ...

  10. v-model和 .sync

    1.v-model的双向数据绑定其实是一个语法糖,类似于,给子组件传入一个value值,并且监听子组件的input事件,在这个事件里将子组件传过来的新值赋值给父组件的value <Input v ...