什么是 HTML5？
HTML5 是下一代的 HTML， 将成为 HTML、XHTML 以及 HTML DOM 的新标准。(w3school定义)
HTML5 是HTML 的最新稳定版本, HTML5 将 HTML 从用于构造一个文档的一个简单标记，到一个完整的应用程序开发平台。除其他功能外, HTML5 还包括新元素和用于增强存储、多媒体和硬件访问的JavaScript APIs (MDN文档定义)
HTML5的十大新特性：
一、语义化标签
定义:语义化标签就是尽量使用有相对应含义的HTML的标签
优点:
（1）可维护性更高,因为结构清晰,易于阅读，便于开发人员的维护
（2）结构更好,更利于搜索引擎的抓取(SEO的优化)
常见的语义化标签有：
| 标签 | 描述 |
|---|---|
| <header> | 定义了文档的头部区域 |
| <footer> | 定义了文档的尾部区域 |
| <section> | 定义文档中的节、区段 |
| <article> | 定义页面独立的内容区域 |
| <aside> | 定义页面的侧边栏内容 |
| <nav> | 定义文档的导航 |
| <detailes> | 用于描述文档或文档某个部分的细节 |
| <summary> | 标签包含 details 元素的标题 |
二、增强型表单
- 新增输入类型
| 输入类型 | 描述 |
|---|---|
| 包含 e-mail 地址的输入域 | |
| search | 用于搜索域 |
| url | URL 地址的输入域 |
| date | 从一个日期选择器选择一个日期 |
| datetime | 选择一个日期（UTC 时间） |
| datetime-local | 选择一个日期和时间 (无时区) |
| month | 选择一个月份 |
| week | 选择周和年 |
| time | 选择一个时间 |
| color | 主要用于选取颜色 |
| number | 数值的输入域 |
| range | 一定范围内数字值的输入域 |
用法：<input type="email" name="user_email" />
- 新增表单元素
| 表单元素 | 描述 |
|---|---|
| <datalist> | 元素规定输入域的选项列表，使用 <input> 元素的 list 属性与<datalist> 元素的 id 绑定 |
| <keygen> | 提供一种验证用户的可靠方法标签规定用于表单的密钥对生成器字段。 |
| <output> | 用于不同类型的输出比如计算或脚本输出 |
用法：
<input type="url" list="url_list" name="link" />
<datalist id="url_list">
<option label="W3School" value="http://www.W3School.com.cn" />
<option label="Google" value="http://www.google.com" />
<option label="Microsoft" value="http://www.microsoft.com" />
</datalist>
- 新增表单属性
（1）placehoder 属性，简短的提示在用户输入值前会显示在输入域上。即我们常见的输入框默认提示，在用户输入后消失。
（2）required 属性，是一个 boolean 属性。要求填写的输入域不能为空
（3）pattern 属性，描述了一个正则表达式用于验证<input> 元素的值。
（4）min 和 max 属性，设置元素最小值与最大值。
（5）step 属性，为输入域规定合法的数字间隔。
（6）height 和 width 属性，用于 image 类型的<input> 标签的图像高度和宽度。
（7）autofocus 属性，是一个 boolean 属性。规定在页面加载时，域自动地获得焦点。
（8）multiple 属性 ，是一个 boolean 属性。规定<input> 元素中可选择多个值。
用法：<input type="text" name="user_name" autofocus="autofocus" />
三、 audio 和 video 元素
audio：播放音频文件的标准
<audio controls="controls">
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
您的浏览器不支持 audio <!--浏览器不支持时的提示文本-->
</audio>
注：
（1） controls 属性供添加播放、暂停和音量控件。
（2）在<audio> 与</audio> 之间你需要插入浏览器不支持的<audio>元素的提示文本
（3）<audio> 元素允许使用多个<source> 元素. <source> 元素可以链接不同的音频文件，浏览器将使用第一个支持的音频文件
（4） 目前, 元素支持三种音频格式文件: MP3, Wav, 和 Ogg
video：播放视频文件的标准
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
您的浏览器不支持Video标签 <!--浏览器不支持时的提示文本-->
</video>
注：
（1）control 提供了 播放、暂停和音量控件来控制视频。也可以使用dom操作来控制视频的播放暂停，如 play() 和 pause() 方法。
（2）width 和 height 属性控制视频的尺寸.如果设置的高度和宽度，所需的视频空间会在页面加载时保留。如果没有设置这些属性，浏览器不知道大小的视频，浏览器就不能再加载时保留特定的空间，页面就会根据原始视频的大小而改变。
（3）video 元素支持多个source 元素. 元素可以链接不同的视频文件。浏览器将使用第一个可识别的格式（ MP4, WebM, 和 Ogg）
四、canvas画布
HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。画布是一个矩形区域，您可以控制其每一像素。
（要掌握canvans技术，还需多花功夫去实践，这里就不过多介绍，附上一个动态时钟demo）
用canvas绘制动态时钟：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>clockdebug</title>
<style type="text/css">
div{text-align:center;margin-top:200px;}
#mycanvas{border: 0px solid #ccc;}
</style>
</head>
<body>
<div>
<canvas id="mycanvas" width="300" height="300"></canvas>
</div>
<script>
var canvas=document.getElementById("mycanvas");
var ctx=canvas.getContext("2d");
var width=ctx.canvas.width;
var height=ctx.canvas.height;
var r=width/2; //根据画布宽度定义时钟半径
var rem=width/200; //定义一个比例
function drawClockBg(){
ctx.save();
ctx.translate(r,r);
ctx.lineWidth=10*rem;
ctx.beginPath();
ctx.strokeStyle="black";
ctx.arc(0,0,r-ctx.lineWidth/2,0,2*Math.PI,false);
ctx.stroke();
//绘制12小时数
var hourNumbers=[3,4,5,6,7,8,9,10,11,12,1,2];
ctx.font=18*rem+"px Arial";
ctx.textAlign='center';
ctx.textBaseline='middle';
hourNumbers.forEach(function(number,i){
var rad=2*Math.PI/12*i;
var x=Math.cos(rad)*(r-30*rem);
var y=Math.sin(rad)*(r-30*rem);
ctx.fillText(number,x,y);
}
);
for(var i=0;i<60;i++){
var rad=2*Math.PI/60*i;
var x=Math.cos(rad)*(r-18*rem);
var y=Math.sin(rad)*(r-18*rem);
ctx.beginPath();
if(i%5==0){
ctx.fillStyle="#000";
ctx.arc(x,y,2*rem,0,2*Math.PI,false);
}else{
ctx.fillStyle="#ccc";
ctx.arc(x,y,2*rem,0,2*Math.PI,false);
}
ctx.fill();
}
}
function drawHour(hour,minute){
ctx.save();
ctx.beginPath();
var rad=2*Math.PI/12*hour;
var mrad=2*Math.PI/12/60*minute;
ctx.rotate(rad+mrad);
ctx.lineWidth=6*rem;
ctx.lineCap='round';
ctx.moveTo(0,10*rem);
ctx.lineTo(0,-r/2);
ctx.stroke();
ctx.restore();
}
function drawMinute(minute){
ctx.save();
ctx.beginPath();
var rad=2*Math.PI/60*minute;
ctx.rotate(rad);
ctx.lineWidth=3*rem;
ctx.lineCap='round';
ctx.moveTo(0,10*rem);
ctx.lineTo(0,-r+30*rem);
ctx.stroke();
ctx.restore();
}
function drawSecond(second){
ctx.save();
ctx.beginPath();
ctx.fillStyle='#c14543'
var rad=2*Math.PI/60*second;
ctx.rotate(rad);
ctx.moveTo(-2*rem,20*rem);
ctx.lineTo(2*rem,20*rem);
ctx.lineTo(1,-r+18*rem);
ctx.lineTo(-1,-r+18*rem);
ctx.fill();
ctx.restore();
}
function drawDot(){
ctx.beginPath();
ctx.fillStyle='#fff';
ctx.arc(0,0,3*rem,0,2*Math.PI,false);
ctx.fill();
}
function clock(){
ctx.clearRect(0,0,width,height);
var now=new Date();
var hour=now.getHours();
var minute=now.getMinutes();
var second=now.getSeconds();
drawClockBg();
drawHour(hour,minute);
drawMinute(minute);
drawSecond(second);
drawDot();
ctx.restore();
}
//每秒执行一次函数
setInterval(clock,1000);
</script>
</body>
</html>
效果图，有兴趣的话可以跑一下，还是蛮有意思的。
五、svg矢量图
SVG 指可伸缩矢量图形
SVG 使用 XML 格式定义图形
SVG 图像在放大或改变尺寸的情况下其图形质量不会有损失
SVG图像响应迅速，易于搜索引擎优化，总是看起来清晰干净。 这使它们成为网页设计的重要资产。
（一般项目中使用SVG图可直接去相应的网站中下载对应图形的XML代码，不需要自己画）
实例：
<!DOCTYPE html>
<html>
<body>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="190">
<polygon points="100,10 40,180 190,60 10,60 160,180"
style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;" />
</svg>
</body>
</html>
效果图：
面试高频题：SVG 与 Canvas两者间的区别
（1）SVG 是一种使用 XML 描述 2D 图形的语言。
（2）Canvas 通过 JavaScript 来绘制 2D 图形。
（3）SVG 基于 XML，这意味着 SVG DOM 中的每个元素都是可用的。您可以为某个元素附加 JavaScript 事件处理器。
（4）在 SVG 中，每个被绘制的图形均被视为对象。如果 SVG 对象的属性发生变化，那么浏览器能够自动重现图形。
（5）Canvas 是逐像素进行渲染的。在 canvas 中，一旦图形被绘制完成，它就不会继续得到浏览器的关注。如果其位置发生变化，那么整个场景也需要重新绘制，包括任何或许已被图形覆盖的对象。
六、拖放API
拖放是一种常见的特性，即抓取对象以后拖到另一个位置。在 HTML5 中，拖放是标准的一部分，任何元素都能够拖放。
拖放的过程分为源对象和目标对象。源对象是指你即将拖动元素，而目标对象则是指拖动之后要放置的目标位置。
拖放的源对象(可能发生移动的)可以触发的事件——3个：
dragstart：拖动开始
drag：拖动中
dragend：拖动结束
拖放的目标对象(不会发生移动)可以触发的事件——4个：
dragenter：拖动着进入
dragover：拖动着悬停
dragleave：拖动着离开
drop：释放
（应用场景请参考w3school:w3school 拖放）
七、地理定位
HTML5 Geolocation API 用于获得用户的地理位置。
鉴于该特性可能侵犯用户的隐私，除非用户同意，否则用户位置信息是不可用的。
八、Web Storage
HTML5 提供了两种在客户端存储数据的新方法：
localStorage - 没有时间限制的数据存储
sessionStorage - 针对一个 session（会话） 的数据存储
之前，这些都是由 cookie 完成的。但是 cookie 不适合大量数据的存储，因为它们由每个对服务器的请求来传递，这使得 cookie 速度很慢而且效率也不高。
客户端储存特点：
（1）数据储存在用户浏览器中
（2）设置和读取方便，甚至页面刷新不丢失数据
（3）容量较大，sessionStorage 约5M，localStorage 约20M
（4）只能储存字符串，可以将对象JSON.stringify()编码后储存
localStorage 和 sessionStorage的联系和区别（面试高频题）：
sessionStorage
（1）生命周期为关闭浏览器窗口
（2）在同一个窗口（页面）下数据可以共享
（3）以键值对的形式存储使用
localStorage
（1）生命周期永久生效，除非手动删除。
（2）可以多窗口（页面）共享（同一浏览器)
（3）以键值对的形式存储使用
用法类似：
存：sessionStorage.setItem(‘key’,value)
取：sessionStorage.getItem(‘key’）
删：sessionStorage.removeItem(‘key’）
清空: sessionStorage.clear( ）
九、 Web Worker
web worker 是运行在后台的 JavaScript，独立于其他脚本，不会影响页面的性能。您可以继续做任何愿意做的事情：点击、选取内容等等，而此时 web worker 在后台运行。
十、WebSocket
WebSocket是HTML5开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。在WebSocket API中，浏览器和服务器只需要做一个握手的动作，然后，浏览器和服务器之间就形成了一条快速通道。两者之间就直接可以数据互相传送。浏览器通过 JavaScript 向服务器发出建立 WebSocket 连接的请求，连接建立以后，客户端和服务器端就可以通过 TCP 连接直接交换数据。当你获取 Web Socket 连接后，你可以通过 send() 方法来向服务器发送数据，并通过 onmessage 事件来接收服务器返回的数据。
参考文档：w3school在线教程
参考文章：HTML5的十大新特性
447
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
