收集前端面试题之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 相关文章推荐
模拟用户操作Input元素,不会触发相应事件
May 11 Javascript
JavaScript DOM 学习第七章 表单的扩展
Feb 19 Javascript
JS延迟加载(setTimeout) JS最后加载
Jul 15 Javascript
Javascript实现仿WebQQ界面的“浮云”兼容 IE7以上版本及FF
Apr 27 Javascript
Javascript面向对象编程(三) 非构造函数的继承
Aug 28 Javascript
jquery绑定原理 简单解析与实现代码分享
Sep 06 Javascript
使用js检测浏览器是否支持html5中的video标签的方法
Mar 12 Javascript
JS Ajax请求如何防止重复提交
Jun 13 Javascript
微信小程序 动态绑定事件并实现事件修改样式
Apr 13 Javascript
Node.js 实现简单的接口服务器的实例代码
May 23 Javascript
input 标签实现输入框带提示文字效果(两种方法)
Oct 09 Javascript
深入理解requireJS-实现一个简单的模块加载器
Jan 15 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
php摘要生成函数(无乱码)
2012/02/04 PHP
用PHP和Shell写Hadoop的MapReduce程序
2014/04/15 PHP
php读取txt文件并将数据插入到数据库
2016/02/23 PHP
Joomla实现组件中弹出一个模式(modal)窗口的方法
2016/05/04 PHP
laravel获取不到session的三种解决办法【推荐】
2018/09/16 PHP
根据判断浏览器类型屏幕分辨率自动调用不同CSS的代码
2007/02/22 Javascript
用javascript实现自定义标签
2007/05/08 Javascript
jQuery实现表单input中提示文字value随鼠标焦点移进移出而显示或隐藏的代码
2010/03/21 Javascript
animate动画示例(泪奔的小孩)及stop和delay的使用
2013/05/06 Javascript
Javascript事件实例详解
2013/11/06 Javascript
详谈javascript中DOM的基本属性
2015/02/26 Javascript
javascript制作网页图片上实现下雨效果
2015/02/26 Javascript
12306验证码破解思路分享
2015/03/25 Javascript
微信小程序 教程之注册程序
2016/10/17 Javascript
jQuery中$.grep() 过滤函数 数组过滤
2016/11/22 Javascript
详解如何将angular-ui的图片轮播组件封装成一个指令
2017/05/09 Javascript
使用 Node.js 对文本内容分词和关键词抽取
2017/05/27 Javascript
深入理解Angular中的依赖注入
2017/06/26 Javascript
老生常谈JavaScript面向对象基础与this指向问题
2017/10/16 Javascript
安装python3的时候就是输入python3死活没有反应的解决方法
2018/01/24 Python
python操作xlsx文件的包openpyxl实例
2018/05/03 Python
Python读写及备份oracle数据库操作示例
2018/05/17 Python
python中virtualenvwrapper安装与使用
2018/05/20 Python
对python多线程中互斥锁Threading.Lock的简单应用详解
2019/01/11 Python
python使用多线程编写tcp客户端程序
2019/09/02 Python
利用python3 的pygame模块实现塔防游戏
2019/12/30 Python
Python插件机制实现详解
2020/05/04 Python
Ajax和javascript的区别
2013/07/20 面试题
环境科学专业优秀毕业生自荐书
2014/02/03 职场文书
微笑服务标语
2014/06/24 职场文书
过程装备与控制工程专业求职信
2014/07/02 职场文书
关于工作经历的证明书
2014/10/11 职场文书
2014年党建工作总结
2014/11/11 职场文书
2015年个人实习工作总结
2014/12/12 职场文书
postgresql 删除重复数据案例详解
2021/08/02 PostgreSQL
详解MySql中InnoDB存储引擎中的各种锁
2022/02/12 MySQL