前端面试题(HTML) ----- 持续更新

1.网络中使用最多的图片格式有哪些

JPEG,GIF,PNG,最流行的是jpeg格式，可以把文件压缩到最小 ,在ps以jpeg格式存储时，提供11级压缩级别

JPG（或是JPEG）：

优点：

• 占内存小,网页加载速度快;
• 主要用于摄影作品或者写实作品（或是其他细节、色彩丰富的图片）或大的背景图

缺点：

• JPG格式图片是有损压缩的图片，有损压缩会使原始图片数据质量下降，即JPG会在压缩图片时降低品质。

PNG：

优点：

• JPG格式图片是无损压缩的图片，能在保证最不失真的情况下尽可能压缩图像文件的大小。
• 图片质量高；色彩表现好；支持透明效果；提供锋利的线条和边缘，所以做出的logo等小图标效果会更好；更好地展示文字、颜色相近的图片。
• 所含颜色很少、具有大块颜色相近的区域或亮度差异十分明显的较简单的图片则需要采用PNG。但也会有一些特殊情况，例如有些图像尽管色彩层次丰富，但由于图片尺寸较小，上面包含的颜色数量有限时，也可以尝试用PNG进行存储。而有些矢量工具绘制的图像由于采用较多的滤镜特效也会形成丰富的色彩层次，这个时候就需要采用JPG进行存储了。主要用于小图标或颜色简单对比强烈的小的背景图。根据经验用于页面结构的基本视觉元素，如容器的背景、按钮、导航的背景等应该尽量用PNG格式进行存储，这样才能更好的保证设计品质。

缺点：

• 占内存大,会导致网页加载速度慢;
• 对于需要高保真的较复杂的图像，PNG虽然能无损压缩，但图片文件较大，不适合应用在Web页面上。

注：在存储图像时采用JPG还是PNG主要依据图像上的色彩层次和颜色数量进行选择。

GIF：

GIF是一种色彩效果低、体积小、支持透明的图像文件格式

使用场景总结

色彩丰富的图片（摄影图、写实图）建议首选JPG次选PNG24
大面积色块（插画、海报）或存在渐变色彩的图片建议首选PNG24次选GIF
单色调图片（logo、文字、动画）建议选择GIF或者PNG8

2.视频/音频标签的使用

视频标签：video

属性	属性描述
src	视频地址
width/height	设置播放视频的宽高
autoplay	是否自动播放
controls	是否显示控制条
poster	没有播放之前显示的展位图片
loop	是否循环播放
perload	预加载视频（缓存）（注：与autoplay相冲突，设置了autoplay属性，perload属性会失效）
muted	静音模式

音频标签：audio

属性	属性描述
src	视频地址
autoplay	是否自动播放
controls	是否显示控制条
loop	是否循环播放
perload	预加载音乐（缓存）（注：与autoplay相冲突，设置了autoplay属性，perload属性会失效）
muted	静音模式

3.HTML5新增的内容有哪些

总结

1.新增语义化标签：header 、main、footer、nav、section、aside、article
2.视频/音频标签：audio，video
3.数据存储：localStorage、sessionStorage
4.canvas(画布)、Geolocation(地理定位)、websocket(通信协议)
5.input标签新增属性：placeholder、autocomplete、autofocus、required

1. 新增语义化标签

标签	标签定义
header	页面头部
main	页面主要内容
footer	页面底部
nav	导航栏
section	文档中的节、区段
aside	侧边栏
article	加载页面一块独立内容

2. 新增多媒体标签

• 视频/音频

3. 新增表单类型

• email：提交表单的时候验证输入值是否满足email的格式
• url：提交表单的时候验证输入值是否满足url的格式
• number：根据你的设置提供选择数字的功能，其中min为最小值，max为最大值，value为默认值
• range：会以一个滑块的形式表现包含一定范围内数字值的输入域，max为最大值，min为最小值，
• date：选取日、月、年
• month：选取月、年
• week：选取周、年
• time：选取小时、分钟
• datetime：选取时间、日、月、年(UTC时间)（我这里浏览器显示不出效果）
• search：用于搜索域，若加上result="s"属性，则会在搜索框前面加一个搜索图标
• tel：验证输入的是否是电话号码的格式
• color：color类型会提供颜色拾取器，供用户选择颜色，并将用户选择的颜色填充到此元素中 …

