性能&集成
web workers
Web Worker 是HTML5标准的一部分，这一规范定义了一套 API，它允许一段JavaScript程序运行在主线程之外的另外一个线程中。
一般情况下，当在 HTML 页面中执行脚本时，页面的状态是不可响应的，直到脚本已完成。
web worker 是运行在后台的 JavaScript，独立于其他脚本，不会影响页面的性能。您可以继续做任何愿意做的事情：点击、选取内容等等，而此时 web worker 在后台运行。
History API
window 对象通过history对象提供对浏览器历史记录的访问能力。它暴露了一些非常有用的方法和属性，让你在历史记录中自由前进和后退，而在HTML5中，更可以操纵历史记录中的数据。
概览
可以通过back()，forward()和go()方法在用户的历史记录中前进与后退。
要在历史记录中前进和后退，只需要这样做：
window.history.back()//后退window.history.forword()//前进12
而利用go（）方法，通过指定一个相对于当前页面位置的数值，可以从当前会话的历史记录中加载页面（当前页面索引值为0，上一页为-1，下一页为1）
window.history.go(-1)//后退一页，相当于back（）window.history.go(1) //向前移动一页（相当于调用forward()）12
你可以查看length属性值，了解历史记录栈中一共有多少页：
var numberOfEntries = window.history.length1
添加和修改历史记录条目
HTML5引进了history.pushState()方法和history.replaceState()方法，它们允许你逐条地添加和修改历史记录条目。这些方法可以协同window.onpopstate事件一起工作。
例子：
假设 hfoo.html 将执行如下JavaScript代码：
var stateObj = { foo: "bar" }
history.pushState(stateObj, "page 2", "bar.html")12
这将让浏览器的地址栏显示tml，但不会加载bar.html页面也不会检查bar.html是否存在。
假设现在用户导航到了com，然后点击了后退按钮，此时，地址栏将会显示har.html，并且页面会触发popstate事件，该事件中的状态对象（state object）包含stateObj的一个拷贝。该页面看起来像foo.html，尽管页面内容可能在popstate事件中被修改。
如果我们再次点击后退按钮，URL将变回hoo.html，文档将触发另一个popstate事件，这次的状态对象为null。回退同样不会改变文档内容。
pushState（）方法
此方法有三个参数：
状态对象（state object）：一个js对象，与用pushState()方法创建的新历史记录条目关联。
标题（title）：FireFox浏览器目前会忽略该参数，虽然以后可能会用上。考虑到未来可能会对该方法进行修改，传一个空字符串会比较安全。或者，你也可以传入一个简短的标题，标明将要进入的状态。
地址（URL）：新的历史记录条目的地址。
浏览器不会在调用pushState()方法后加载该地址，但之后，可能会试图加载，例如用户重启浏览器。
新的URL不一定是绝对路径；如果是相对路径，它将以当前URL为基准；
传入的URL与当前URL应该是同源的，否则，pushState()会抛出异常。
该参数是可选的；不指定的话则为文档当前URL。
replaceState（）方法
history.replaceState()操作类似于history.pushState()，不同之处在于replaceState()方法会修改当前历史记录条目而并非创建新的条目。
popstate事件
每当激活的历史记录发生变化时，都会触发popstate事件。如果被激活的历史记录条目是由pushState所创建，或是被replaceState方法影响到的，popstate事件的状态属性将包含历史记录的状态对象的一个拷贝。
contenteditable属性
在HTML5中,通过设置contenteditable属性，任何元素都是可编辑的.，可以瞬间把你的网站变成wiki！
<!DOCTYPE html><html><body>
<div contenteditable="true">
This text can be edited by the user. </div>
</body></html>12345678
拖放
HTML5 的拖放 API 能够支持在网站内部和网站之间拖放项目。同时也提供了一个更简单的供扩展和基于 Mozilla 的应用程序使用的 API。
拖放会触发一系列拖放事件：dragstart、dragenter、dragover、dragleave等。
焦点管理
支持新的 HTML5 activeElement 属性和 hasFocus 方法。
activeElement
document.activeElement：返回当前页面中获得焦点的元素，只读。
很多情况下,该属性会返回一个<input>或者<textarea>元素,于此同时,如果用户在文本输入框中选中了一些文本,还可以使用该元素的selectionStart和selectionEnd属性获得准确的选中文本内容.
该属性的值还可能是一个<select>元素(下拉菜单)或者type属性为button,checkbox或radio的<input>元素.
通常,用户可以通过Tab键来在页面中可以获得焦点的那些元素中切换,然后按下空格键激活这个元素
如果没有某个元素获得焦点,则该属性的值为当前页面中的<body>元素.
截至目前只有firefox3.6支持。
hasFocus（）
document.hasFocus() 方法返回一个 Boolean，表明当前文档或者当前文档内的节点是否获得了焦点。
设备访问
使用camera API
可以参考什么是HTML5（二）中相关部分。
触摸事件
略
使用地理位置定位
地理位置 API 允许用户向 Web 应用程序提供他们的位置。出于隐私考虑，报告地理位置前会先请求用户许可。
地理位置 API 通过 navigator.geolocation 提供。
获取当前定位
可以调用 getCurrentPosition() 函数获取用户当前定位位置。
这会异步地请求获取用户位置，并查询定位硬件来获取最新信息。当定位被确定后，定义的回调函数就会被执行。
navigator.geolocation.getCurrentPosition(function(position) {do_something(position.coords.latitude, position.coords.longitude)})123
检测设备方向
越来越多支持web功能的设备拥有检测自身方向的能力了；也就是说，这些设备可以记录下其受地心引力作用下而在方向上产生变化的数据。
有两种js事件负责处理方向信息。
DeviceOrientationEvent：会在加速度传感器检测到设备在方向上发生变化时触发。
DeviceMotionEvent：会在加速度发生改变时触发。
下面例子通过document.getElementsByClassName("class1")获取所有同一class的元素，使用for循环把取得的div元素的值存入数组arr中，完成的代码如下：
运行结果，打印数组如下：
扩展资料：
js或jQuery获取html元素的值的常用方法：
例如：<div id="aa">值</div>
js写法：
alert(document.getElementById('aa').innerHTML)
jQuery写法：
alert($('#aa').html())
说明如下：
innerHTML是取元素的内部html代码，此例中即div内部的所有html代码。
html()方法作用也是取dom节点的内部html内容，是jQuery中的函数方法。
用js循环加载是最佳的办法，如果你不懂，没关系，我写个demo，你跟着学，就算看不会，直接在对象上面填数据即可。
首先我们为了便于筛选给ul加个id ul1 这个实际使用中你根据自身要求重命名即可
<ul id="ul1"></ul>然后我们提取一下需要的变量用来组织数据对象，可以看到li标签里面有id【你id都是mk1，这在实际使用中是不科学的，id应该具有唯一性】，li下面的a标签有href，target。li下面的ims有src。把第一个li的这些属性提取出来，我们得到下面的对象
var data = {id: 'mk1',
href: 'mm33.html',
target: '_blank',
src: '1F.jpg'
}
请记住，这样一个对象针对的是一条li，你有N多条，需要一个数组对象，
var dataArr = [{id: 'mk1', href: 'mm33.html', target: '_blank', src: '1F.jpg'},
{id: 'mk2', href: '#', target: '', src: 'gh4.jpg'},
{id: 'mk3', href: '#', target: '', src: '1F.jpg'}
]
这里我的测试数据只帮你写3条，你实际使用中按这个格式扩展即可。
有了对象，然后写js，请把下面这段代码复制到ul1之后
<script>var dataArr = [
{id: 'mk1', href: 'mm33.html', target: '_blank', src: '1F.jpg'},
{id: 'mk2', href: '#', target: '', src: 'gh4.jpg'},
{id: 'mk3', href: '#', target: '', src: '1F.jpg'}
]
var html = ""
for(var i = 0 i < dataArr.length i++){
html += '<li id="'+ dataArr[i].id +'"><a href="'+ dataArr[i].href +'" target="'+ dataArr[i].target +'"><img src="'+ dataArr[i].src +'" width="250" height="300" alt=""></a></li>'
}
var ul = document.getElementById("ul1") //此处ul1是ul的ID，如果ID改了这里要跟着改
ul.innerHTML = html
</script>
打开运行，可以发现 ul下面已经根据dataArr里面的对象生成相应数量的li，并赋予属性了
