html5概览 - On The Way

一、简介

HTML5是HTML的新一代标准，现在仍处于发展阶段。HTML5添加了许多新的语法特征，其中包括<video>, <audio>, 和<canvas>元素，同时集成了SVG内容。这些元素是为了更容易的在网页中添加和处理多媒体和图片内容而添加的。其它新的元素包括<section>, <article>,<header>, 和<nav>,是为了丰富文档的数据内容。新的属性的添加也是为了同样的目的。同时也有一些属性和元素被移除掉了。

1.1 html5设计原理

避免不必要的复杂性
支持已有的内容
解决现实的问题
平稳退化
最终用户优先

详见Jeremy Keith在 Fronteers 2010 上的主题演讲The Design of HTML5,中文翻译见李松峰老师的翻译HTML5设计原理。

1.2 浏览器支持性况：

最新版本的 Safari、Chrome、Firefox 以及 Opera 支持某些 HTML5 特性。Internet Explorer 9支持某些 HTML5 特性。具体可查看http://html5test.com/results/desktop.html。

对于ie9以下的ie浏览器，可以使用html5shiv使其支持HTML5标签，将下面代码插入到<head>标签中即。

<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

二、Doctype

2.1 DOCTYPE 简介

DOCTYPE，或者称为 Document Type Declaration（文档类型声明，缩写 DTD）。最初是XML的概念，即通过一种特定的语法，作为一种元数据，来描述XML文档中允许出现的元素，以及各元素的组成、嵌套规则等。参考wiki。

在HTML中，DOCTYPE声明位于文档中的最前面的位置，处于 <html> 标签之前。浏览器需要在解析 HTML 文档之前就确定当前文档的类型，以决定其需要采用的渲染模式，不同的渲染模式会影响到浏览器对于 CSS 代码甚至 JavaScript 脚本的解析。如果没有DOCTYPE，浏览器会进入一种被称为Quirks模式（又叫混杂模式，怪异模式，Quirks mode）渲染模式，在该模式下，浏览器的盒模型、样式解析、布局等都与标准规定的存在差异。

没有声明DOCTYPE情况：

<html>
<head>
    <title>document</title>
</head>
<body>
<script>
document.write(document.compatMode); //BackCompat
</script>
</body>
</html>

声明DOCTYPE情况：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>document</title>
</head>
<body>
<script>
document.write(document.compatMode); //CSS1Compat
</script>
</body>
</html>

document.compatMode 最先出现在 IE6 中，它的值标示了浏览器的工作模式，这是一个只读的属性，返回一个字符串，只可能存在两种返回值：

BackCompat：标准兼容模式（Standards-compliant mode）未开启
CSS1Compat：标准兼容模式（又叫严格模式，Standards mode 或者 Strict mode）已开启

需要注意的是：在后来出现的接近标准模式中，document.compatMode 的返回值与标准模式一致，为CSS1Compat。也就是说，不能通过 document.compatMode 来详细区分浏览器的工作模式，只能用来判断浏览器是否工作在Quirks模式下。因为“标准模式”与“接近标准模式”之间的差异并不大，所以这个方法至今仍被广泛使用。

注意：

对于IE6-9，如果DOCTYPE前存在注释，会进入Quirks模式。
对于IE6，如果DOCTYPE前存在一个XML声明，会进入Quirks模式。

2.2 HTML4 的DOCTYPE

HTML 4.01的标准中指定了3种DOCTYPE：

严格模式：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

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

框架模式：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

在HTML4的标准中，每一个DOCTYPE对应的dtd文件都是有合法的URL指定的，可以通过互联网进行下载。浏览器可以根据URL获得到dtd的具体内容，并根据内容的规定来解析文档。

2.3 XHTML DOCTYPE

XHTML 1.0 规定了三种 XML 文档类型：Strict、Transitional 以及 Frameset。

严格模式：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

过渡模式：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

框架模式：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

2.4 HTML5 DOCTYPE

HTML5具有更简单的DOCTYPE，在html5中，只需要写<!DOCTYPE html>就可以了。所有的主流浏览器都将这种DOCTYPE视为标准模式。这样写的好处：

你可以轻松的写下这个DOCTYPE，而不用担心会写错；
它是向后兼容的。

<!DOCTYPE html>

注：DOCTYPE大小写不敏感。

三、标签

3.1 新增的HTML5 标签

新增加的英文标签不翻译了，直接看英文理解更准确些。

