收集前端面试题之url、href、src


Posted in Javascript onMarch 22, 2018

一、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,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JavaScript用JQuery呼叫Server端方法示例代码
Sep 03 Javascript
javascript比较两个日期的先后示例代码
Dec 31 Javascript
jQuery使用hide方法隐藏指定元素class样式用法实例
Mar 30 Javascript
jQuery常用且重要方法汇总
Jul 13 Javascript
15款最好的Bootstrap在线编辑器
Aug 03 Javascript
微信小程序使用第三方库Underscore.js步骤详解
Sep 27 Javascript
jQuery鼠标事件总结
Oct 13 Javascript
vue-router路由简单案例介绍
Feb 21 Javascript
js绑定事件和解绑事件
Apr 27 Javascript
微信小程序 开发MAP(地图)实例详解
Jun 27 Javascript
JavaScript禁用右键单击优缺点分析
Jan 20 Javascript
解决layui table表单提示数据接口请求异常的问题
Sep 24 Javascript
vue 的keep-alive缓存功能的实现
Mar 22 #Javascript
bootstrap中selectpicker下拉框使用方法实例
Mar 22 #Javascript
使用Vue开发动态刷新Echarts组件的教程详解
Mar 22 #Javascript
JavaScript分步实现一个出生日期的正则表达式
Mar 22 #Javascript
vuex 的简单使用
Mar 22 #Javascript
Vue.js中的computed工作原理
Mar 22 #Javascript
解决在Bootstrap模糊框中使用WebUploader的问题
Mar 22 #Javascript
You might like
真正面向对象编程:PHP5.01发布
2006/10/09 PHP
PHP number_format() 函数定义和用法
2012/06/01 PHP
很让人受教的 提高php代码质量36计
2012/09/05 PHP
PHP四大安全策略
2014/03/12 PHP
php获取网页里所有图片并存入数组的方法
2015/04/06 PHP
ThinkPHP框架下微信支付功能总结踩坑笔记
2019/04/10 PHP
jQuery + Flex 通过拖拽方式动态改变图片的代码
2011/08/03 Javascript
页面使用密码保护代码
2013/04/10 Javascript
js浮点数精确计算(加、减、乘、除)
2013/12/26 Javascript
Jquery判断radio、selelct、checkbox是否选中及获取选中值方法总结
2015/04/15 Javascript
JavaScript统计网站访问次数的实现代码
2015/11/18 Javascript
requireJS使用指南
2016/04/27 Javascript
jQuery简单验证上传文件大小及类型的方法
2016/06/02 Javascript
JavaScript操作文件_动力节点Java学院整理
2017/06/30 Javascript
JS仿QQ好友列表展开、收缩功能(第一篇)
2017/07/07 Javascript
Vue.js用法详解
2017/11/13 Javascript
elementUI select组件value值注意事项详解
2019/05/29 Javascript
解决vue单页面应用进入页面加载所有 js 的问题
2020/08/12 Javascript
python使用xlrd模块读取xlsx文件中的ip方法
2019/01/11 Python
python实现贪吃蛇游戏
2020/03/21 Python
Django组件content-type使用方法详解
2019/07/19 Python
ipad上运行python的方法步骤
2019/10/12 Python
Python使用gluon/mxnet模块实现的mnist手写数字识别功能完整示例
2019/12/18 Python
python 消除 futureWarning问题的解决
2019/12/25 Python
Python Numpy库常见用法入门教程
2020/01/16 Python
matplotlib实现数据实时刷新的示例代码
2021/01/05 Python
美国购物网站:Clickhere2shop
2021/01/28 全球购物
大学生毕业自荐信
2013/10/10 职场文书
小学教育毕业生自荐信
2013/11/18 职场文书
幼儿园的门卫岗位职责
2014/04/10 职场文书
横幅标语大全
2014/06/17 职场文书
反四风对照检查材料思想汇报
2014/09/16 职场文书
停车位租赁协议书
2014/09/24 职场文书
村党支部群众路线教育实践活动对照检查材料
2014/09/26 职场文书
公安民警正风肃纪剖析材料
2014/10/10 职场文书
教师学期末个人总结
2015/02/13 职场文书