喜欢就好 I Like it ！

　　HTML5草案的前身名为Web Applications 1.0。於2004年被WHATWG提出，於2007年被W3C接纳，并成立了新的HTML工作团队。在2008年1月22日，第一份正式草案已公布,预计将在2010年9月正式向公众推荐。WHATWG表示该规范是目前正在进行的工作，仍须多年的努力。

　　HTML5提供了一些新的元素和属性，例如<nav>（网站导航块）和<footer>。这种标签将有利于搜索引擎的索引整理，同时更好的帮助小屏幕装置和视障人士使用，除此之外，还为其他浏览要素提供了新的功能，如<audio>和<video>标记。

　　一些过时的HTML4标记将被取消。其中包括纯粹显示效果的标记，如<font>和<center>，它们已经被CSS取代。

新应用程序接口（API）

　　除了原先的DOM接口，HTML5增加了更多API,如：

　　1. 用于即时2D绘图的Canvas标签

　　2. 定时媒体回放

　　3. 离线数据库存储

　　4. 文档编辑

　　5. 拖拽控制

　　6. 浏览历史管理

与HTML 4的不同之处

　　新的解析顺序新的元素：section, video, progress, nav, meter, time, aside, canvasinput元素的新属性：日期和时间，email, url新的通用属性：ping, charset, async全域属性：id, tabindex, repeat移除元素：center, font, strike

　　HTML 5有两大特点:

　　首先，强化了Web网页的表现性能。除了可描绘二维图形外，还准备了用于播放视频和音频的标签。

　　其次，追加了本地数据库等Web应用的功能。

　　HTML5(text/html)浏览器将在错误语法的处理上更加灵活。HTML5在设计时保证旧的浏览器能够安全的忽略掉新的HTML5代码。与HTML4.01相比，HTML5给出了解析的详细规则，力图让不同的浏览器即使在发生语法错误时也能返回相同的结果。    

 

 

  超文本标记语言（HTML）5 第一次向 HTML 中引入新的元素。新的结构元素包括 aside、figure 和 section。新的内联元素包括 time、meter 和 progress。新的内嵌元素有 video 和 audio。新的交互元素有 details、datagrid 和 command。

　　超文本标记语言（HTML）的开发到 1999 年 HTML 4 就停止了。万维网联盟（W3C）把重点转向将 HTML 的底层语法从标准通用标记语言（SGML）改为可扩展标记语言（XML），以及可缩放向量图型（SVG）、XForms 和 MathML 这些全新的标记语言。浏览器厂商则把精力放到选项卡和富站点摘要（RSS）阅读器这类浏览器特性上。Web 设计人员开始学习使用异步 JavaScript + XML（Ajax），在现有的框架下通过层叠样式表（CSS）和 JavaScript™ 语言建立自己的应用程序。但是在接下来的八年中，HTML 本身没有任何变化。 

　　最近，它又复活了。三家重要的浏览器厂商 — Apple、Opera 和 Mozilla Foundation — 成立了 Web Hypertext Application Technology Working Group（WhatWG）来开发传统 HTML 的新版本。最近，W3C 也注意到了这些活动，也启动了自己的新一代 HTML 项目，双方的成员有很多是相同的。这两个项目最终很可能合并。虽然很多细节还在争论之中，但下一版本 HTML 的大体轮廓已经清楚了。 

　　Web 开发人员从 1999 年就一直期待 HTML 的新版本（通常称为 HTML 5，但是也称为 Web Applications 1.0），现在它终于发布了。它保持了 HTML 原来的特色：没有名称空间或模式。元素不必结束。浏览器会宽容地对待错误。p 仍然是 p，table 仍然是 table。 

