HTML5

顺晟科技

2022-09-15 20:39:18

215

百科名片

HTML标准自1999年12月发布的 HTML 4.01 后，后继的 HTML 5 和其它标准被束之高阁，为了推动web标准化运动的发展，一些公司联合起来，成立了一个叫做 Web Hypertext Application Technology Working Group （Web 超文本应用技术工作组 - WHATWG）的组织，HTML5草案的前身名为 Web Applications 1.0，於2004年被 WHATWG 提出，於2007年被 W3C 接纳，并成立了新的 HTML 工作团队。HTML 5 的第一份正式草案已于2008年1月22日公布。HTML 5有两大特点：首先，强化了 Web 网页的表现性能。其次，追加了本地数据库等 Web 应用的功能。

标准概述

改进特性

标签列表

事件属性

标签属性

发展趋势展开

编辑本段标准概述

　　HTML5 将成为 HTML、XHTML 以及 HTML DOM 的新标准。　　HTML5 仍处于完善之中。然而，大部分现代浏览器已经具备了某些 HTML5 支持。　　HTML5 是 W3C 与 WHATWG 合作的结果。　　注：W3C 指 World Wide Web Consortium，万维网联盟。　　WHATWG 致力于 web 表单和应用程序，而 W3C 专注于 XHTML 2.0。在 2006 年，双方决定进行合作，来创建一个新版本的 HTML。

编辑本段改进特性

　　HTML5提供了一些新的元素和属性，例如<nav>（网站导航块）和<footer>。这种标签将有利于搜索引擎的索引整理，同时更好的帮助小屏幕装置和视障人士使用，除此之外，还为其他浏览要素提供了新的功能，如<audio>和<video>标记。　　1.取消了一些过时的HTML4标记　　其中包括纯粹显示效果的标记，如<font>和<center>，它们已经被CSS取代。　　HTML5 吸取了XHTML2 一些建议，包括一些用来改善文档结构的功能，比如，新的HTML 标签 header, footer, dialog, aside, figure 等的使用，将使内容创作者更加语义地创建文档，之前的开发者在实现这些功能时一般都是使用div。　　2.将内容和展示分离　　b 和 i 标签依然保留，但它们的意义已经和之前有所不同，这些标签的意义只是为了将一段文字标识出来，而不是为了为它们设置粗体或斜体式样。u，font，center，strike 这些标签则被完全去掉了。　　3.一些全新的表单输入对象　　包括日期，URL，Email 地址，其它的对象则增加了对非拉丁字符的支持。HTML5 还引入了微数据，这一使用机器可以识别的标签标注内容的方法，使语义Web 的处理更为简单。总的来说，这些与结构有关的改进使内容创建者可以创建更干净，更容易管理的网页，这样的网页对搜索引擎，对读屏软件等更为友好。　　4.全新的，更合理的Tag　　多媒体对象将不再全部绑定在 object 或 embed Tag 中，而是视频有视频的Tag，音频有音频的 Tag。　　5.本地数据库　　这个功能将内嵌一个本地的SQL 数据库，以加速交互式搜索，缓存以及索引功能。同时，那些离线Web 程序也将因此获益匪浅。不需要插件的富动画。　　6.Canvas 对象　　将给浏览器带来直接在上面绘制矢量图的能力，这意味着用户可以脱离Flash 和Silverlight，直接在浏览器中显示图形或动画。　　7.浏览器中的真正程序　　将提供 API 实现浏览器内的编辑，拖放，以及各种图形用户界面的能力。内容修饰Tag 将被剔除，而使用CSS。　　8.Html5取代Flash在移动设备的地位。

重要标记

<video>标记

　　定义和用法：　　<video> 标签定义视频，比如电影片段或其他视频流。

<audio> 标记

　　定义和用法　　<audio> 标签定义声音，比如音乐或其他音频流。　　实例：　　一段简单的HTML 5 音频　　<audio src="someaudio.wav">　　您的浏览器不支持 audio 标签。　　</audio>

<canvas> 标记