4. 新增表单属性

• autofocus：在打开页面时使元素自动获取焦点
• placeholder: 在用户输入时进行提示
• form：表明元素属于哪个表单，无论元素的位置在哪里，所属表单都能获取该元素的值
• required：表明该元素是必填项，当提交表单的时候会自动验证该元素的内容是否不为空
• autocomplete：使form元素或者input元素拥有自动完成功能，既记录用户之前输入的值，关闭为off，默认为on。 …

5. 新增表单事件

• oninput: 当输入框内容发生改变时触发此事件
• oninvalid: 当验证不通过时触发此事件

6. Web存储

提供了两种在客户端存储数据的方法：

• localStorage：没有时间限制的数据存储
• sessionStorage：针对一个session的数据存储

7.其他

• 拖放：拖放是一种常见的特性，即抓取对象以后拖到另一个位置。 设置元素可拖放：加上draggable属性

• 画布(canvas)：使用JavaScript在网页上绘制图像

• SVG：指可伸缩矢量图形，图像在放大或改变尺寸的情况下其图片质量不会有损失

• 地理定位：用于定位用户的位置

4. src和href的区别

1、请求资源类型不同

• href是HypertextReference的缩写，表示超文本引用。用来建立当前元素和文档之间的链接。常用的有：link、a。
• 在请求 src 资源时会将其指向的资源下载并应用到文档中，常用的有script，img 、iframe；

2、作用结果不同

• href 用于在当前文档和引用资源之间确立联系；
• src 用于替换当前内容；

3、 浏览器解析方式不同

• <link href="common.css" rel="stylesheet"/>，浏览器会识别该文档为 CSS 文件，就会并行下载资源并且不会停止对当前文档的处理。这也是为什么建议使用 link 方式加载 CSS，而不是使用 @import 方式。
• <script src="js.js"></script>,当浏览器解析到src，会暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕，图片和框架等也如此，类似于将所指向资源应用到当前内容。这也是为什么建议把 js 脚本放在底部而不是头部的原因。

补充： link和@import的区别

• link是XHTML标签，除了能够加载CSS，还可以定义RSS等其他事务；而@import属于CSS范畴，只可以加载CSS。
• link引用CSS时，在页面载入时同时加载；@import需要页面完全载入以后再加载。
• link是XHTML标签，无兼容问题；@import则是在CSS2.1提出的，低版本的浏览器不支持。
• link支持使用Javascript控制DOM改变样式；而@import不支持。

5.聊一聊URL

一、URL的概念

统一资源定位符（或称统一资源定位器/定位地址、URL地址等，英语：Uniform Resource Locator，常缩写为URL），有时也被俗称为网页地址（网址）。如同在网络上的门牌，是因特网上标准的资源的地址（Address）。

二、URL的格式

