细数HTML5新特性

HTML5作为HTML最新的版本，已是于2014年完成标准指定。其最初的设计目的本来是为运行在移动设备上，而今在前端面试题中也层出不穷，下面将把HTML5揉碎，一点一点细数它的新特性。

语义标签

HTML5中的语义化标签可使页面的内容结构化，加强了通读性，也有利于开发人员的阅读，例如下面代码

1
2
3
4

```
<hrader></header>  //定义了文档的头部区域
<footer></footer>  //定义了文档的尾部区域
```

增强型表单

HTML5中增加了表单中Input的输入类型，开放了相关的输入控制。

视频和音频

HTML5提供了播放音频和视频文件的标准

1
2
3
4
5
6
7
8

<audio controls>
  <source src="horse.ogg" type="audio/ogg">
  <source src="horse.mp3" type="audio/mpeg">
</audio>
<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
</video>

Canvas绘图

HTML5中，canvas作为标签容器，而绘图交由JavaScript完成。

1. 首先，创建画布，并可在画布中定义些样式

1

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;"></canvas>

2. 使用Javascript来绘制图像

1
2
3
4
5

var c=document.getElementById("myCanvas"); //首先，找到 <canvas> 元素
var ctx=c.getContext("2d"); 
//创建 context 对象,getContext("2d") 对象是内建的 HTML5 对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法
ctx.fillStyle="#FF0000";
ctx.fillRect(0,0,150,75);

SVG绘图

SVG是指可伸缩的矢量图形，而SVG与Canvas两者的区别如下：

• Canvas 通过 JavaScript 来绘制 2D 图形，SVG 是一种使用 XML 描述 2D 图形的语言

地理定位

HTML5 Geolocation（地理定位）用于定位用户的位置。

1
2
3
4
5

window.navigator.geolocation {
    getCurrentPosition:  fn  用于获取当前的位置数据
    watchPosition: fn  监视用户位置的改变
    clearWatch: fn  清除定位监视
}　　　

拖放API

拖放，即抓取对象以后拖到另一个位置。

拖放的源对象可触发的事件：

• dragstart：拖动开始
• drag：拖动中
• dragend：拖动结束

拖放的目标对象可触发的事件：

• dragenter：拖动着进入
• dragover：拖动着悬停
• dragleave：拖动着离开
• drop：释放

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

draggable="true" //首先在源对象上元素为可拖放
function allowDrop(ev)
{
	ev.preventDefault(); //无法将数据/元素放置到其他元素中，如果需要设置允许放置，我们必须阻止对元素的默认处理方式。
}

function drag(ev)
{
	ev.dataTransfer.setData("Text",ev.target.id); //规定被拖动的数据
}

function drop(ev)
{
	ev.preventDefault();
	var data=ev.dataTransfer.getData("Text");
	ev.target.appendChild(document.getElementById(data));
}

WebWorker

当在 HTML 页面中执行脚本时，页面的状态是不可响应的，直到脚本已完成（单线程）。

Web Worker 的作用，就是为 JavaScript 创造多线程环境，允许主线程创建 Worker 线程，将一些任务分配给后者运行。在主线程运行的同时，Worker 线程在后台运行，两者互不干扰。等到 Worker 线程完成计算任务，再把结果返回给主线程。

Web Worker 有以下几个使用注意点：

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

使用详情

主线程

1
2
3
4
5
6
7
8
9
10
11

var worker = new Worker('work.js'); //新建一个 Worker 线程
worker.onmessage = function (event) {
  console.log('Received message ' + event.data);
  doSomething();
}

function doSomething() {
  // 执行任务
  worker.postMessage('Work done!');
}
worker.terminate(); //关闭Worker线程

Worker线程

1
2
3
4
5

self.addEventListener('message', function (e) {
  self.postMessage('You said: ' + e.data);
}, false);
importScripts('script1.js', 'script2.js');  // Worker 加载脚本
self.close(); //关闭Worker线程

WebStorage

客户端存储数据的两个对象为：

• localStorage：没有时间限制的数据存储
• sessionStorage：针对一个 session 的数据存储, 当用户关闭浏览器窗口后，数据会被删除。

WebSocket

…