　　如果在 1999 年将一位 Web 开发人员冷冻起来，现在再解冻，那么他会遇到一些新的让人迷惑的元素。是的，他熟悉的元素（比如 div）仍然保留了；但是，HTML 现在还包含 section、header、footer 和 nav 等新元素。em、code 和 strong 仍然存在，但是增加了 meter、time 和 m。img 和 embed 仍然可用，但是还增加了 video 和 audio。但是，他仔细观察一下就会发现，这些元素实际上没什么区别。其中许多元素可能在 1999 年是开发人员需要而没有得到的。通过与他已经掌握的元素进行简单的类比，这些新元素都很容易理解。实际上，与 Ajax 或 CSS 相比，它们非常容易掌握。 

　　最后，当他打开 300MHz 的笔记本（运行的是 Windows 98，也是在 1999 年冷冻起来的）时，他可能对 Netscape 4 和 Windows® Internet Explorer® 5 中显示的新页面效果很吃惊。当然，这些老式浏览器不认识新元素，会完全忽略它们，但是页面仍然会显示，内容仍然是完整的。 

　　这并不是什么虚构的故事。HTML 5 的设计原则就是在不支持它的浏览器中能够平稳地退化。原因很简单：我们都是这样的 “原始人”。浏览器现在有选项卡、CSS 和 XmlHttpRequest，但是它们的 HTML 显示引擎仍然停留在 1999 年的水平。除了用户量大大增加之外，Web 其实在本质上没什么进步。HTML 5 考虑到了这一点。它目前为 Web 开发人员一些真正的好处，随着浏览器的缓慢升级，页面浏览者会逐渐享受到这些好处。

 

内嵌媒体

 

视频已经在 Web 上广泛流行了，但是其格式几乎都是专有的。YouTube 使用 Flash，Microsoft 使用 Windows Media®，Apple 使用 QuickTime。在一种浏览器中用来嵌入这些内容的标记在另一种浏览器中是无效的。因此，WhatWG 提议引入一个新的 video 元素，用来嵌入任意视频格式。例如，可以用以下代码嵌入我的 QuickTime 电影 “a Sora in Prospect Park”： 

 

<video src="http://www.cafeaulait.org/birds/sora.mov" />

 

对于以哪种格式和解码器作为首选，仍然有争议。可能会强力推荐或要求使用 Ogg Theora。还可以可选地支持 QuickTime 等专有格式和 MPEG-4 等受专利限制的格式。实际使用的格式很可能由市场决定，就像是 GIF、JPEG 和 PNG 格式那样（这些格式通过市场竞争压倒了 BMP、X-Bitmap 和 JPEG 2000 等竞争者，成为 img 元素的首选格式）。 

　　还提议引入 audio 元素。例如，可以使用以下代码给 Web 页面加上背景音乐：

 

<audio src="spacemusic.mp3"   autoplay="autoplay" loop="20000" />

 

autoplay 属性指示浏览器在装载页面后立即开始播放，而不等待明确的用户请求。音频循环播放 20,000 次，然后停止（或者在用户关闭窗口或转到另一个页面时停止）。当然，浏览器可以（而且应该）允许用户关闭内嵌的媒体，不应该只按页面作者的要求去做。 

　　浏览器必须支持 WAV 格式，还可以支持 MP3 等其他格式。 

　　因为老式浏览器不支持这些元素，而且它们对于盲人和聋人用户来说没有意义，所以 audio 和 video 元素可以包含额外的标记，用来描述音频和视频的内容。这对搜索引擎也有帮助。在理想情况下，这些标记是音频和视频内容的完整文字版本。例如，代码8 显示 用 HTML 5 编写的 John F. Kennedy 的就职演说。 

 

<audio src="kennedyinauguraladdrees.mp3">     <p>     Vice President Johnson, Mr. Speaker, Mr. Chief Justice,     President Eisenhower, Vice President Nixon, President Truman,     Reverend Clergy, fellow citizens:     </p>          <p>     We observe today not a victory of party, but a celebration of     freedom – symbolizing an end, as well as a beginning –     signifying renewal, as well as change. For I have sworn before     you and Almighty God the same solemn oath our forebears     prescribed nearly a century and three-quarters ago.     </p>          <p>     The world is very different now. For man holds in his mortal     hands the power to abolish all forms of human poverty and all     forms of human life. And yet the same revolutionary beliefs for     which our forebears fought are still at issue around the globe –      the belief that the rights of man come not from the     generosity of the state, but from the hand of God.     </p>          <p>     …     </p>          </audio>

 

