HTML5新一代网页标记语言
来源:维基百科
HTML5是HTML下一个主要的修订版本,现在仍处于发展阶段。目标是取代1999年所制定的HTML 4.01和XHTML 1.0 标准,以期能在互联网应用迅速发展的时候,使网络标准达到符合当代的网络需求。广义论及HTML5时,实际指的是包括HTML、CSS和JavaScript在内的一套技术组合。它希望能够减少浏览器对于需要插件的丰富性网络应用服务(plug-in-based rich internet application,RIA),如Adobe Flash、Microsoft Silverlight,与Oracle JavaFX的需求,并且提供更多能有效增强网络应用的标准集。
具体来说,HTML5添加了许多新的语法特征,其中包括<video>, <audio>, 和<canvas>元素,同时整合了SVG内容。这些元素是为了更容易的在网页中添加和处理多媒体和图片内容而添加的。其它新的元素包括<section>, <article>, <header>, 和<nav>,是为了丰富文档的数据内容。新的属性的添加也是为了同样的目的。同时也有一些属性和元素被移除掉了。一些元素,像<a>, <cite>和<menu>被修改,重新定义或标准化了。同时APIs和DOM已经成为HTML5中的基础部分了。[1]HTML5还定义了处理非法文档的具体细节,使得所有浏览器和客户端程序能够一致地处理语法错误。
发展历史
HTML 5草案的前身名为Web Applications 1.0,是在2004年由WHATWG提出,再于2007年获W3C接纳,并成立了新的HTML工作团队。在2008年1月22日,第一份正式草案发布。[3]WHATWG表示该规范是目前仍在进行的工作,仍须多年的努力。[4]目前Firefox、Google Chrome、Opera、Safari(版本4以上)、Internet Explorer 9已支援HTML5技术。
尽管HTML5已经在网络开发人员中非常出名了,但是它成为主流媒体的一个话题还是在2010年的4月,[5][6][7][8]当时苹果公司的CEO乔布斯发表一篇题为“对flash的思考”的文章,指出随着HTML5的发展,观看视频或其它内容时,Adobe Flash将不再是必须的。这引发了开发人员间的争论,包括HTML5虽然提供了增强的功能,但开发人员必须考虑到不同浏览器对标准不同部分的支持程度的不同,以及HTML5和Flash间的功能差异。[9]
HTML 5的标准草案目前已进入W3C制定标准5大程序的第1步。负责编纂标准格式文件的Google员工Ian Hickson预期,可能得等到2012年才会推出建议候选版(W3C Candidate Recommendation),并在2022年才会成为 W3C 推荐标准(W3C Recommendation)。 google公司负责开发android的andy rubin在allthingsd亚洲大会上表示html5还远不能为不同的移动操作系统提供不同的程序。
新标记
HTML 5提供了一些新的元素和属性,反映典型的现代用法网站。其中有些是技术上类似<div>和<span>标签,但有一定含义,例如<nav>(网站导航块)和<footer>。这种标签将有利于搜索引擎的索引整理、小屏幕装置和视障人士使用。同时为其他浏览要素提供了新的功能,通过一个标准接口,如<audio>和<video>标记。[10]
一些过时的HTML 4标记将取消,其中包括纯粹用作显示效果的标记,如<font>和<center>,因为它们已经被CSS取代。还有一些透过DOM的网络行为。
尽管和SGML在标记上的相似性,HTML5的句法并不再基于它了,而是被设计成向后兼容对老版本的HTML的解析。它有一个新的开始行看起来就像SGML的文档类型声明,<!DOCTYPE html>,这会触发和标准兼容的渲染模式。[11]在2009年1月5号,HTML5添加了Web Form 2.0的内容。html5就开始发展起来
标签列表
标签
描述
4: 指在HTML 4.01 中定义了该元素
5: 指在HTML 5 中定义了该元素
<!--...-->
定义注释
4
5
<!DOCTYPE>
定义文档类型
4
5
<a>
定义超链接
4
5
<abbr>
定义缩写
4
5
<acronym>
HTML 5 中不支持
4
<address>
定义地址元素
4
5
<applet>
定义 applet(HTML 5 中不支持)
4
<area>
定义图像映射中的区域
4
5
<article>
定义 article
5
<aside>
定义页面内容之外的内容
5
<audio>
定义声音内容
5
<b>
定义粗体文本
4
5
<base>
定义页面中所有链接的基准URL
4
5
<basefont>
HTML 5 中不支持,请使用CSS 代替
4
<bdo>
定义文本显示的方向
4
5
<big>
定义大号文本(HTML 5 中不支持)
4
<blockquote>
定义长的引用
4
5
<body>
定义 body 元素
4
5
<br>
插入换行符
4
5
<button>
定义按钮
4
5
<canvas>
定义图形
5
<caption>
定义表格标题
4
5
<center>
定义居中的文本(HTML 5 中不支持)
4
<cite>
定义引用
4
5
<code>
定义计算机代码文本
4
5
<col>
定义表格列的属性
4
5
<colgroup>
定义表格列的分组
4
5
<command>
定义命令按钮
5
<datalist>
定义下拉列表
5
<dd>
定义定义的描述
4
5
<del>
定义删除文本
4
5
<details>
定义元素的细节
5
<dfn>
定义定义项目
4
5
<dir>
定义目录列表(HTML 5 中不支持)
4
<div>
定义文档中的一个部分
4
5
<dl>
定义定义列表
4
5
<dt>
定义定义的项目
4
5
<em>
定义强调文本
4
5
<embed>
定义外部交互内容或插件
5
<fieldset>
定义 fieldset
4
5
<figcaption>
定义 figure 元素的标题
5
<figure>
定义媒介内容的分组,以及它们的标题
5
<font>
HTML 5 中不支持
4
<footer>
定义 section 或 page 的页脚
5
<form>
定义表单
4
5
<frame>
定义子窗口(框架)(HTML 5 中不支持)
4
<frameset>
定义框架的集(HTML 5 中不支持)
4
<h1> to <h6>
定义标题1 到标题6
4
5
<head>
定义关于文档的信息
4
5
<header>
定义 section 或 page 的页眉
5
<hgroup>
定义有关文档中的 section 的信息
5
<hgroup>
定义有关文档中的 section 的信息
4
5
<html>
定义 html 文档
4
5
<i>
定义斜体文本
4
5
<iframe>
定义行内的子窗口(框架)
4
5
<img>
定义图像
4
5
<input>
定义输入域
4
5
<ins>
定义插入文本
4
5
<keygen>
定义生成密钥
5
<isindex>
定义单行的输入域(HTML 5 中不支持)
4
<kbd>
定义键盘文本
4
5
<label>
定义表单控件的标注
4
5
<legend>
定义 fieldset 中的标题
4
5
<li>
定义列表的项目
4
5
<link>
定义资源引用
4
5
<map>
定义图像映射
4
5
<mark>
定义有记号的文本
4
5
<menu>
定义菜单列表
4
5
<meta>
定义元信息
4
5
<meter>
定义预定义范围内的度量
5
<nav>
定义导航链接
5
<noframes>
定义 noframe 部分(HTML 5 中不支持)
4
<noscript>
定义 noscript 部分
4
5
<object>
定义嵌入对象
4
5
<ol>
定义有序列表
4
5
<optgroup>
定义选项组
4
5
<option>
定义下拉列表中的选项
4
5
<output>
定义输出的一些类型
5
<p>
定义段落
4
5
<param>
为对象定义参数
4
5
<pre>
定义预格式化文本
4
5
<prOGREss>
定义任何类型的任务的进度
5
<q>
定义短的引用
4
5
<rp>
定义若浏览器不支持 ruby 元素显示的内容
5
<rt>
定义 ruby 注释的解释
5
<ruby>
定义 ruby 注释
5
<s>
定义加删除线的文本(HTML 5 中不支持)
4
<samp>
定义样本计算机代码
4
5
<script>
定义脚本
4
5
<section>
定义 section
4
5
<select>
定义可选列表
4
5
<small>
定义小号文本
4
5
<source>
定义媒介源
4
5
<span>
定义文档中的 section
4
5
<strike>
定义加删除线的文本(HTML 5 中不支持)
4
<strong>
定义强调文本
4
5
<style>
定义样式定义
4
5
<sub>
定义下标文本
4
5
<summary>
定义 details 元素的标题
5
<sup>
定义上标文本
4
5
标签
描述
4: 指在HTML 4.01 中定义了该元素
5: 指在HTML 5 中定义了该元素
<table>
定义表格
4
5
<tbody>
定义表格的主体
4
5
<td>
定义表格单元
4
5
<textarea>
定义 textarea
4
5
<tfoot>
定义表格的脚注
4
5
<th>
定义表头
4
5
<thead>
定义表头
4
5
<time>
定义日期/时间
5
<title>
定义文档的标题
4
5
<tr>
定义表格行
4
5
<tt>
定义打字机文本(HTML 5 中不支持)
4
<u>
定义下划线文本(HTML 5 中不支持)
4
<ul>
定义无序列表
4
5
<var>
定义变量
4
5
<video>
定义视频
5
<xmp>
定义预格式文本(HTML 5 中不支持)
4
事件属性
属性
值
描述
4
5
HTML 5 元素可拥有事件属性,这些属性在浏览器中触发行为,比如当用户单击一个HTML 5元素时启动一段 JavaScript。下面列出的事件属性,可以把它们插入 HTML 标签来定义事件行为。
HTML 5 中的新事件属性:onabort, onbeforeunload, oncontextmenu, ondrag, ondragend, ondragenter, ondragleave, ondragover, ondragstart, ondrop, onerror, onmessage, onmousewheel, onresize, onscroll, onunload。
onabort
script
发生 abort 事件时运行脚本。
5
onbeforeonload
script
在元素加载前运行脚本。
5
onblur
script
当元素失去焦点时运行脚本。
4
5
onchange
script
当元素改变时运行脚本。
4
5
onclick
script
在鼠标点击时允许脚本。
4
5
oncontextmenu
script
当菜单被触发时运行脚本。
5
ondblclick
script
当鼠标双击时运行脚本。
4
5
ondrag
script
只要脚本在被拖动就允许脚本。
5
ondragend
script
在拖动操作结束时运行脚本。
5
ondragenter
script
当元素被拖动到一个合法的放置目标时,执行脚本。
5
ondragleave
script
当元素离开合法的放置目标时。
5
ondragover
script
只要元素正在合法的放置目标上拖动时,就执行脚本。
5
ondragstart
script
在拖动操作开始时执行脚本。
5
ondrop
script
当元素正在被拖动时执行脚本。
5
onerror
script
当元素加载的过程中出现错误时执行脚本。
5
onfocus
script
当元素获得焦点时执行脚本。
4
5
onkeydown
script
当按钮按下时执行脚本。
4
5
onkeypress
script
当按键被按下时执行脚本。
4
5
onkeyup
script
当按钮松开时执行脚本。
4
5
onload
script
当文档加载时执行脚本。
4
5
onmessage
script
当 message 事件触发时执行脚本。
5
onmousedown
script
当鼠标按钮按下时执行脚本。
4
5
onmousemove
script
当鼠标指针移动时执行脚本。
4
5
onmouseover
script
当鼠标指针移动到一个元素上时执行脚本。
4
5
onmouseout
script
当鼠标指针移出元素时执行脚本。
4
5
onmouseup
script
当鼠标按钮松开时执行脚本。
4
5
onmousewheel
script
当鼠标滚轮滚动时执行脚本。
5
onreset
script
当表单重置时执行脚本。不支持。
4
onresize
script
当元素调整大小时运行脚本。
5
onscroll
script
当元素滚动条被滚动时执行脚本。
5
onselect
script
当元素被选中时执行脚本。
4
5
onsubmit
script
当表单提交时运行脚本。
4
5
onunload
script
当文档卸载时运行脚本。
5
HTML 5不再支持的 HTML 4.01 属性:onreset。
无障碍(Accessibility)
为了使 HTML5 的新元素或新属性获取最大化的兼容性,开发人员需要附加一点额外补助,或者有些特性根本没有被任何浏览器实现,或者浏览器根本不支持补助技术。因此有些特殊的 HTML5 特性根本不能使用。
新应用程序接口(API)
除了原先的DOM接口,HTML5增加了更多样化的API[1]:
即时二维绘图
Canvas API:有关动态产出与渲染图形、图表、图像和动画的API。
定时媒体播放
HTML5 音频与视频:HTML5里新增的元素,它们为开发者提供了一套通用的、整合的、脚本式的处理音频与视频的API,而无需安装任何插件。
离线存储数据库(离线网络应用程序)[12]
编辑
拖放
跨文档通信[13]
通讯/网络
Communication APIs:构建实时和跨源(cross-origin)通讯的两大基础: 跨文档通讯(Cross Document Messaging)与 XMLHttpRequest Level 2。
浏览历史管理
MIME和协议处理程序时表头登记
微数据
以上技术尽管是WHATWG HTML说明文档的内容,但并没有全部包括在W3C HTML5的说明文档里。[14]一些相关的技术,像下面所列的,并没有包括在这2份文档中的任何一份中。W3C给这些技术单独出版了说明文档。
· Geolocation API:使用者可共享地理位置,并在Web应用的协助下享用位置感知服务(location-aware services)。
· 索引数据库API(Indexed Database API, 以前为WebSimpleDB))[15]
· 文件API:处理文件上传和操纵文件。[16]
· 目录和文件系统:这个API是为了满足客户端在没有好的数据库支持情况下存储要求。[17]
· 文件写入:从网络应用程序向文件里写内容。[18]
一个普遍的误解是HTML5能够在网页中提供动画效果,这是不对的。动画效果是由JavaScript和CSS达成的。
与HTML 4的不同之处
以下为大略的不同之处,与例子:
· 新的解析顺序:不再基于SGML
· 新的元素:section, video, prOGREss, nav, meter, time, aside, canvas, command, datalist, details, embed, figcaption, figure, footer, header, hgroup, keygen, mark, output, rp, rt, ruby, source, summary, wbr
· input元素的新类型:date, email, url 等等
· 新的属性:ping(用于a与area), charset(用于meta), async(用于script)
· 全域属性:id, tabindex, repeat
· 移除元素:acronym, applet, basefont, big, center, dir, font, frame, frameset, isindex, noframes, strike, tt
各浏览器的支援
HTML 5 Test网站,是用以测试对浏览器对热门新功能的支援。测试的满分是 475 分。HTML 5 Test 并未测试所有新加入的功能,分数高只代表浏览器现时对所挑选的新网页编码整体上有较佳的支援,并不代表日后其表现的趋势,因此分数只能作为参考。
截止2012 年2 月19 日,五大浏览器最新版本所取得的分数分别是:
浏览器 |
版本 |
分数 |
Internet Explorer (32 及64 位元) |
9 |
141分 + 5 分额外分数 |
Mozilla Firefox |
|
332分 + 9 分额外分数 |
Opera |
11.61 Build 1250 |
329分 + 9 分额外分数 |
Apple Safari |
|
261分 + 2 分额外分数 |
Google Chrome |
17.0.963.56 |
374分 + 13 分额外分数 |
参考文献
[1]1.0 1.1 HTML5 differences from HTML4. W3C. 19 October 2010 [4 December 2010].
[2] 1.9.2 语法错误. HTML5. 25 November 2011 [23 December 2011].
[3] Ian Hickson; DAVID Hyatt. HTML 5. W3C Working Draft. 2008年1月22日 [2008-01-24].
[4] When will HTML 5 be finished?. WHATWG. WHATWG Wiki [2008-06-14].
[5]FOX News: No Flash on the iPhone? Apple's Steve Jobs Finally Explains Why http://www.foxnews.com/scitech/2010/04/29/flash-iphone-apples-steve-jobs-finally-explains/
[6] TIME: Steve Jobs: ‘Flash is No Longer Necessary’ and Other Musings http://techland.time.com/2010/04/29/steve-jobs-flash-is-no-longer-necessary-and-other-musings/
[7] CBS News: Steve Jobs: Why Apple Banned Flash http://www.cbsnews.com/8301-501465_162-20003744-501465.html
[8] FastCompany: Steve Jobs: Adobe's Flash Is Old PC History, Open Web Is the Future http://www.fastcompany.com/1633336/steve-jobs-flash-adobe-apple-iphone-os-mac-software-open-standards-proprietary-open-letter
[9]Is HTML5 Replacing Flash? http://www.lyquix.com/blog/122-is-html5-replacing-flash
[10]IBM的开发者资源:新内容在HTML5:结构和语义
[11] InstantShift [1] HTML5: Worth the Hype?
[12] Web Storage Specification W3.org
[13] HTML5 Web Messaging W3.org
[14] http://www.whatwg.org/html/#is-this-html5?
[15]Indexed Database W3.org
[16] File API W3.org
[17] Filesystem API W3.org
[18]File API: Writer W3.org