小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。
1、语义化标签
html5语义标签，可以使开发者更方便清晰构建页面的布局
| 标签 | 描述 |
|---|---|
<header> | 定义了文档的头部区域 |
<footer> | 定义了文档的尾部区域 |
<nav> | 定义文档的导航 |
<section> | 定义文档中的节 |
<article> | 定义文章 |
<aside> | 定义页面以外的内容 |
<details> | 定义用户可以看到或者隐藏的额外细节 |
<summary> | 标签包含details元素的标题 |
<dialog> | 定义对话框 |
<figure> | 定义自包含内容，如图表 |
<main> | 定义文档主内容 |
<mark> | 定义文档的主内容 |
<time> | 定义日期/时间 |
2、Canvas绘图
<canvas> 是 HTML5 新增的，一个可以使用脚本(通常为 JavaScript) 在其中绘制图像的 HTML 元素。它可以用来制作照片集或者制作简单(也不是那么简单)的动画，甚至可以进行实时视频处理和渲染。
3、## SVG
SVG是html5的另一项图形功能，它是一种标准的矢量图形，是一种文件格式，有自己的API。html5引入了内联SVG，使得SVG元素可以直接出现在html标记中。
<svg height=100 width=100><circle cx=50 cy=50 r=50 /></svg>
4、音频和视频
audio和video元素的出现让html5的媒体应用多了新选择，开发人员不必使用插件就能播放音频和视频。对于这两个元素，html5规范提供了通用、完整、可脚本化控制的API。 html5规范出来之前，在页面中播放视频的典型方式是使用Flash、QuickTime或者Windows Media插件往html中嵌入音频视频，相对这种方式，使用html5的媒体标签有两大好处。
- 作为浏览器原生支持的功能，新的audio和video元素无需安装。
- 媒体元素想Web页面提供了通用、集成和可脚本化控制的API。
<video src="video.webm" controls>
<object data="videoplayer.swf" type="application/x-shockwave-flash">
<param name="movie" value="video.swf" />
</object>
Your browser does not support HTML5 video.
</video>
5、浏览器支持性检测
浏览器检测是否支持audio元素或者video元素最简单的方式是用脚本动态创建它，然后检测特定函数是否存在。
var hasVideo = !!(document.createElement('video').canPlayType);
6、Geolocation API
html5的Geolocation API（地理定位API），可以请求用户共享他们的位置。使用方法非常简单，如果用户同意，浏览器就会返回位置信息，该位置信息是通过支持html5地理定位功能的底层设备（如笔记本电脑或手机）提供给浏览器的。位置信息由纬度、经度坐标和一些其他元数据组成。
位置信息从何而来
Geolocation API不指定设备使用哪种底层技术来定位应用程序的用户。相反，它只是用于检索位置信息的API，而且通过该API检索到的数据只具有某种程度的准确性，并不能保证设备返回的位置是精确的。设备可以使用下列数据源：
- IP地址
- 三维坐标
-
- GPS
- 从RFID、WiFi和蓝牙到WiFi的MAC地址
- GSM或CDMA手机的ID
\
- 用户自定义数据
使用方法
// 一次更新
navigator.geolocation.getCurrentPosition(updateLocation, handleLocationEror);
function updateLocation(position) {
var latitude = position.coords.latitude; // 纬度
var longitude = position.coords.longitude; // 经度
var accuracy = position.coords.accuracy; // 准确度
var timestamp = position.coords.timestamp; // 时间戳
}
// 错误处理函数
function handleLocationEror(error) {
....
}
// 重复更新
navigator.geolocation.watchPosition(updateLocation, handleLocationEror);
// 不再接受位置更新
navigator.geolocation.clearWatch(watchId);
7、Forms API
新表单元素
- tel元素，表示电话号码。
- email元素，表示电子邮件地址文本框。
- url元素，表示网页的url。
- search元素，用于搜索引擎，比如在站点顶部显示的搜索框。
- range元素，特定值范围内的数值选择器，典型的显示方式是滑动条。
- number元素，只包含数值的字段。
未来的表单元素
- color元素，颜色选择器，基于调色盘或者取色板进行选择。
- datetime元素，显示完整的日期和时间，包括时区。
- datetime-local，显示日期和时间。
- time元素，不含时区的时间选择器和指示器。
- date元素，日期选择器。
- week元素，某年中的周选择器。
- month元素，某年中的月选择器。
新的表单特性和函数
placeholder
当用户还没输入值的时候，输入型控件可以通过placeholder特性向用户显示描述性说明或者提示信息。
<input name="name" placeholder="First and last name">
autocomplete
浏览器通过autocomplete特性能够知晓是否应该保存输入值以备将来使用。
autofocus
通过autofocus特性可以指定某个表单元素获得输入焦点，每个页面上只允许出现一个autofocus特性，如果设置了多个，则相当于未指定此行为。
spellcheck
可对带有文本内容的输入控件和textarea空间控制spellcheck属性。设置完后，会询问浏览器是否应该给出拼写检查结果反馈。spellcheck属性需要赋值。
list特性和datalist元素
通过组合使用list特性和datalist元素，开发人员能够为某个输入型控件构造一张选值列表。
<datalist id="contactList">
<option value="a@qq.com"></option>
<option value="b@qq.com"></option>
</datalist>
<input type="email" id="contatcs" list="contactList">
min和max
通过设置min和max特性，可以将range输入框的数值输入范围限定在最低值和最高值之间。可以只设置一个，也可以两个都设置，也可以都不设置。
step
对于输入型控件，设置其step特性能够指定输入值递增或者递减的粒度。
required
一旦为某输入型控件设置了required特性，那么此项必填，否则无法提交表单。
8、Web Storage API
Web Storage是html5引入的一个非常重要的功能，可以在客户端本地存储数据，类似html4的cookie，但可实现功能要比cookie强大的多。
sessionStorage
sessionStorage将数据保存在session中，浏览器关闭数据就消失。
localStorage
localStorage则一直将数据保存在客户端本地，除非手动删除，否则一直保存。 不管是sessionStorage，还是localStorage，可使用的API相同，常用的有如下几个（以localStorage为例）：
- 保存数据：localStorage.setItem(key,value);
- 读取数据：localStorage.getItem(key);
- 删除单个数据：localStorage.removeItem(key);
- 删除所有数据：localStorage.clear();
- 得到某个索引的key：localStorage.key(index);
