收集前端面试题之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 相关文章推荐
ie中js创建checkbox默认选中问题探讨
Oct 21 Javascript
JavaScript中setInterval的用法总结
Nov 20 Javascript
CSS3,HTML5和jQuery搜索框集锦
Dec 02 Javascript
Javascript 正则表达式校验数字的简单实例
Nov 02 Javascript
jquery对象与DOM对象转化
Feb 08 Javascript
jquery 禁止鼠标右键并监听右键事件
Apr 27 jQuery
vue实现购物车抛物线小球动画效果的方法详解
Feb 13 Javascript
微信小程序 动态修改页面数据及参数传递过程详解
Sep 27 Javascript
jquery获取并修改触发事件的DOM元素示例【基于target 属性】
Oct 10 jQuery
Javascript异步编程async实现过程详解
Apr 02 Javascript
Vue实现可移动水平时间轴
Jun 29 Javascript
Vue解决移动端弹窗滚动穿透问题
Dec 15 Vue.js
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 各种排序算法实现代码
2009/08/20 PHP
PHP获取数组最大值下标的方法
2015/05/12 PHP
php命令行(cli)下执行PHP脚本文件的相对路径的问题解决方法
2015/05/25 PHP
PHPExcel实现表格导出功能示例【带有多个工作sheet】
2018/06/13 PHP
php-fpm中max_children的配置
2019/03/15 PHP
Js 获取HTML DOM节点元素的方法小结
2009/04/24 Javascript
extjs 学习笔记(二) Ext.Element类
2009/10/13 Javascript
js获取下拉列表框中的value和text的值示例代码
2014/01/11 Javascript
a标签click和href执行顺序探讨
2014/06/23 Javascript
了不起的node.js读书笔记之mongodb数据库交互
2014/12/22 Javascript
仅一个form表单 js实现注册信息依次填写提交功能
2016/06/12 Javascript
JavaScript中最容易混淆的作用域、提升、闭包知识详解(推荐)
2016/09/05 Javascript
JavaScript队列的应用实例详解【经典数据结构】
2017/04/12 Javascript
js拖动滑块和点击水波纹效果实例代码
2018/10/16 Javascript
JS实现页面跳转与刷新的方法汇总
2019/08/30 Javascript
小程序input数据双向绑定实现方法
2019/10/17 Javascript
JS中作用域以及变量范围分析
2020/07/18 Javascript
通过代码实例展示Python中列表生成式的用法
2015/03/31 Python
win10下tensorflow和matplotlib安装教程
2018/09/19 Python
python pandas消除空值和空格以及 Nan数据替换方法
2018/10/30 Python
解决Python 使用h5py加载文件,看不到keys()的问题
2019/02/08 Python
python super函数使用方法详解
2020/02/14 Python
马来西亚最大的电器网站:Senheng
2017/10/13 全球购物
岗位职责的含义
2013/11/17 职场文书
执行力心得体会
2013/12/31 职场文书
综合实践活动方案
2014/02/14 职场文书
私人会所最新创业计划书范文
2014/03/24 职场文书
机关出纳岗位职责
2014/04/03 职场文书
协议书怎么写
2014/04/21 职场文书
入职担保书怎么写
2014/05/12 职场文书
公司承诺书格式
2014/05/21 职场文书
学习十八大的心得体会
2014/09/01 职场文书
先进典型事迹材料
2014/12/29 职场文书
大学生暑期实践报告之企业经营管理
2019/08/08 职场文书
Spring Boot DevTools 全局配置学习指南
2022/03/31 Java/Android
uniapp 微信小程序 自定义tabBar 导航
2022/04/22 Javascript