第一章 HTML5简介
HTML5 是 HTML 标准的最新演进版本。这个术语代表了两个不同的概念：第一、它是一个新的 HTML 语言版本包含了新的元素，属性和行为，第二、它包含了一系列可以被用来让 Web 站点和应用更加多样化，功能更强大的技术。专为移动设备而生！！！
第二章 HTML5新语义
2.1 新节点和外观
2.1.1 section
与div的无语义相对，简单地说section就是带有语义的div，section表示一段专题性的内容，一般会带有标题。section应用的典型场景有：文章的章节、标签对话框中的标签页、或者论文中有编号的部分。section不仅仅是一个普通的容器标签。当一个标签只是为了样式或者方便脚本使用时，应该使用div。一般来说，当元素内容明确地出现在文档大纲中时，section就是适用的。
2.1.2. article
article是一个特殊的section标签，它比section具有更明确的语义, 它代表一个独立的、完整的相关内容块。一般来说，article会有标题部分(通常包含在header内)，有时也会包含footer 。虽然section也是带有主题性的一块内容，但是无论从结构上还是内容上来说，article本身就是独立的、完整的。
div, section, article，语义是从无到有，逐渐增强的。div无任何语义，仅仅用作样式化或者脚本化使用，对于一段主题性的内容，则就适用section，而假如这段内容可以脱离上下文，作为完整的独立存在的一段内容，则就适用article。
2.1.3. header
<header>元素表示一组引导性的帮助，可能包含标题元素，也可以包含其他元素，像logo、分节头部、搜索表单等。
2.1.4. footer
<footer>标签定义文档或节的页脚。<footer>元素应当含有其包含元素的信息。页脚通常包含文档的作者、版权信息、使用条款链接、联系信息等等。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>html示例</title>
<link rel="stylesheet" href="css/bootstrap.min.css" />
</head>
<body>
<article>
<header>
<h1>The Very First Rule of Life</h1>
<p><time pubdate datetime="2009-10-09T14:28-08:00"></time></p>
</header>
<p>If there's a microphone anywhere near you, assume it's hot and sending whatever you're saying to the world. Seriously.</p>
<p>...</p>
<footer>
<a href="?comments=1">Show comments...</a>
</footer>
</article>
<article>
<header>
<h1>The Very First Rule of Life</h1>
<p><time pubdate datetime="2009-10-09T14:28-08:00"></time></p>
</header>
<p>If there's a microphone anywhere near you, assume it's hot and sending whatever you're saying to the world. Seriously.</p>
<p>...</p>
<section>
<h1>Comments</h1>
<article>
<footer>
<p>Posted by: George Washington</p>
<p><time pubdate datetime="2009-10-10T19:10-08:00"></time></p>
</footer>
<p>Yeah! Especially when talking about your lobbyist friends!</p>
</article>
<article>
<footer>
<p>Posted by: George Hammond</p>
<p><time pubdate datetime="2009-10-10T19:15-08:00"></time></p>
</footer>
<p>Hey, you have the same first name as me.</p>
</article>
</section>
</article>
</body>
</html>
2.1.5. nav
HTML导航栏<nav>描绘一个含有多个超链接的区域，这个区域包含转到其他页面，或者页面内部其他部分的链接列表，一般用于描述页面菜单。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>html示例</title>
<link rel="stylesheet" href="css/bootstrap.min.css" />
</head>
<body>
<div>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</div>
</body>
</html>
2.1.6. aside
<aside>元素中连接到页面中其他部分的内容，被认为是独立于该内容的一部分并且可以被单独的拆分出来而不会使整体受影响。其通常表现为侧边栏或者被插入在该内容里。他们通常包含在工具条，例如来自词汇表的定义。也可能有其他类型的信息，例如相关的广告、笔者的传记、web 应用程序、个人资料信息，或在博客上的相关链接。
2.1.7. address
<address>元素用来表示地址信息。
2.2 音频和视频
2.2.1 audio
HTML5的<audio>元素用于在文档中表示音频内容。<audio>元素可以包含多个音频资源， 这些音频资源可以使用src属性或者<source>元素来进行描述。 浏览器将会选择最合适的一个来使用。对于不支持<audio>元素的浏览器，<audio>元素也可以作为浏览器不识别的内容加入到文档中。
常用属性列表：
| 属性 | 说明 |
|---|---|
| autoplay | 布尔属性；指定后，音频会马上自动开始播放，不会停下来等着数据载入结束。 |
| controls | 如果设置了该属性，浏览器将提供一个包含声音，播放进度，播放暂停的控制面板，让用户可以控制音频的播放。 |
| loop | 布尔属性；如果指定，将循环播放音频。 |
| preload | 如果出现该属性，则音频在页面加载时进行加载，并预备播放。如果使用 "autoplay"，则忽略该属性。 |
| src | 嵌入的音频的URL。 |
2.2.2. video
HTML5规定了一种通过video元素来包含视频的标准方法。<video>元素提供了播放、暂停和音量控件来控制视频。同时<video>元素元素也提供width和height属性控制视频的尺寸。如果设置的高度和宽度，所需的视频空间会在页面加载时保留。如果没有设置这些属性，浏览器不知道大小的视频，浏览器就不能在加载时保留特定的空间，页面就会根据原始视频的大小而改变。<video>元素支持多个<source>元素。<source>元素可以链接不同的视频文件。浏览器将使用第一个可识别的格式。
<video>与</video>标签之间插入的内容是提供给不支持video元素的浏览器显示的。
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
您的浏览器不支持Video标签。
</video>
支持的视频格式：
| 格式 | MIME-type |
|---|---|
| MP4 | video/mp4 |
| WebM | video/webm |
| Ogg | video/ogg |
常用事件列表：
| 事件 | 说明 |
|---|---|
| pause | 暂停播放 |
| play | 开始播放 |
2.3 新表单
| 表单 | 示例 |
|---|---|
| 颜色 | <input type="color" /> |
| 日期 | <input type="date" /> |
| 日期+时间 | <input type="datetime-local" /> |
| 邮件 | <input type="email" /> |
| 月份 | <input type="month" /> |
| 数字 | <input type="number" min="1" max="5"> |
| 搜索框 | <input type="search"> |
| 电话号码 | <input type="tel"> |
| 时间 | <input type="time"> |
| url地址 | <input type="url"> |
| 周 | <input type="week"> |
第三章 HTML5 Web存储
使用HTML5可以在本地存储用户的浏览数据。早些时候，本地存储使用的是cookies。但是Web存储需要更加的安全与快速。这些数据不会被保存在服务器上，但是这些数据只用于用户请求网站数据上。它也可以存储大量的数据，而不影响网站的性能。数据以键值对存在的方式进行存储。web网页的数据只允许该网页访问使用。
3.1. localStorage
localStorage提供了没有时间限制的存储（除非主动删除）。
3.1.1. 存储数据
使用localStorage.setItem("key","value")方法存储数据。
if(window.localStorage){
var userInfo = {
userId: 10001,
userName: "Johnny",
role: "admin"
};
localStorage.setItem("userInfo",JSON.stringify(userInfo));
}
3.1.2. 获取数据
使用localStorage.getItem("key","value")方法存储数据。
var content = localStorage.setItem("userInfo");
3.1.3. 移除数据
使用localStorage.removeItem("key")方法移除数据。
localStorage.removeItem("userInfo");
3.1.4. 清空数据
使用localStorage.clear()方法清空数据。
localStorage.clear();
localStorage与cookie取得区别如下：
- cookie大小限制在4k左右，不适合存业务数据
- cookie每次随HTTP事务一起发送，浪费带宽
- localstorage大小限制在500万字符左右，各个浏览器不一致
- localstorage本质是在读写文件，数据多的话会比较卡
- localstorage不能被爬虫爬取，不要用它完全取代URL传参
3.1.5. 属性遍历
var storage = window.localStorage;
for (var i=0; i < storage.length; i++){
var key = storage.key(i);
var value = storage.getItem(key);
}
3.2. sessionStorage
sessionStorage 有时间限制的存储（用户关闭浏览器窗口后，数据会被删除）。
3.2.1. 存储数据
使用sessionStorage.setItem("key","value")方法存储数据。
if(window.sessionStorage){
var userInfo = {
userId: 10001,
userName: "Johnny",
role: "admin"
};
sessionStorage.setItem("userInfo",JSON.stringify(userInfo));
}
3.2.2. 获取数据
使用sessionStorage.getItem("key","value")方法存储数据。
var content = sessionStorage.setItem("userInfo");
3.2.3. 移除数据
使用sessionStorage.removeItem("key")方法移除数据。
sessionStorage.removeItem("userInfo");
3.2.4. 清空数据
使用sessionStorage.clear()方法清空数据。
sessionStorage.clear();
3.2.5. 属性遍历
var storage = window.sessionStorage;
for (var i=0; i < storage.length; i++){
var key = storage.key(i);
var value = storage.getItem(key);
}
第四章 HTML5未来发展的六大趋势
HTML 5从根本上改变了开发商开发Web应用的方式，从桌面浏览器到移动应用，这种语言和标准都正在影响并将继续影响着各种操作平台。
在移动领域，大家争论不休的一个问题就是开发Web应用还是原生应用？而随着HTML 5标准的发展，两者之间的差异已经逐渐变得模糊，今天各大媒体都争相报道与HTML 5有关的东西，那么，HTML 5未来的发展趋势到底是什么？
4.1. 移动优先
从如今层出不穷的移动应用就知道，在这个智能手机和将平板电脑大爆炸的时代，移动优先已成趋势，不管是开发什么，都以移动为主。
如上文所说，此前一直困扰移动领域的问题就是开发Web应用还是原生应用。而如今，我们看见一些大型企业如《金融时报》在冲着HTM L5进军移动市场过程中，从App Store撤掉iPad原生应用而开发Web应用，同样表现出色。
许多游戏开发商也将在移动Web应用中扮演中重要角色，移动Web应用优先的趋势将会持续到移动设备统治信息处理领域。其实用户根本不在乎你用什么工具开发了什么应用，不管是Web应用还是原生应用，只要好用就可以了。
4.2. 游戏开发
其实移动游戏开发商是从HTML5获益最多的一方，他们可利用这个平台逃脱付费游戏须向苹果支付的30%提成。在某种程度上，游戏就是移动平台销量最好的应用，也是吸引人们购买移动设备的一个重要因素。
许多游戏开发商都被Facebook或者Zynga推动着发展，而未来的Facebook应用生态系统是基于HTML5的，尽管在HTML 5平台开发出游戏非常困难，但游戏开发商却都愿意那么做。通过PhoneGap及appmobi的XDK将Web应用游戏打包整合到原生应用中也是一种方式，Facebook差不多就这么干的——基于Web应用及浏览器，但却将之打包整合进原生应用。
4.3. 响应式设计
在HTML 5真的改变移动开发平台之前，必须要迈出重要一步，那就是“响应式设计”，也就是屏幕可以根据内容而自动调整大小。
响应式设计最好的一个例子就是今年上线的BostonGlobe.com（观看视频），其屏幕能够根据任何内容而调整尺寸大小，在访问过其开发商Filament Group后才了解到，响应式设计也并非易事，一些基本概念设计必须从头开始，比如处理媒体库的RespondJS，而且处理来自第三方的图片和广告也是恼人的问题。
要想做好响应式设计，就必须洞悉内容与屏幕之间的反馈关系，一家来自硅谷的响应式设计公司ZURB称，其实在过去的16年中，开发商就意识到响应式设计就要完全离开“流”，转而注重内容是如何在网页和移动设备中被处理的，这一过程还在继续，HTML 5会让它最终成为可能。
4.4. 设备访问
消除Web应用与原生应用界限的最大障碍就是浏览器访问移动设备基本特性的能力，比如照相机，通讯录，日历，加速器等，利用HTML5实现此能力方面，上文中提到的app Mobile算是行业翘楚，在感恩节后开源了所有API。Mozilla也一直在努力通过移动浏览器Fennec来将强设备访问能力。
对许多移动开发商来说，提高设备访问能力是HTML5最令人激动的革新，这意味着Web应用能够登陆移动设备而无需做任何PhoneGap式打包，游戏开发商当然最开心，因为某些特性对他们来说是封锁的，比如能整合到游戏中的加速器。
这就开启了另一个可能的世界，比如能与云更好地整合（这有利于应用内购买，消息推送等）并提高游戏可玩性，有了HTML5这个平台，开发商可以不再依赖于Java语言，CSS3，HTML及其它程序语言。
4.5. 离线缓存
这个概念相当新潮，离线情况下，app也能照常运作，算是HTML5充满魔力的一面，今年最好的离线缓存例子就是亚马逊Kindle的云阅读器，可以通过Firefox6以上版本，Chrome11以上版本，Safari5以上版本及iOS4以上版本浏览器将内容同步到所有Kindle系列设备，并能记忆用户在kindle图书馆的一切。
亚马逊就这么实现了离线使用Web应用，许多专家人声称原生应用的末日即将到来，因为Web应用的使用变得简单，无摩擦，适用于任何一个平台或者无需平台。
当然Mozilla的触角也伸到了这里，实际上，Mozilla想涉足任何一个HTML 5能渗透的领域，从Mozilla的移动蓝图，可以了解更多。
4.6. 开发工具的成熟
HBuilder是DCloud推出的一款支持HTML5的Web开发IDE。快，是HBuilder的最大优势，通过完整的语法提示和代码输入法、代码块等，大幅提升HTML、js、css的开发效率。同时，它还包括最全面的语法库和浏览器兼容性数据。
