关注HTML5有一段时间了，一直没系统的去学习过。

对于HTML5的理解，之前停留在一些新的标签，一些api可以完成部分js完成的事情，仅此而已。

前段时间HTML5定稿了，看了一些这方面的报道，进行了系统的学习，HTML5能做的远比你想象的多。

是时候开始学习了。

本系列内容主要参考"HTML5高级程序设计"和W3SCHOOL.

本文是系列的第一篇： HTML5初窥。

文章提纲

概述
HTML5发展史 & 设计理念
HTML5新功能快速预览
总结

概述

随着未来桌面移动化进程的逐渐普及，移动设备与桌面设备使用的技术架构不可避免会有趋同的走势，HTML5 是唯一通吃 PC、Mac、iPhone、iPad、Android、Windows Phone 等主流平台的跨平台语言，是时候采用HTML5+CSS3+JS构建新的Web应用了。

作为下一代Web语言，HTML5不再只是一种标记语言，它为下一代Web提供了全新的框架和平台，包括提供免插件的音频视频、图像动画、本地存储及更多酷炫的功能，是Web能够轻松实现native的体验。

HTML5发展史&设计理念

HTML5发展史

我把HTML5的发展史概括成三句话，详细内容有兴趣自己查阅，我就不多说了。

1993年HTML首次以因特网草案的形式发布，从2.0，3.2，4.0直到1999年的4.01版，4.01后开始停滞不前，W3C掌握着HTML规范的控制权。

一组人2004年成立了WHATWA(Web Hypertext Application Technology Working Group), 他们创立了HTML5规范, 同时针对Web应用开发新功能。（Web 2.0就是这个时候被发明的）

2006年,W3C又重新介入HTML，并于2008年发布了HTML5的工作草案，上个月正式定稿。

HTML5设计理念

1. 兼容性

支持现有文档并保持平滑过渡。

例如Google分析了上百万的页面，从中分析出DIV标签的通用ID名称，发现其中重复量很大，很多开发人员都喜欢用DIV id="header"来标记页眉区域。HTML5于是直接定义了一个<header>标签。

2. 实用性（效率和用户优先）

HTML5规范是基于用户优先准则编写的，其宗旨是"用户至上"，这意味着遇到无法解决的冲突时，规范会把用户放到第一位，其次是页面作者，再次是实现者（浏览器）,最后才考虑到理论的纯粹性。

3. 化繁为简

主要做了以下改进：

以浏览器原生能力代替复杂的js代码;

新的简化的DOCTYPE;

新的简化的字符集声明;

简单而强大的HTML5 API;

4. 通用访问性

这个原则分为三个概念。

可访问性：出于对残障人士考虑，HTML5和WAI(Web Accessibility Initiative)和ARIA（Accessible Rich Internet Applications）做了紧密结合，WAI-ARIA中以屏幕阅读器为基础的元素已经被添加到HTML中。

媒体中立：如果可能的话，HTML5的功能在所有不同的设备和平台上应该都能正常运行。

支持所有语种：例如，新的<ruby>元素支持在东亚页面排版中会用到的Ruby注释。

Note

<ruby>定义和用法：

<ruby> 标签定义 ruby 注释（中文注音或字符）。

在东亚使用，显示的是东亚字符的发音。

与 <ruby> 以及 <rt> 标签一同使用：

ruby 元素由一个或多个字符（需要一个解释/发音）和一个提供该信息的 rt 元素组成，还包括可选的 rp 元素，定义当浏览器不支持 "ruby" 元素时显示的内容。

HTML5 快速学习一

HTML5新功能快速预览

新的DOCTYPE和字符集

根据上面提到的HTML5设计准则化繁为简，Web页面的DOCTYPE被极大的简化了。

HTML4 DOCTYPE

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <!DOCTYPE>

谁能记得住？

请看HTML5 DOCTYPE

<!DOCTYPE html>

跟DOCTYPE一样，字符集的声明也被简化了。

现在成了

新元素和旧元素

HTML5标记元素根据内容类型的不同，分成7大类：

内嵌

像文档中添加其他类型的内容，例如audio、video、canvas和iframe等

流

在文档和应用的body中使用的元素，例如form、h1和small等

标题

段落标题，例如h1、h2和hgroup等

交互

与用户交互的内容，例如button和textarea等

元数据

通常出现在页面的head中，设置页面其他部分的表现和行为，例如script、style和title等

短语

文本和文本标记元素，例如mark、kbd、sub和sup等

片段

用于定义文档中片段的元素，例如article、aside和title等

语义化标记

HTML5新的片段类元素介绍

header

标记头部区域的内容（用于整个页面或页面中的一块区域）

footer

标记脚部区域的内容（用于整个页面或页面中的一块区域）

section

web页面中的一块区域

article

独立的文章内容

aside

使用Selectors API简化选取操作

除了语义化元素外，HTML5还引入了一种用于查找页面DOM元素的快捷方式。

HTML5之前查找元素的js举例：

函数：getElementById()

举例：<div id="foo"> getElementById("foo")

HTML5有了新的Selectors API, 可以用更精确的方式来指定希望获取的元素，而不必再用标准的DOM的方式循环遍历。使用方式类似于CSS中使用的选择规则一样。举例：

函数1：querySelector()

描述：根据指定的选择规则，返回在页面中找到的第一个匹配元素

示例：querySelector("input.error")

结果：返回第一个CSS类名为"error"的文本选择框

------------

函数2：querySelectorAll()

描述：根据指定规则返回页面中所有相匹配的元素

示例：querySelectorAll("#results td")

结果：返回id值为results的元素下所有的单元格

Note

1. 可以为Selector API函数同时指定多个规则，例如

//选择文档中名为highClass或lowClass的第一个元素

var x= document.querySelector(".highClass",".lowClass");

2. Selectors API不仅仅只是方便，在遍历DOM的时候，

Selectors API通常会比以前的遍历搜索更快，浏览器对选择器匹配进行了高度优化。

window.JSON

JSON作为js语法的一个子集，它将数据表示为对象字面量。

由于其语法简单和在js编程中与生俱来的兼容性，JSON变成了HTML5应用内部数据交换的事实标准。

典型的JSON API包含两个函数，parse()和stringify(), 分别用于将字符串序列化成DOM对象和将DOM对象转换成字符串。

如果旧的浏览器使用JSON，需要js库。

在js中执行解析和序列化效率往往不高，所以为了提高执行速度，新的浏览器原生扩展了对JSON的支持，可以直接通过js来调用JSON了。

总结

本文首先介绍了HTML5的一些重要特点，HTML的历史和设计理念。

最后对HTML5的新功能进行了快速预览。

赶紧抽时间学习HTML5吧！

好了，今天就到这里。

欢迎大家多多评论，让下一篇文章更好：）

秒客网