前端面试题——HTML5的新特性

前言

为了更好地处理今天的互联网应用，HTML5添加了很多新元素及功能，比如: 图形的绘制，多媒体内容，更好的页面结构，更好的形式 处理，和几个api拖放元素，定位，包括网页 应用程序缓存，存储等

1、语义化标签

所谓语义标签就是看到标签我就能明白这是什么意思。以前制作网页布局基本使用div来做。div就是一个普通的块级标签，对搜索引擎来说没有任何的语义。

标签	描述
	定义了文档的头部区域
	定义了文档的尾部区域
	定义文档的导航
	定义文档中的节（section、区段）
	定义页面独立的内容区域
	定义页面的侧边栏内容
	用于描述文档或文档某个部分的细节
	标签包含 details 元素的标题
	定义对话框，比如提示框

使用语义化标签有利于SEO（Search Engine Optimization 搜索引擎优化），和搜索引擎建立良好的沟通，有助于爬虫爬取更多有效的信息。因为爬虫依赖于标签来确定上下文和各个关键字的权重。也能方便团队开发和维护，增加代码可读性，遵循标准，减少差异化。

2、增强型表单

HTML5 拥有多个新的表单 Input 输入类型。这些新特性提供了更好的输入控制和验证。

新增5个表单元素

标签	内容
	进度条，展示连接/下载进度
	刻度值，用于某些计量，例如温度、重量等
	提供一种验证用户的可靠方法生成一个公钥和私钥
	用于不同类型的输出比如计算或脚本输出
	用户会在他们输入数据时看到定义域选项的下拉列表

新增多个表单输入类型

输入类型	描述
color	主要用于选取颜色
date	从一个日期选择器选择一个日期
datetime	选择一个日期（UTC 时间）
datetime-local	选择一个日期和时间 (无时区)
email	包含 e-mail 地址的输入域
month	选择一个月份
number	数值的输入域
range	一定范围内数字值的输入域
search	用于搜索域
tel	定义输入电话号码字段
time	选择一个时间
url	URL 地址的输入域
week	选择周和年

新增表单属性

属性	描述
placehoder	输入框默认提示文字
required	要求输入的内容是否可为空
pattern	描述一个正则表达式验证输入的值
min/max	设置元素最小/最大值
step	为输入域规定合法的数字间隔
height/wdith	用于image类型标签图像高度/宽度
autofocus	规定在页面加载时，域自动获得焦点
multiple	规定元素中可选择多个值

3、视频和音频

html5提供了音频和视频文件的标准，既使用

4、Canvas绘图

元素负责在页面中设定一个区域，然后就可以通过 Javascript 动态地在这个区域中绘制图形。

5、SVG绘图

什么是svg

SVG 是一种使用 XML 描述 2D 图形的语言，在放大或改变尺寸的情况下其图形质量不会有损失，当svg对象的属性发生变换时，浏览器会重新渲染该图形。

与canvas的区别

• canvas可以随时绘制2D图形（用JavaScript）
• svg是基于XML的，意味着可以操作DOM，渲染速度较慢
• 在SVG中每个形状都被当做是一个对象，如果SVG发生改变，页面就会发生重绘
• Canvas是一像素一像素地渲染，如果改变某一个位置，整个画布会重绘

svg用法

6、地理位置

地理位置能够识别你的定位，并且与别人共享地理信息。

navigator.geolocation.getCurrentPosition(
    function(pos){
　　　　console.log('用户定位数据获取成功')
　　　　console.log('定位时间：',pos.timestamp)
　　　　console.log('经度：',pos.coords.longitude)
　　　　console.log('纬度：',pos.coords.latitude)
　　　　console.log('海拔：',pos.coords.altitude)
　　　　console.log('速度：',pos.coords.speed)
    },    //定位成功的回调
    function(err){ 
　　　　console.log('用户定位数据获取失败')
    }     //定位失败的回调
)

7、拖放Api

设置元素为可拖放

拖拽对象的方法

• setData(format,data)

将指定格式的数据赋值给dataTransfer对象，参数format定义数据的格式也就是数据的类型，data为待赋值的数据

• getData(format)

从dataTransfer对象中获取指定格式的数据，format代表数据格式，data为数据。