标准格式
协议类型:[//服务器地址[:端口号]][/资源层级UNIX文件路径]文件名?查询

完整格式
协议类型:[//[访问资源需要的凭证信息@]服务器地址[:端口号]][/资源层级UNIX文件路径]文件名?查询#片段ID

示例：http://www.example.com:80/path/to/myfile.html?key1=value1&key2=value2#SomewhereInTheDocument
下面来分析一下它的几个部分：
1、http:// ——HTTP协议（超文本转移协议），当然也可以是其他协议。
2、www.baidu.com ——域名，表明在访问哪个服务器，当然也可以用IP地址代替。
3、:80 —— 端口，用于访问Web服务器上的资源的技术“门”。
4、/path/to/myfile.html —— 网络服务器上资源的路径。
5、?key1=value1&key2=value2 —— 提供给网络服务器的额外参数。这些参数用&分隔开。
6、#SomewhereInTheDocument —— 资源本身的另一部分的锚点，锚点像一个迅速定位器一样，可以在网页中设置标记，然后创建链接，创建的链接可以使我们迅速访问到指定位置（想到了书签~~）

6. 常见的meta标签有哪些

meta标签由name和content属性定义，用来描述网页文档的属性

(1) charset， 用来描述HTML文档的编码类型

<meta charset="UTF-8">

(2) 网页描述

属性名	示例代码
description	<meta name="description" content="不超过150个字符" /> <!-- 页面描述 -->
keywords	<meta name="keywords" content=""/> <!-- 页面关键词 -->
author	<meta name="author" content="name, email@gmail.com" /> <!-- 网页作者 -->

(3) 定义网页搜索引擎索引方式（SEO优化）

<meta name="robots" content="index,follow" /> <!-- 搜索引擎抓取 -->

content参数	功能
all	文件将被检索， 且页面上的链接可以被查询
none	文件将不被检索， 且页面上的链接不可以被查询
index	文件将被检索
follow	页面上的链接可以被查询
noindex	文件将不被检索
nofollow	页面上的链接不可以被查询

(4) refresh， 页面的重定向和刷新
说明：页将在设定的时间内，自动刷新并调向设定的网址

<meta http-equiv="refresh" content="2；URL=http://www.lxxyx.win/"> //意思是2秒后跳转向我的博客

(5) viewport， 适配移动端，可以控制视口的大小和比例

content参数	功能
width	viewport 宽度(数值/device-width)
height	viewport 高度(数值/device-height)
initial-scale	初始缩放比例
maximum-scale	最大缩放比例
minimum-scale	最小缩放比例
user-scalable	是否允许用户缩放(yes/no)

----点击 深入了解移动端viewport适配------

7. label标签的作用

说明：label标签来定义表单控制间的关系,当用户选择该标签时，浏览器会自动将焦点转到和标签相关的表单控件上。

<label for="Name">Number:</label>
<input type='text' name="Name" id="Name"/>

<label>Date:<input type="text" name="B"/></label>

8. 行内元素有哪些？块级元素有哪些？ 空(void)元素有那些？

首先：CSS规范规定，每个元素都有display属性，确定该元素的类型，每个元素都有默认的display值，如div的display默认值为“block”，则为“块级”元素；span默认display属性值为“inline”，是“行内”元素。

• 常用的块状元素有： <div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<form>
• 常用的内联元素有： <img/> 、<input/>、<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>
• 空元素： <br/> <hr/> <img/> <input/> <link/> <meta/> <br />...

9. 块级元素与行级元素的特点

(1) 块级元素的特点：

• 总是从新行开始
• 高度，行高、外边距以及内边距都可以控制。
• 宽度默认是容器的100%
• 可以容纳内联元素和其他块元素。

(2) 行级元素的特点：

• 和相邻行内元素在一行上。
• 高、宽无效，但水平方向的padding和margin可以设置，垂直方向的无效。
• 默认宽度就是它本身内容的宽度。
• 行内元素只能容纳文本或则其他行内元素。（a特殊）

10.本地存储

(1) localstorage 与 sessionStorage

1. 作用域与生存期：
   

• localStorage只要在相同的协议、相同的主机名、相同的端口下，就能读取/修改到同一份localStorage数据。localStorage理论上来说是永久有效的，即不主动清空的话就不会消失，即使保存的数据超出了浏览器所规定的大小，也不会把旧数据清空而只会报错。
• sessionStorage比localStorage更严苛一点，除了协议、主机名、端口外，还要求在同一窗口（也就是浏览器的标签页）下。sessionStorage只要关闭浏览器（也包括浏览器的标签页），就会被清空。

2. 使用方法：

localStorage.setItem("b","isaac");//设置b为"isaac"
var b = localStorage.getItem("b");//获取b的值,为"isaac"
var a = localStorage.key(0); // 获取第0个数据项的键名，此处即为“b”
localStorage.removeItem("b");//清除b的值
localStorage.clear();//清除当前域名下的所有localstorage数据
//sessionStorage的用法同上

(2) cookie

1. Cookie 的作用就是用于解决 “如何记录客户端的用户信息”:

2. Cookie 以名/值对形式存储，如下所示:
   username=John Doe

3. 当浏览器从服务器上请求 web 页面时， 属于该页面的 cookie 会被添加到该请求的HTTP头中

4. 生存期:可设置失效时间，没有设置的话，默认是关闭浏览器后失效 设置失效时间： document.cookie="username=John Doe; expires=Thu, 18 Dec 2043 12:00:00 GMT";

11.说一下Web Worker

(1) JavaScript 语言采用的是单线程模型，也就是说，所有任务只能在一个线程上完成，一次只能做一件事。前面的任务没做完，后面的任务只能等着。

(2) Web Worker 的作用，就是为 JavaScript 创造多线程环境，允许主线程创建 Worker 线程，将一些任务分配给后者运行。在主线程运行的同时，Worker 线程在后台运行，两者互不干扰。等到 Worker 线程完成计算任务，再把结果返回给主线程。这样的好处是，一些计算密集型或高延迟的任务，被 Worker 线程负担了，主线程（通常负责 UI 交互）就会很流畅，不会被阻塞或拖慢。

(3)如何创建web worker：

1. 检测浏览器对于web worker的支持性
2. 创建web worker文件(js脚本文件、回传函数等)
3. 创建web worker对象

----点击 深入了解移动端Web Worker------

12.聊一聊WebSocket

（1）说明：webSocket 允许服务端主动向客户端推送数据。在 WebSocket API 中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输。

（2）与 Ajax 轮询的对比：

• 很多网站为了实现推送技术，所用的技术都是 Ajax 轮询。轮询是在特定的的时间间隔（如每1秒），由浏览器对服务器发出HTTP请求，然后由服务器返回最新的数据给客户端的浏览器。这种传统的模式带来很明显的缺点，即浏览器需要不断的向服务器发出请求，然而HTTP请求可能包含较长的头部，其中真正有效的数据可能只是很小的一部分，显然这样会浪费很多的带宽等资源。
• HTML5 定义的 WebSocket 协议，能更好的节省服务器资源和带宽，并且能够更实时地进行通讯。

----点击 深入了解WebSocket ------

13. HTML5离线储存

(1) 离线存储指的是：在用户没有与因特网连接时，可以正常访问站点或应用，在用户与因特网连接时，更新用户机器上的缓存文件。

(2) 原理： HTML5的离线存储是基于一个新建的.appcache文件的缓存机制(不是存储技术)，通过这个文件上的解析清单离线存储资源，这些资源就会像cookie一样被存储了下来。之后当网络在处于离线状态下时，浏览器会通过被离线存储的数据进行页面展示。

(3) 如何使用：

• 创建一个和manifest文件，然后在页面头部加入manifest属性：

 <html  manifest="test.appcache">

• 在test.manifest文件中编写需要离线存储的资源：

CACHE MANIFEST
#test.manifest本文件名字的注释
CACHE:
js/jquery-2.1.4.min.js
js/zepto.js
js/common.js
js/jquery.SuperSlide.2.1.1.js
css/reset.css
css/style.css
css/swiper-3.2.7.min.css
images/2yuan.png
images/10yuan.png

在离线状态时，操作window.applicationCache进行需求实现。

• ①　CACHE：必选，表示需要离线存储的资源列表，由于包含manifest文件的页面将被自动离线存储，所以不需要把页面自身也列出来。

• ②　NETWORK：可选，可以使用通配符，表示在它下面列出来的资源只有在在线的情况下才能访问，他们不会被离线存储，所以在离线情况下无法使用这些资源。不过，如果在CACHE和NETWORK中有一个相同的资源，那么这个资源还是会被离线存储，也就是说CACHE的优先级更高。

• ③　FALLBACK：可选，表示如果访问第一个资源失败，那么就使用第二个资源来替换他，如/html/ /404.html表示用 “404.html” 替代 /html/ 目录中的所有文件，/ /404.html表示用 “404.html” 替代当前目录中的所有文件，*.html /404.html表示用 “404.html” 替代 所有html文件。

(4) 更新缓存的三种方式：

• 更新manifest文件

• 通过javascript操作

• 清除浏览器缓存

14.浏览器是怎么对HTML5的离线储存资源进行管理和加载的呢？

• 在线的情况下，浏览器发现html头部有manifest属性，它会请求manifest文件，如果是第一次访问app，那么浏览器就会根据manifest文件的内容下载相应的资源并且进行离线存储。如果已经访问过app并且资源已经离线存储了，那么浏览器就会使用离线的资源加载页面，然后浏览器会对比新的manifest文件与旧的manifest文件，如果文件没有发生改变，就不做任何操作，如果文件改变了，那么就会重新下载文件中的资源并进行离线存储。
• 离线的情况下，浏览器就直接使用离线存储的资源。