前端面试题HTML+CSS基础篇——HTML5新增特性

HTML5新增特性总结

一、语义标签

为了更好地实现web语义化，HTML5为我们提供了header，footer，aside，session，nav，article等一些语义化标签，这样即使页面没有css结构，也能很好的展示出页面结构，便于开发者阅读理解。

二、表单

1. 表单控件

HTML5为了增强表单，增加了一些新的type类型，方便输入控制和验证。
例如：data，time，month，week，earch，calander，number，color，range（一个范围内数字值的输入域）

2. 表单属性

• placeholder：输入框默认提示文字
• required：规定该项是否为必填项，true为必填，false为非必填，如果input内没有该属性就证明是非必填项
• autofocus：规定在页面加载时，域自动获得焦点
• min / max：规定表单可输入的最大值和最小值
• multiple：规定元素中可选择多个值

三、音频和视频

HTML5提供了音频和视频标签 <audio> / <video>

<audio controls>    //controls属性提供添加播放、暂停和音量控件。
  <source src="horse.ogg" type="audio/ogg">
  <source src="horse.mp3" type="audio/mpeg">
您的浏览器不支持 audio 元素。        //浏览器不支持时显示文字
</audio>

<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
您的浏览器不支持Video标签。
</video>

四、存储

HTML5在存储方面提供了sessionStorage、localStorage和离线存储，通过这些存储方式方便数据在客户端存储和获取

sessionStorage和ocalStorage的区别

• sessionStorage不能长久保存数据，当浏览器该页面或者浏览器关闭的时候，sessionStorage中存储的数据就会过期，而localStorage可以长久保存，即使页面关闭或者浏览器关闭，里面存储的数据也不会过期
• sessionStorage不在不同的浏览器窗口中共享，即使在同一个页面，而localStorage在所有同源的窗口中都是共享的

何为同源：同源指请求的url与当前的url的协议，端口，域名都相同即同源

localStorage.setItem(key,value);//保存数据
let value = localStorage.getItem(key);//读取数据
localStorage.removeItem(key);//删除单个数据
localStorage.clear();//删除所有数据
let key = localStorage.key(index);//得到某个索引的值

五、canvas画布

是 HTML5 新增的，一个可以使用脚本(通常为 JavaScript) 在其中绘制图像的 HTML 元素。它可以用来制作动画，甚至可以进行实时视频处理和渲染。

<canvas id="canvasImg" width="500" height="300">
   你的浏览器不支持 canvas，请升级你的浏览器。
</canvas>

六、Web Worker

JavaScript语言采用单线程的模式，所有的任务都只能在一个主线程中工作，所有的任务都需要等待前一个任务结束才能进行，一次只能执行一个任务。
而Web Worker就是为JavaScript创建多线程环境，允许主线程创建 Worker 线程，将一些任务分配给后者运行。在主线程运行的同时，Worker 线程在后台运行，两者互不干扰。等到 Worker 线程完成计算任务，再把结果返回给主线程。这样的好处是，一些计算密集型或高延迟的任务，被 Worker 线程负担了，主线程（通常负责 UI 交互）就会很流畅，不会被阻塞或拖慢。

Worker 线程一旦新建成功，就会始终运行，不会被主线程上的活动（比如用户点击按钮、提交表单）打断。这样有利于随时响应主线程的通信。但是，这也造成了 Worker 比较耗费资源，不应该过度使用，而且一旦使用完毕，就应该关闭。

Web Worker注意点：

• 同源限制：分配给Web Worker线程运行的脚本文件，必须与主线程的脚本文件同源
• 通信联系：Web Worker线程与主线程不在同一个上下文环境，他们不能直接进行通信联系，必须通过消息完成
• 脚本限制：Web Worker线程不能使用alert()和confirm()方法，但可以使用XMLHttpRequest对象发出AJAX请求
• 文件限制：Web Worker线程无法读取本地文件，即不能打开本机的文件系统（file://），它所加载的脚本，必须来自网络
• Dom限制：Web Worker线程所在的全局对象，与主线程不一样，无法读取主线程所在网页的 DOM 对象，也无法使用document、window，parent这些对象。但是，Web Worker线程可以使用navigator对象和location对象

想要了解更多关于web worker的内容，请关注阮一峰，阮大神的博客，介绍的非常详细，我描述的只是冰山一角！！！

七、WebSocket

WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。

WebSocket 使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。在 WebSocket API 中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输。

在 WebSocket API 中，浏览器和服务器只需要做一个握手的动作，然后，浏览器和服务器之间就形成了一条快速通道。两者之间就直接可以数据互相传送。

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

HTML5 定义的 WebSocket 协议，能更好的节省服务器资源和带宽，并且能够更实时地进行通讯。

简单来说就是省略了三次握手，一次握手之后就可以建立连接，发送请求了

浏览器通过 JavaScript 向服务器发出建立 WebSocket 连接的请求，连接建立以后，客户端和服务器端就可以通过 TCP 连接直接交换数据。当你获取 Web Socket 连接后，你可以通过 send() 方法来向服务器发送数据，并通过 onmessage 事件来接收服务器返回的数据。

var Socket = new WebSocket(url, [protocol] );  //第二个参数可选

Socket.readyState：这是一个只读属性，表示连接状态，包含如下的值：

• 0 - 表示连接尚未建立。
• 1 - 表示连接已建立，可以进行通信。
• 2 - 表示连接正在进行关闭。
• 3 - 表示连接已经关闭或者连接不能打开。

WebSocket 事件：

• open——Socket.onopen：连接建立时触发
• message——Socket.onmessage：客户端接收到服务端数据时触发
• error——Socket.onerror： 通信发生错误时触发
• close——Socket.onclose：连接关闭时触发

WebSocket 方法：

• Socket.send()：使用连接发送数据
• Socket.close()：关闭连接

八、拖拽

HTML5新增了拖拽和拖放功能

• dragstart：事件主体是被拖放元素，再开始拖放被拖放元素时触发
• drag：实践主体是被拖放元素，在正在拖放被拖放元素时触发
• dragenter：事件主体是目标元素，在被拖放元素进入某元素时触发
• dragover：事件主体是目标元素，在被拖放元素在某元素内移动时触发
• dragleave：事件主体是目标元素，在被拖放元素移出目标元素时触发
• drop：事件主体是目标元素，在目标元素完全接受被拖放元素时触发
• dragend：事件主体是被拖放元素，在整个拖放操作结束时触发