//Sections
<section>   Defines a section in a document
<nav>   Defines a section that contains only navigation links
<article>   Defines self-contained content that could exist independantly of the rest of the content
<aside>     Defines some content set aside from the rest of page content. If it is removed, the remaining content still make sense.
<hgroup>    Groups a set of <h1> to <h6> elements when a heading has multiple levels
<header>    Defines the header of a page or section. It often contains a logo, the title of the Web site and a navigational table of content.
<footer>    Defines the footer for a page or section. It often contains a copyright notice, some links to legal information or addresses to give feedback.
<main>  Defines the main or important content in the document. There is only one <main> element in the document.


//Grouping content
<figure>    Represents a figure illustrated a part of the document.
<figcaption>    Represents the legend of a figure.


//Text-level semantics
<data>  Associates to its content a machine-readable equivalent. (This element is only in the WHATWG version of the HTML standard, and not in the W3C version of HTML5).
<time>  Represents a date and time value, eventually with a machine-readable equivalent.
<mark>  Represents text highlighted for reference purposes, that is for its relevance in another context.
<ruby>  Represents content to be marked with ruby annotations, short runs of text presented alongside the text. This is often used in conjunction with East Asian language where the annotations act as a guide for pronunciation, like the Japanese furigana.
<rt>    Represents the text of a ruby annotation.
<rp>    Represents parenthesis around a ruby annotation, used to display the annotation in an alternate way by browsers not supporting the standard display for annotations.
<bdi>   Represents text that must be isolated from its surrounding for bidirectional text formatting. It allows to embed span of text with a different, or unknown, directionality.
<wbr>   Represents a line break opportunity, that is a suggested wrapping point in order to improve readability of text split on several lines.


//Embedded content
<embed>     Represents a integration point for an external, often non_HTML, application or interactive content.
<video>     Represents a video, and its associated audio files and captions, with the necessary interface to play it.
<audio>     Represents a sound, or an audio stream.
<source>    Allows authors to specify alternative media resources for media elements like <video> or <audio>.
<track>     Allows authors to specify timed text track for media elements like <video> or <audio>.
<canvas>    Represents a bitmap area that scripts can be used to render graphics, like graphs, game graphics, any visual images on the fly.
<svg>   Defines an embedded vectorial image.
<math>  Defines a mathematical formula.


//Forms
<datalist>  Represents a set of predefined options for other controls.
<keygen>    Represents a key pair generator control.
<output>    Represents the result of a calculation.
<progress>  Represents the completion progress of a task.
<meter>     Represents a scalar measurement (or a fractional value), within a known range


//Interactive elements
<details>   Represents a widget from which the user can obtain additional information or controls.
<summary>   Represents a summary, caption, or legend for a given <details>.
<command>   Represents a command that the user can invoke.
<menu>  Represents a list of commands.

3.2 HTML 4.01的和HTML5标签比较

