收集前端面试题之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中为String对象添加trim,ltrim,rtrim方法
Sep 22 Javascript
js模拟select下拉菜单控件的代码
May 08 Javascript
Jquery获取复选框被选中值的简单方法
Jul 04 Javascript
js鼠标及对象坐标控制属性详细解析
Dec 14 Javascript
浏览器缩放检测的js代码
Sep 28 Javascript
JavaScript将当前时间转换成UTC标准时间的方法
Apr 06 Javascript
Node.js操作redis实现添加查询功能
May 25 Javascript
Iphone手机、安卓手机浏览器控制默认缩放大小的方法总结(附代码)
Aug 18 Javascript
vue多种弹框的弹出形式的示例代码
Sep 18 Javascript
小程序rich-text组件如何改变内部img图片样式的方法
May 22 Javascript
学前端,css与javascript重难点浅析
Jun 11 Javascript
一文彻底理解js原生语法prototype,__proto__和constructor
Oct 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
德劲1103的维修打理经验
2021/03/02 无线电
无数据库的详细域名查询程序PHP版(4)
2006/10/09 PHP
杏林同学录(六)
2006/10/09 PHP
做了CDN获取用户真实IP的函数代码(PHP与Asp设置方式)
2013/04/13 PHP
PHP实现的自定义图像居中裁剪函数示例【测试可用】
2017/08/11 PHP
javascript 装载iframe子页面,自适应高度
2009/03/20 Javascript
js 鼠标点击事件及其它捕获
2009/06/04 Javascript
JavaScript 打地鼠游戏代码说明
2010/10/12 Javascript
javascript继承之为什么要继承
2012/11/10 Javascript
javascript实现日历控件(年月日关闭按钮)
2012/12/12 Javascript
IE8中使用javascript动态加载CSS的解决方法
2014/06/17 Javascript
Javascript中匿名函数的调用与写法实例详解(多种)
2016/01/26 Javascript
深入理解JavaScript中Ajax
2016/08/02 Javascript
js仿小米官网图片轮播特效
2016/09/29 Javascript
vue项目中的webpack-dev-sever配置方法
2017/12/14 Javascript
JS实现的合并两个有序链表算法示例
2019/02/25 Javascript
JavaScript实现猜数字游戏
2020/05/20 Javascript
js实现表格数据搜索
2020/08/09 Javascript
[51:53]DOTA2-DPC中国联赛 正赛 RNG vs Dragon BO3 第二场 1月24日
2021/03/11 DOTA
python列表去重的二种方法
2014/02/14 Python
Python读取mp3中ID3信息的方法
2015/03/05 Python
Python制作豆瓣图片的爬虫
2017/12/28 Python
对python的输出和输出格式详解
2018/12/08 Python
python下载的库包存放路径
2020/07/27 Python
使用sublime text3搭建Python编辑环境的实现
2021/01/12 Python
美国现代家具购物网站:LexMod
2019/01/09 全球购物
Crabtree & Evelyn欧盟:豪华洗浴、身体和护发
2021/03/09 全球购物
乡镇干部个人整改措施思想汇报
2014/10/10 职场文书
离婚协议书应该怎么写
2014/10/12 职场文书
政风行风整改报告
2014/11/06 职场文书
佛光寺导游词
2015/02/10 职场文书
求职简历自荐信怎么写
2015/03/26 职场文书
浅谈如何写好演讲稿?
2019/06/12 职场文书
总结Python变量的相关知识
2021/06/28 Python
聊聊mysql都有哪几种分区方式
2022/04/13 MySQL
pycharm无法安装cv2模块问题
2022/05/20 Python