　　定义和用法：　　<canvas> 标签定义图形，比如图表和其他图像。　　HTML5 的 canvas 元素使用JavaScript 在网页上绘制图像。　　画布是一个矩形区域，您可以控制其每一像素。　　canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。　　实例：　　通过 canvas 元素来显示一个红色的矩形：　　<canvas id="myCanvas"></canvas>　　<script type="text/javascript">　　var canvas=document.getElementById(\'myCanvas\');　　var ctx=canvas.getContext(\'2d\');　　ctx.fillStyle=\'#FF0000\';　　ctx.fillRect(0,0,80,100);　　</script>

程序接口

　　除了原先的DOM接口，HTML5增加了更多API,如：　　1．用于即时2D绘图的Canvas标签　　2．定时媒体回放　　3．离线数据库存储　　4．文档编辑　　5．拖拽控制　　6．浏览历史管理

元素变化

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

异常处理

　　HTML 5(text/html)浏览器将在错误语法的处理上更加灵活。HTML 5在设计时保证旧的浏览器能够安全的忽略掉新的HTML 5代码。与HTML 4.01相比，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: 指在HTML 4.01 中定义了该元素 5: 指在HTML 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。

事件属性
属性	值	描述	4	5

编辑本段标签属性

　　 HTML 5标签拥有属性。在每个标签的参考页中可以找到相应的特殊属性。这里列出的属性是通用于每个标签的核心属性和语言属性（有个别例外）。 acceskey a character 设置访问一个元素的键盘快捷键。不支持。 4 class class_rule orstyle_rule 元素的类名。 4 5 contenteditable true
false 设置是否允许用户编辑元素。 5 contentextmenu id of a menu element 给元素设置一个上下文菜单。 5 dir ltr
rtl 设置文本方向。 4 5 draggable true
false
auto 设置是否允许用户拖动元素。 5 id id_name 元素的唯一 id。 4 5 irrelevant true
false 设置元素是否相关。不显示非相关的元素。 5 lang language_code 设置语言码。 4 5 ref url or elementID 引用另一个文档或本文档上另一个位置。仅在 template 属性设置时使用。 5 registrationmark registration mark 为元素设置拍照。可规定于任何 <rule> 元素的后代元素，除了 <nest> 元素。 5 style style_definition 行内的样式定义。 4 5 tabindex number 设置元素的 tab 顺序。 4 5 template url or elementID 引用应该应用到该元素的另一个文档或本文档上另一个位置。 5 title tooltip_text 显示在工具提示中的文本。 4 5 HTML 5 标签中的新属性有：contenteditable, contextmenu, draggable, irrelevant, ref,registrationmark, template
HTML 5 中不再支持的属性：accesskey

标签属性
属性	值	描述	4	5

编辑本段发展趋势

　　HTML5从根本上改变了开发商开发Web应用的方式，从桌面浏览器到移动应用，这种语言和标准都正在影响并将继续影响着各种操作平台。　　在移动领域，大家争论不休的一个问题就是开发Web应用还是原生应用？而随着HTML 5标准的发展，两者之间的差异已经逐渐变得模糊，今天各大媒体都争相报道与HTML 5有关的东西，那么，HTML 5未来的发展趋势到底是什么？

1）移动优先

　　前天，appMobi获选ReadWriterWeb2012最具前途的公司，作为一家初创公司，这个奖公司首先专注于在移动平台上如何实现HTML 5的简单易用和无处不在。　　从如今层出不穷的移动应用就知道，在这个智能手机和将平板电脑大爆炸的时代，移动优先已成趋势，不管是开发什么，都以移动为主。　　如上文所说，此前一直困扰移动领域的问题就是开发Web应用还是原生应用。而如今，我们看见一些大型企业如《金融时报》在冲着HTM L5进军移动市场过程中，从App Store撤掉iPad原生应用而开发Web应用，同样表现出色。　　许多游戏开发商也将在移动Web应用中扮演中重要角色，移动Web应用优先的趋势将会持续到移动设备统治信息处理领域。其实用户根本不在乎你用什么工具开发了什么应用，不管是Web应用还是原生应用，只要好用就可以了。

2) 游戏开发者领衔“主演”