Element	HTML 4.01/XHTML 1.0	HTML5	Short Description	中文描述
`a`	strict	yes	Hyperlink	超链接
`abbr`	strict	yes	Abbreviation	定义缩写
`acronym`	strict	-	Acronym	HTML 5 中不支持。定义首字母缩写。
`address`	strict	yes	Contact information	定义地址元素
`applet`	transitional	-	Java applet	HTML 5 中不支持，定义 applet
`area`	strict	yes	Image map region	定义图像映射中的区域
`article`	-	yes	Independent section	显示一个独立内容，如一篇完整的论坛帖子，一则网站新闻，一篇博客文章，一个用户评论等。
`aside`	-	yes	Auxiliary section	定义页面内容之外的内容，如侧边栏
`audio`	-	yes	Audio stream	定义声音内容
`b`	strict	yes	Bold text	定义粗体文本
`base`	strict	yes	Document base URI	定义页面中所有链接的基准 URL
`basefont`	transitional	-	Base font style	HTML 5 中不支持，请使用 CSS 代替。
`bb`	-	yes	Browser button	定义文本的文本方向，使其脱离其周围文本的方向设置。
`bdo`	strict	yes	Bi-directional text override	定义文本显示的方向
`bgsound`	-	-		HTML 5 中不支持。
`big`	strict	-		HTML 5 中不支持，定义大号文本。
`blink`	-	-		HTML 5 中不支持。
`blockquote`	strict	yes	Long quotation	定义长的引用。
`body`	strict	yes	Main content	定义 body 元素。
`br`	strict	yes	Line break	换行符。
`button`	strict	yes	Push button control	定义按钮。
`canvas`	-	yes	Bitmap canvas	定义图形，比如图表和其他图像
`caption`	strict	yes	Table caption	定义表格标题
`center`	transitional	-		HTML 5 中不支持，定义居中的文本
`cite`	strict	yes	Citation	定义引用
`code`	strict	yes	Code fragment	定义计算机代码文本
`col`	strict	yes	Table column	定义表格列的属性
`colgroup`	strict	yes	Table column group	定义表格列的分组
`command`	-	yes	Command that a user can invoke	定义命令按钮
`datagrid`	-	yes	Interactive tree, list or tabular data	定义下拉列表
`datalist`	-	yes	Predefined control values
`dd`	strict	yes	Description description	定义定义的描述。
`del`	strict	yes	Deletion	定义删除文本
`details`	-	yes	Additional information	定义元素的细节
`dfn`	strict	yes	Defining instance of a term	定义定义项目
`dialog`	-	yes	Conversation
`dir`	transitional	-		HTML 5 中不支持，定义目录列表
`div`	strict	yes	Generic division
`dl`	strict	yes	Description list	定义定义列表
`dt`	strict	yes	Description term	定义定义的项目
`em`	strict	yes	Stress emphasis	定义强调文本
`embed`	-	yes	Embedded application	定义外部交互内容或插件
`fieldset`	strict	yes	Form control group	定义 fieldset
`figure`	-	yes	A figure with a caption.	定义媒介内容的分组，以及它们的标题
`font`	transitional	-	Font style	HTML 5 中不支持
`footer`	-	yes	Section footer	定义 section 或 page 的页脚
`form`	strict	yes	Form	定义表单。
`frame`	frameset	-		HTML 5 中不支持。定义子窗口（框架）
`frameset`	frameset	-		HTML 5 中不支持，定义框架的集。
`h1`	strict	yes	Heading level 1	一级标题
`h2`	strict	yes	Heading level 2	二级标题
`h3`	strict	yes	Heading level 3	三级标题
`h4`	strict	yes	Heading level 4	四级标题
`h5`	strict	yes	Heading level 5	五级标题
`h6`	strict	yes	Heading level 6
`head`	strict	yes	Document head	六级标题
`header`	-	yes	Section header	定义 section 或 page 的页眉。
`hr`	strict	yes	Separator	定义水平线。
`html`	strict	yes	Document root	定义 html 文档
`i`	strict	yes	Italic text	定义斜体文本
`iframe`	transitional	yes	Inline frame	定义行内的子窗口（框架）
`img`	strict	yes	Image	定义图像
`input`	strict	yes	Form control	定义输入域
`ins`	strict	yes	Insertion	定义插入文本
`isindex`	transitional	-		HTML 5 中不支持，定义单行的输入域
`kbd`	strict	yes	User input	定义键盘文本
`label`	strict	yes	Form control label	定义表单控件的标注
`legend`	strict	yes	Explanatory title or caption	定义 fieldset 中的标题
`li`	strict	yes	List item	定义列表的项目。
`link`	strict	yes	Link to resources	定义资源引用
`listing`	-	-	Preformatted text	HTML 5 中不支持
`map`	strict	yes	Client-side image map	定义图像映射
`mark`	-	yes	Marked or highlighted text	定义有记号的文本
`marquee`	-	-		HTML 5 中不支持
`menu`	transitional	yes	Command menu	定义菜单列表
`meta`	strict	yes	Metadata	定义元信息
`meter`	-	yes	Scalar measurement	定义预定义范围内的度量
`nav`	-	yes	Navigation	定义导航链接
`nobr`	-	-		HTML 5 中不支持
`noembed`	-	-		HTML 5 中不支持
`noframes`	frameset	-		HTML 5 中不支持。
`noscript`	strict	yes	Alternative content for no script support	定义 noscript 部分
`object`	strict	yes	Generic embedded resource	定义嵌入对象
`ol`	strict	yes	Ordered list	定义有序列表
`optgroup`	strict	yes	Option group	定义选项组
`option`	strict	yes	Selection choice	定义下拉列表中的选项
`output`	-	yes	Output control	定义输出的一些类型
`p`	strict	yes	Paragraph	定义段落
`param`	strict	yes	Plugin parameter	为对象定义参数
`plaintext`	-	-	Preformatted text	HTML 5 中不支持
`pre`	strict	yes	Preformatted text	定义预格式化文本
`progress`	-	yes	Progress of a task	定义任何类型的任务的进度
`q`	strict	yes	Inline quotation	定义短的引用
`rp`	-	yes	Ruby parenthesis	定义若浏览器不支持 ruby 元素显示的内容
`rt`	-	yes	Ruby text	定义 ruby 注释的解释
`ruby`	-	yes	Ruby annotation	定义 ruby 注释
`s`	transitional	-		HTML 5 中不支持，定义加删除线的文本
`samp`	strict	yes	Sample output	定义样本计算机代码
`script`	strict	yes	Linked or embedded script	定义脚本
`section`	-	yes	Document section	定义 section
`select`	strict	yes	Selection control	定义可选列表
`small`	strict	yes	Small print	将旁注 (side comments) 呈现为小型文。
`source`	-	yes	Media resource	定义媒介源
`spacer`	-	-		HTML 5 中不支持
`span`	strict	yes	Generic inline container
`strike`	transitional	-		HTML 5 中不支持，定义加删除线的文本
`strong`	strict	yes	Strong importance	定义强调文本。
`style`	strict	yes	Embedded stylesheet	定义样式定义
`sub`	strict	yes	Subscript	定义下标文本
`sup`	strict	yes	Superscript	定义上标文本
`table`	strict	yes	Table	定义表格
`tbody`	strict	yes	Table body	定义表格的主体
`td`	strict	yes	Table cell	定义表格单元
`textarea`	strict	yes	Multi-line text control	定义 textarea
`tfoot`	strict	yes	Table footer	定义表格的脚注
`th`	strict	yes	Table header cell	定义表头单元格
`thead`	strict	yes	Table head	定义表头
`time`	-	yes	Date and/or time	定义日期/时间
`title`	strict	yes	Document title	定义文档的标题
`tr`	strict	yes	Table row	定义表格行
`u`	transitional	-		HTML 5 中不支持。定义下划线文本
`ul`	strict	yes	Unordered list	定义无序列表
`var`	strict	yes	Variable	定义变量。
`video`	-	yes	Video or movie	定义视频
`wbr`	-	-		HTML 5 中不支持
`xmp`	-	-	Preformatted text	HTML 5 中不支持。定义预格式文本