• clearData([format])

从dataTransfer对象中删除指定格式的数据，参数可选，若不给出，则为删除对象中所有的数据

• addElement(element)

添加自定义图标。

• setDragImage(element,x,y)

设置拖放操作的自定义图标。其中element设置自定义图标，x设置图标与鼠标在水平方向上的距离，y设置图标与鼠标在垂直方向上的距离。

拖拽的属性

1. none：不能把拖动的元素放在这里。这是除了文本框之外所有元素默认的值。
2. move：把拖动的元素移动到放置目标。
3. copy：把拖动的元素复制到放置目标。
4. link：放置目标会打开拖动的元素(但拖动的元素必须是个链接URL地址)。

8、Web Worker

什么是web work

当在 HTML 页面中执行脚本时，页面的状态是不可响应的，直到脚本已完成。web worker 是运行在后台的 JavaScript，独立于其他脚本，不会影响页面的性能。您可以继续做任何愿意做的事情：点击、选取内容等等，而此时 web worker 在后台运行。

优点

为js创建多线程环境。js在主线程执行，new一个子线程在后台执行。worker完成计算的任务返回给主线程，UI交互流畅，不会被阻塞。主线程中的代码执行会导致浏览器响应阻塞，而子线程代码执行不会。主线程和子线程两者互补干扰，独立执行。

9、Web Storage

什么是web storage

Web 存储更加的安全与快速，这些数据不会被保存在服务器上，但是这些数据只用于用户请求网站数据上，它也可以存储大量的数据，而不影响网站的性能。数据以键/值对存在, web网页的数据只允许该网页访问使用。

localStorage和sessionStorage的区别

• 相同点

（1）数据都保存在浏览器客户端。
（2）同源，即同域名，同端口，同协议。
（3）操作方法相同。

• 不同点

（1）生命周期不同。localStorage是永久保存，除非用户手动清除数据。sessionStorage是临时保存（存在于进入页面浏览至关闭浏览器的时间）。

（2）作用域不同。浏览器有很多种，所以无法共享用户数据，也就是不同源的页面无法共享数据。

localStorage信息可以在相同浏览器中同源的不同页面，不同标签，不同窗口中共用。sessionStorage不可以在不同页面，不同标签，不同窗口中共用，即使是同源。

用法

存储

// 第一种方式，标准方法
sessionStorage.setItem('email','[email protected]');
// 第二种方式，直接当成普通对象属性赋值。
sessionStorage.blog = 'http://xxxxxx';

获取

// 1. 标准方法
var email = sessionStorage.getItem('email');
// 2. 直接取属性值
var blog = sessionStorage.blog;

移除键值对

// 移除之后，再获取值，将会得到 undefined
// 根据key，移除键值对
sessionStorage.removeItem('email');

清空sessionStorage

// 全部清除
sessionStorage.clear();

localStorage与sessionStorage用法类似，就不过多赘述。

10、WebSocket

概念

WebSocket是HTML5开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。在WebSocket API中，浏览器和服务器只需要做一个握手的动作，然后，浏览器和服务器之间就形成了一条快速通道。两者之间就直接可以数据互相传送。浏览器通过 JavaScript 向服务器发出建立 WebSocket 连接的请求，连接建立以后，客户端和服务器端就可以通过 TCP 连接直接交换数据。当你获取 Web Socket 连接后，你可以通过 send() 方法来向服务器发送数据，并通过 onmessage 事件来接收服务器返回的数据。

相较于传统短轮询和长轮询的优点

• 较少的控制开销：在连接创建后，服务器和客户端之间交换数据时，用于协议控制的数据包头部相对较小；
• 更强的实时性：由于协议是全双工的，所以服务器可以随时主动给客户端下发数据。相对于 HTTP 请求需要等待客户端发起请求服务端才能响应，延迟明显更少；
• 保持连接状态：与 HTTP 不同的是，WebSocket 需要先创建连接，这就使得其成为一种有状态的协议，之后通信时可以省略部分状态信息；
• 更好的二进制支持：WebSocket 定义了二进制帧，相对 HTTP，可以更轻松地处理二进制内容；
• 可以支持扩展：WebSocket 定义了扩展，用户可以扩展协议、实现部分自定义的子协议。