HTML5教程——交互

HTML 5 也被称为 Web Applications 1.0。为了实现这个目标，增加了几个为 Web 页面提供交互体验的新元素： 

　　details 
　　datagrid 
　　menu 
　　command 

　　这些元素都可以根据用户的操作和选择改变显示的内容，而不需要从服务器装载新页面。 

details

　　details 元素表示在默认情况下可能不显示的详细信息。可选的 legend 元素可以提供详细信息的摘要。
　　details 元素的用途之一是提供脚注和尾注。例如： 

 

The bill of a Craveri's Murrelet is about 10% thinner  than the bill of a Xantus's Murrelet.  <details> <legend>[Sibley, 2000]</legend> <p>Sibley, David Allen, The Sibley Guide to Birds,  (New York: Chanticleer Press, 2000) p. 247  </p> </details>

 

没有指定具体的显示方式。浏览器可以选用脚注、尾注和工具提示等方式。 

　　每个 details 元素可以有一个 open 属性。如果设置了这个属性，那么详细信息在最初就显示出来。如果没有设置这个属性，那么会隐藏它们，直到用户要求显示它们。无论是哪种情况，用户都可以通过单击一个图标或其他控件来显示或隐藏详细信息。 

datagrid

　　datagrid 元素提供一个网格控件。可以用它显示树、列表和表格，用户和脚本可以更新这些界面元素。与之相反，传统的表格主要用来显示静态数据。 

　　datagrid 从它的内容（一个 table、select 或其他 HTML 元素）获得初始数据。例如，代码 9 中的 datagrid 包含一张成绩表。在这个示例中，datagrid 的数据来自一个 table。更简单的一维 datagrid 可以从 select 元素获得数据。如果使用其他 HTML 元素，那么每个子元素成为网格中的一行。

 

<datagrid>   <table>     <tr><td>Jones</td><td>Allison</td><td>A-</td><td>B+</td><td>A</td></tr>     <tr><td>Smith</td><td>Johnny</td><td>A</td><td>C+</td><td>A</td></tr>     <tr><td>Willis</td><td>Sydney</td><td>C-</td><td>D</td><td>F</td></tr>     <tr><td>Wilson</td><td>Frank</td><td>B-</td><td>B+</td><td>A</td></tr>   </table> </datagrid>

 

这个元素与常规表格的区别在于，用户可以选择行、列和单元格；把行、列和单元格折叠起来；编辑单元格；删除行、列和单元格；对网格排序；以及在客户机浏览器中直接进行其他数据操作。可以用 JavaScript 代码监视更新。Document Object Model（DOM）中增加了 HTMLDataGridElement 接口以支持这个元素（代码 10　HTMLDataGridElement）。 

 

interface HTMLDataGridElement : HTMLElement {            attribute DataGridDataProvider data;   readonly attribute DataGridSelection selection;            attribute boolean multiple;            attribute boolean disabled;   void updateEverything();   void updateRowsChanged(in RowSpecification row, in unsigned long count);   void updateRowsInserted(in RowSpecification row, in unsigned long count);   void updateRowsRemoved(in RowSpecification row, in unsigned long count);   void updateRowChanged(in RowSpecification row);   void updateColumnChanged(in unsigned long column);   void updateCellChanged(in RowSpecification row, in unsigned long column); };

 

还可以使用 DOM 在网格中动态地装载数据。也就是说，datagrid 可以不包含那些提供初始数据的子元素。可以用一个 DataGridDataProvider 对象设置它（代码 11　DataGridDataProvider）。这样就可以从数据库、XmlHttpRequest 或者 JavaScript 代码能够访问的任何资源装载数据。 

 

