设计原理
不是规范里都包含什么，而是规范里为什么会包含它们，以及在设计这个规范的时候，设计者们是怎么看待这些东西的。
发展史：HTML2.0——》HTML3.2——》HTML4.0.1——》XHTML1.0——》XHTML1.1和XHTML2.0的失败——》HTML5
原理：
（1）避免不必要的复杂性
HTML 4.01的doctype：
<!DOCTYPE html PUBLIC "-//W3C/DTD HTML 4.01//EN""http://www.w3.org/TR/html4/strict.dtd">
XHTML 1.0的doctype：
<!DOCTYPE html PUBLIC "-//W3C/DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
HTML 5中doctype就简化成：
<!DOCTYPE html>
什么文档一开头就要写doctype？它不是写给浏览器看的。Doctype是写给验证器看的。也就是说，我之所以要在文档一开头写那行XHTML 1.0的doctype，是为了告诉验证器，让验证器按照该doctype来验证我的文档。浏览器在接收的时候必须要开放。因此，它不会检查任何格式类型，而验证器会，验证器才关心格式类型。HTML5的另一个设计原理，它必须向前向后兼容，兼容未来的HTML版本——不管是HTML6、HTML7，还是其他什么——都要与当前的HTML版本，HTML5，兼容。因此，把一个版本号放在doctype里面没有多大的意义，即使对验器证也一样。
注：当初微软在引入CSS的时候，走在了标准的前头，他们率先在浏览器中支持CSS，也推出了自己的盒模型——后来标准发布了，但标准中使用了不一样的盒模型。他们想出了一个非常巧妙的主意。那就是利用doctype，利用有效的doctype来触发标准模式，而不是兼容模型（quiks mode）。在我们向文档中加入doctype时，就相当于声明了“我想使用标准模式”，但这并不是发明doctype的本意。这只是为了达到特殊的目的在利用doctype。
在文档前面写完doctype html是在Internet Explorer中触发标准模式的最少字符数目。
还有一个例子，同样可以说明规范是如何省略不必要的复杂性，避免不必要的复杂性的。如果前面的文档使用的是HTML 4.01：
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
在XHTML 1.0指定同样的编码，就得多敲一下键盘，因为你还得声明meta元素位于一个开始的XML标签中：
<?xml version="1.0" encoding="UTF-8" ?><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
在HTML5中，你要敲的字符只有：
<meta charset="utf-8">
在HTML5中，如果我使用link元素链接到一个样式表，用rel=”stylesheet”，不用再说type=”text/css”。用了script元素，不用再说type=”text/javascript”，浏览器自然会假设你在使用JavaScript。避免-不必要的-复杂性。
（2）支持已有的内容
元素属性可以不区分大小写，属性值可以不加引号
(3) 解决现实的问题
页面中已经有了一块内容，我想给整块内容加个链接，怎么办？
<h2><a href="/path/to/resource">Headline text</a></h2>
<p><a href="/path/to/resource">Paragraph text.</a></p>
在HTML5中，我只要简单地把所有内容都包装在一个链接元素中就行了。
<a href="/path/to/resource">
<h2>Headline text</h2>
<p>Paragraph text.</p>
</a>
它解决了一个现实的问题链接包含的都是块级元素，说HTML5解决现实的问题，其本质还是“你都这样写了很多年了吧？现在我们把标准改了，允许你这样写了。
(4)求真务实
HTML5中新的语义元素就是遵循求真务实原理的反映。新增的元素不算多，谈不上无限的扩展性，但却不失为一件好事。尽管数量屈指可数，但意义却非同一般。这些新元素涉及头部（header）、脚部（footer）、分区（section）、文章（article）……，相
(5)平稳退化
<video>
<source src="movie.mp4">
<source src="movie.ogv">
<object data="movie.swf">
<a href="movie.mp4">download</a>
</object>
</video>
上面的代码中包含了4个不同的层次。
1、如果浏览器支持video元素，也支持H264，没什么好说的，用第一个视频。
2、如果浏览器支持video元素，支持Ogg，那么用第二个视频。
3、如果浏览器不支持video元素，那么就要试试Flash影片了。
4、如果浏览器不支持video元素，也不支持Flash，我还给出了下载链接。
(6)最终用户优先
一旦遇到冲突，最终用户优先，其次是作者，其次是实现者，其次标准制定者，最后才是理论上的完满。
Drupal社区曾联系马克·博尔顿（Mark Boulton）和丽莎·雷贺特（Leisa Reichilt）设计Drupal的界面。他们计划遵循一些设计原理。为此，他们并没有纸上谈兵，而是经过了一段时间的思考和酝酿，提出指导将来工作的4个设计原理：
简化最常见的任务，让不常见的任务不至于太麻烦。
只为80%设计。
给内容创建者最大的权利。
默认设置智能化。
HTML5到底是什么？
一般广义而言的HTML5则包含了HTML、CSS和JavaScript三个部分，不单单只是HTML部分而已，CSS 3和JavaScript也有许多的创新，让整个网页程序功能更加缤纷。
HTML5的技术组成
脱机功能
HTML5透过JavaScript提供了数种不同的脱机储存功能，相对于传统的Cookie而言有更好的弹性以及架构，并且可以储存更多的内容。
- WebStorage: 比 Cookies 更大、更有弹性的的储存
- Web SQL Database: 本地端的SQL数据库
- Indexed DB: Key-value 的本地数据库
- Application Cache: 将部分常用的网页内容cache起来
实时通讯
以往网站由于HTTP协议以及浏览器的设计，实时的互动性相当的受限，只能使用一些技巧来「仿真」实时的通讯效果，但HTML5提供了完善的实时通讯支持。
- WebSocket: 实时的socket联机
- Web Workers: 以往 JavaScript 都是 single thread，透过 Worker 可以有多个运算
- Notifications: 原生的提示讯息，类似像OS X的Growl提示
档案以及硬件支持
不知道大家有没有发现，在Gmail等新的网页程序当中，已经可以透过拖拉的方式将档案作为邮件附件？这就是这部份HTML5档案的功能中的Dragn Drop和File API。
- Dragn Drop: HTML元素的拖拉
- File API: 读取用户本机计算机的内容
- Geolocation: 地理定位
- Device orientation: 手持装置的方向
- Speech input: 语音输入
语义化
语义化的网络是可以让计算机能够更加理解网页的内容，对于像是搜索引擎的优化（SEO）或是推荐系统可以有很大的帮助。
- New tags: 新的标签，像是 header、 section等
- Application tags: 也是新的标签，像是 meter、 progress
- 等
- Microdata: 加入语义的数据让搜索引擎等网站可以正确显示
- Form type: form可以加入的type便多了，包含email和tel等属性，浏览器会协助进行数据格式的验证
多媒体
Audio、Video的卷标支持以及Canvas的功能应该是大家对于HTML5最熟悉的部份了，也是许多人认为Flash会被取代的主要原因。
- Audio video: 影片和音乐的原生播放支持
- Canvas: 2D的绘图功能支持
- Canvas 3D: 3D的绘图功能支持
- SVG: 向量图支援
CSS 3
CSS3支持了字体的嵌入、版面的排版，以及最令人印象深刻的动画功能。
- Selector: 更有弹性的选择器
- Webfonts: 嵌入式字体
- Layout: 多样化的排版选择
- Stlying radius gradient shadow: 圆角、渐层、阴影
- Border background: 边框的背景支持
- Transition: 组件的移动效果
- Transform: 组件的变形效果
- Animation: 将移动和变形加入动画支持
JavaScript
在比较JavaScript的基本面也新增了DOM的API、和浏览器上下页的纪录修改。
- DOM API: 更方便的查询DOM组件
- History API: 浏览器的上下页内容修改，方便AJAX可以保留浏览记录
而对于旧的浏览器兼容性而言，先前撰文介绍过的CSS3 Pie便是一个让旧版浏览器也能支持CSS 3功能的JavaScript函数库。
而Modernizer也是一个相当重要的JavaScript函数库，提供开发者轻松的方式判别目前使用者的浏览器是否有支持特定的HTML5功能。