　　其实移动游戏开发商是从HTML5获益最多的一方，他们可利用这个平台逃脱付费游戏须向苹果支付的30%提成。在某种程度上，游戏就是移动平台销量最好的应用，也是吸引人们购买移动设备的一个重要因素。　　许多游戏开发商都被Facebook或者Zynga推动着发展，而未来的Facebook应用生态系统是基于HTML5的，尽管在HTML 5平台开发出游戏非常困难，但游戏开发商却都愿意那么做。通过PhoneGap及appmobi的XDK将Web应用游戏打包整合到原生应用中也是一种方式，Facebook差不多就这么干的——基于Web应用及浏览器，但却将之打包整合进原生应用。

3) 响应式设计&自动变化的屏幕尺寸

　　在HTML 5真的改变移动开发平台之前，必须要迈出重要一步，那就是“响应式设计”，也就是屏幕可以根据内容而自动调整大小。　　响应式设计最好的一个例子就是今年上线的BostonGlobe（观看视频），其屏幕能够根据任何内容而调整尺寸大小，在访问过其开发商Filament Group后才了解到，响应式设计也并非易事，一些基本概念设计必须从头开始，比如处理媒体库的RespondJS，而且处理来自第三方的图片和广告也是恼人的问题。　　要想做好响应式设计，就必须洞悉内容与屏幕之间的反馈关系，一家来自硅谷的响应式设计公司ZURB称，其实在过去的16年中，开发商就意识到响应式设计就要完全离开“流”，转而注重内容是如何在网页和移动设备中被处理的，这一过程还在继续，HTML 5会让它最终成为可能。

4 )设备访问

　　消除Web应用与原生应用界限的最大障碍就是浏览器访问移动设备基本特性的能力，比如照相机，通讯录，日历，加速器等，利用HTML5实现此能力方面，上文中提到的appMobi算是行业翘楚，在感恩节后开源了所有API。Mozilla也一直在努力通过移动浏览器Fennec来将强设备访问能力。　　对许多移动开发商来说，提高设备访问能力是HTML5最令人激动的革新，这意味着Web应用能够登陆移动设备而无需做任何PhoneGap式打包，游戏开发商当然最开心，因为某些特性对他们来说是封锁的，比如能整合到游戏中的加速器。　　这就开启了另一个可能的世界，比如能与云更好地整合（这有利于应用内购买，消息推送等）并提高游戏可玩性，有了HTML5这个平台，开发商可以不再依赖于Java语言，CSS3，HTML及其它程序语言。

5) 离线缓存

　　这个概念相当新潮，离线情况下，app也能照常运作，算是HTML 5充满魔力的一面，今年最好的离线缓存例子就是亚马逊Kindle的云阅读器，可以通过Firefox6以上版本，Chrome11以上版本，Safari5以上版本及iOS4以上版本浏览器将内容同步到所有Kindle系列设备，并能记忆用户在kindle图书馆的一切。　　亚马逊就这么实现了离线使用Web应用，许多专家人声称原生应用的末日即将到来，因为Web应用的使用变得简单，无摩擦，适用于任何一个平台或者无需平台。　　当然Mozilla的触角也伸到了这里，实际上，Mozilla想涉足任何一个HTML 5能渗透的领域，从Mozilla的移动蓝图，可以了解更多。

6) 开发工具的成熟

　　在今年八月份，Brian Fling曾写过一篇博文叫HTML5 Web应用开发剖析，提出了几点建议供从事HTML 5应用的开发者参考：　　要耐心，HTML5项目可能比开发其他任何项目好是都要长　　做好预算，这不像建网站那么简单，可能会耗费你大量资金　　找对开发者，你要记住，这对许多经验丰富的专家来说都非常难的事，那么你的团队也会觉得困难，所以一定要找对人，找到正确的方向　　要自食其力，你要知道，开发HTML 5项目，许多工具都要自制，不是现成的　　在技术界，按部就班的教条风格在这里行不通，会花掉许多不必要的资金，在移动领域，没有对与错，只有是否适合，一切以用户体验为重。

扩展阅读：

1
HTML5中国：http://www.html5cn.org

上一篇：BAT及主要互联网公司2014前端笔下一篇：Headline: Chrome浏览

Html