四、API

html5引入了新API,新的API的意义：

增强了html原生功能
丰富动画效果，增强web表现力
强大的后台运算和通信支持

html5新增API：

离线 & 存储（OFFLINE & STORAGE）
- Offline resources: 离线资源：应用程序缓存
- Online and offline events：在线和离线事件，可以让应用程序和扩展检测是否存在可用的网络连接，以及在连接建立和断开时能感知到。
- WEB Storage（又名 DOM Storage)：sessionStorage 和 localStorage。
- IndexedDB：是一个为了能够在浏览器中存储大量结构化数据，并且能够在这些数据上使用索引进行高性能检索的 web 标准。
- Using files from web applications
设备访问（DEVICE ACCESS）
- Using the Camera API：允许使用和操作计算机的摄像头，并从中存取照片。
- Touch events：对用户按下触控屏的事件做出反应的处理程序。
- Geolocation：让浏览器使用地理位置服务定位用户的位置，用户可共享地理位置，并在Web应用的协助下享用位置感知服务。
- Detecting device orientation：检测设备方向,让用户在运行浏览器的设备变更方向时能够得到信息。
- Pointer Lock API
连通性（CONNECTIVITY）
- Web Sockets：允许在页面和服务器之间建立持久连接并通过这种方法来交换非 HTML 数据。
- Server-sent events：允许服务器向客户端推送事件，而不是仅在响应客户端请求时服务器才能发送数据的传统范式。
- WebRTC：这项技术，其中的 RTC 代表的是即时通信，允许连接到其他人，直接在浏览器中控制视频会议，而不需要一个插件或是外部的应用程序。
多媒体（MULTIMEDIA）
- Audio and Video: HTML5 音频与视频：HTML5里新增的元素，它们为开发者提供了一套通用的、集成的、脚本式的处理音频与视频的API，而无需安装任何插件。
- Camera API：允许使用，操作计算机摄像头，并从中存储图像。
- Track 和 WebVTT：元素支持字幕和章节。WebVTT 一个文本轨道格式。
3D, 图像 & 效果（3D, GRAPHICS & EFFECTS）
- Canvas：有关动态产出与渲染图形、图表、图像和动画的API。
- SVG: 一个基于 XML 的可以直接嵌入到 HTML 中的矢量图像格式。
- WebGL：WebGL 通过引入了一套非常地符合 OpenGL ES 2.0 并且可以用在 HTML5 <canvas> 元素中的 API 给 web 带来了 3D 图像功能。
性能 & 集成（PERFORMANCE & INTEGRATION）
- Web Workers：把JavaScript 计算委托给后台线程，通过允许这些活动以防止使交互型事件变得缓慢。
- XMLHttpRequest Level 2
- History API：允许对浏览器历史记录进行操作。这对于那些交互地加载新信息的页面尤其有用。
- conentEditable 属性：HTML5 已经把 contentEditable 属性标准化了。
- Drag and drop：HTML5 的拖放 API 能够支持在网站内部和网站之间拖放项目。
- Fullscreen API：为一个网页或者应用程序控制使用整个屏幕，而不显示浏览器界面。