interface DataGridDataProvider {   void initialize(in HTMLDataGridElement datagrid);   unsigned long getRowCount(in RowSpecification row);   unsigned long getChildAtPosition(in RowSpecification parentRow,        in unsigned long position);   unsigned long getColumnCount();   DOMString getCaptionText(in unsigned long column);   void getCaptionClasses(in unsigned long column, in DOMTokenList classes);   DOMString getRowImage(in RowSpecification row);   HTMLMenuElement getRowMenu(in RowSpecification row);   void getRowClasses(in RowSpecification row, in DOMTokenList classes);   DOMString getCellData(in RowSpecification row, in unsigned long column);   void getCellClasses(in RowSpecification row, in unsigned long column,        in DOMTokenList classes);   void toggleColumnSortState(in unsigned long column);   void setCellCheckedState(in RowSpecification row, in unsigned long column,        in long state);   void cycleCell(in RowSpecification row, in unsigned long column);   void editCell(in RowSpecification row, in unsigned long column, in DOMString data); };

 

menu 和 command

　　menu 元素实际上在 HTML 2 中就出现了。在 HTML 4 中废弃了它，但是 HTML 5 又恢复了它并指定了新的意义。在 HTML 5 中，menu 包含 command 元素，每个 command 元素引发一个操作。例如，代码 12 HTML 5 菜单　是一个弹出警告框的菜单。

 

<menu>     <command onclick="alert('first command')"  label="Do 1st Command"/>     <command onclick="alert('second command')" label="Do 2nd Command"/>     <command onclick="alert('third command')"  label="Do 3rd Command"/> </menu>

 

还可以用 checked="checked" 属性将命令转换为复选框。通过指定 radiogroup 属性，可以将复选框转换为单选按钮，这个属性的值是互相排斥的按钮的组名。 

　　除了简单的命令列表之外，还可以使用 menu 元素创建工具栏或弹出式上下文菜单，这需要将 type 属性设置为 toolbar 或 popup。例如，代码　13. HTML 5 工具栏　显示一个与 WordPress 等 blog 编辑器相似的工具栏。它使用 icon 属性链接到按钮的图片。

 

<menu type="toolbar">     <command onclick="insertTag(buttons, 0);"  label="strong" icon="bold.gif"/>     <command onclick="insertTag(buttons, 1);"  label="em" icon="italic.gif"/>     <command onclick="insertLink(buttons, 2);" label="link" icon="link.gif"/>     <command onclick="insertTag(buttons, 3);"  label="b-quote" icon="blockquote.gif"/>     <command onclick="insertTag(buttons, 4);"  label="del" icon="del.gif"/>     <command onclick="insertTag(buttons, 5);"  label="ins" icon="insert.gif"/>     <command onclick="insertImage(buttons);"   label="img" icon="image.gif"/>     <command onclick="insertTag(buttons, 7);"  label="ul" icon="bullet.gif"/>     <command onclick="insertTag(buttons, 8);"  label="ol" icon="number.gif"/>     <command onclick="insertTag(buttons, 9);"  label="li" icon="item.gif"/>     <command onclick="insertTag(buttons, 10);" label="code" icon="code.gif"/>     <command onclick="insertTag(buttons, 11);" label="cite" icon="cite.gif"/>     <command onclick="insertTag(buttons, 12);" label="abbr" icon="abbr.gif"/>     <command onclick="insertTag(buttons, 13);" label="acronym" icon="acronym.gif"/> </menu>

 

label 属性提供菜单的标题。例如，代码14. HTML 5 Edit 菜单　显示一个 Edit 菜单。

 

<menu type="popup" label="edit">     <command onclick="undo()"   label="Undo"/>     <command onclick="redo()"   label="Redo"/>     <command onclick="cut()"    label="Cut"/>     <command onclick="copy()"   label="Copy"/>     <command onclick="paste()"  label="Paste"/>     <command onclick="delete()" label="Clear"/> </menu>

 

菜单可以嵌套在其他菜单中，形成层次化的菜单结构。 

 

From：http://www.websbook.com