加入收藏 | 联系我们 | 网站地图 | 繁体中文
您的位置:首页>资讯中心>>行业新闻  
html5

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

 

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

<video>标记

  定义和用法:

 

  <video> 标签定义视频,比如电影片段或其他视频流。

 

  实例:

 

  一段简单的 HTML5 视频

 

  <video src="movie.ogg" controls="controls">

 

  您的浏览器不支持 video 标签。

 

  </video>

 

  各系统与浏览器支持的视频格式:

 

  <th>HTML5 </th>

 

  

操作系统 浏览器 支持度
Windows Internet Explorer 6 不支持 如果安装了Google Chrome Frame,支持HTML5
  Internet Explorer
7
不支持 如果安装了Google Chrome Frame,支持HTML5
  Internet Explorer
8
不支持 如果安装了Google Chrome Frame,支持HTML5
  Internet Explorer
9
支持(mp4,webm*) *如果安装了VP8解码器
  Firefox < 3.5 不支持  
  Firefox 3.5, 3.6 支持(ogg)  
  Firefox 4 支持(webm,ogg)  
  Chrome < 3 不支持  
  Chrome 3, 4, 5 支持(mp4,ogg)  
  Chrome 6 支持(mp4,webm,ogg)  
  Opera < 10.5 不支持  
  Opera 10.5 支持(ogg)  
  Opera 10.6 支持(webm,ogg)  
  Opera 11 支持(webm,ogg)  
  Safari 3.1, 4, 5 支持(mp4)  
Mac Safari < 3.1 不支持  
  Safari 3.1, 4, 5 支持(mp4)  
  Firefox < 3.5 不支持  
  Firefox 3.5, 3.6 支持(ogg)  
  Firefox 4 支持(webm,ogg)  
  Chrome < 3 不支持  
  Chrome 3, 4, 5 支持(mp4,ogg)  
  Chrome 6 支持(mp4,webm,ogg)  
  Opera < 10.5 不支持  
  Opera 10.5 支持(ogg)  
  Opera 10.6 支持(webm,ogg)  
  Opera 11 支持(webm,ogg)  
Linux Firefox < 3.5 不支持  
  Firefox 3.5, 3.6 支持(ogg)  
  Firefox 4 支持(webm,ogg)  
  Chrome < 3 不支持  
  Chrome 3, 4, 5 支持(mp4,ogg)  
  Chrom 支持(mp4,webm,ogg)  
  Opera < 10.5 不支持  
  Opera 10.5 支持(ogg)  
  Opera 10.6 支持(webm,ogg)  
  Opera 11 支持(webm,ogg)  
  Konqueror < 4.4 不支持  
  Konqueror 4.4+ 支持(ogg)  
iOS (iPhone,iOS 3,4)
Safari
支持(mp4) 早期版本(iOS 1,2)不支持HTML5视频
  (iPad, iOS 3.2)
Safari
支持(mp4)  
Android Android 2.1, 2.2 支持(mp4)
  Android 2.3 支持(mp4)
 

  ogg = 带有 Thedora 视频编码和 Vorbis 音频编码的 Ogg 文件。

 

  mp4 = 带有 H.264 视频编码和 AAC 音频编码的 MPEG 4 文件。

<audio> 标记

  定义和用法

 

  <audio> 标签定义声音,比如音乐或其他音频流。

 

  实例:

 

  一段简单的 HTML 5 音频

 

  <audio src="someaudio.wav">

 

  您的浏览器不支持 audio 标签。

 

  </audio>

 

  音频格式:

 

  当前,audio 元素支持三种音频格式:

 

  

  IE 8 Firefox 3.5 Opera 10.5 Chrome 3.0 Safari 3.0
Ogg Vorbis    
MP4      
Wav    

<canvas> 标记

  定义和用法:

 

  <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>

 

  什么是 Canvas?

 

  HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。

 

  画布是一个矩形区域,您可以控制其每一像素。

 

  canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。

 

标签变化

  HTML5 吸取了 XHTML 2 一些建议,包括一些用来改善文档结构的功能,比如,新的 HTML 标签 header, footer, dialog, aside, figure 等的使用,将使内容创作者更加语义地创建文档,之前的开发者在这些场合是一律使用 div 的。

 

  HTML5 还包含了一些将内容和展示分离的努力,b 和 i 标签依然存在,但它们的意义已经和之前有所不同,这些标签的意义只是为了将一段文字标识出来,而不是为了为它们设置粗体或斜体式样。u,font,center,strike 这些标签则被完全去掉了。

 

  新标准适用了一些全新的表单输入对象,包括日期,URL,Email 地址,其它的对象则增加了对非拉丁字符的支持。HTML5 还引入了微数据,一种使用机器可以识别的标签标注内容的方法,使语义 Web 的处理更为简单。总的来说,这些与结构有关的改进使内容创建者可以创建更干净,更容易管理的网页,这样的网页对搜索引擎,对读屏软件等更为友好。

 

  全新的,更合理的 Tag,多媒体对象将不再全部绑定在 object 或 embed Tag 中,而是视频有视频的 Tag,音频有音频的 Tag。

 

  本地数据库。这个功能将内嵌一个本地的 SQL 数据库,以加速交互式搜索,缓存以及索引功能。同时,那些离线 Web 程序也将因此获益匪浅。不需要插件的富动画。

 

  Canvas 对象将给浏览器带来直接在上面绘制矢量图的能力,这意味着我们可以脱离 Flash 和 Silverlight,直接在浏览器中显示图形或动画。一些最新的浏览器,除了 IE,已经开始支持 Canvas。

 

  浏览器中的真正程序。将提供 API 实现浏览器内的编辑,拖放,以及各种图形用户界面的能力。内容修饰 Tag 将被剔除,而使用 CSS。

 

程序接口

  除了原先的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。

 

异常处理

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

 

标签列表

  按字母顺序排列的标签列表

 

  ?4: 指示在 HTML 4.01 中定义了该元素

 

  ?5: 指示在 HTML 5 中定义了该元素

 

  标签 描述 4 5

 

  <!--...--> 定义注释。 4 5

 

  <!DOCTYPE> 定义文档类型。 4 5

 

  <a> 定义超链接。 4 5

 

  <abbr> 定义缩写。 4 5

 

  <acronym> HTML 5 中不支持。定义首字母缩写。 4

 

  <address> 定义地址元素。 4 5

 

  <applet> HTML 5 中不支持。定义 applet。 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

 

  <hr> 定义水平线。 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> 定义有记号的文本。 5

 

  <menu> 定义菜单列表。 4 5

 

  <meta> 定义元信息。 4 5

 

  <meter> 定义预定义范围内的度量。 5

 

  <nav> 定义导航链接。 5

 

  <noframes> HTML 5 中不支持。定义 noframe 部分。 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。 5

 

  <select> 定义可选列表。 4 5

 

  <small> 定义小号文本。 4 5

 

  <source> 定义媒介源。 5

 

  <span> 定义文档中的 section。 4 5

 

  <strike> HTML 5 中不支持。定义加删除线的文本。 4

 

  <strong> 定义强调文本。 4 5

 

  <style> 定义样式定义。 4 5

 

  <sub> 定义下标文本。 4 5

 

  <summary> 定义 details 元素的标题。 5

 

  <sup> 定义上标文本。 4 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

 

应用前景

  HTML 最近的一次升级是1999年12月发布的 HTML 4.01。自那以后,发生了很多事。最初的浏览器战争已经结束,Netscape 灰飞烟灭,IE5 作为赢家后来又发展到 IE6, IE7,IE8到IE9。Mozilla Firefox 从 Netscape 的死灰中诞生,并跃居第二位。苹果和 Google 各自推出自己的浏览器,而小家碧玉的 Opera 仍然嘤嘤嗡嗡地活着,并以推动 Web 标准为己命。我们甚至在手机和游戏机上有了真正的 Web 体验,感谢 Opera,iPhone 以及 Google 已经推出的 Android。

 

  然而这一切,仅仅让 Web 标准运动变得更加混乱,HTML 5 和其它标准被束之高阁,结果,HTML 5 一直以来都是以草案的面目示人。

 

  于是,一些公司联合起来,成立了一个叫做 Web Hypertext Application Technology Working Group (Web 超文本应用技术工作组 - WHATWG) 的组织,他们将重新拣起 HTML 5。这个组织独立于 W3C,成员来自 Mozilla, KHTML/Webkit 项目组,Google,Apple,Opera 以及微软。尽管 HTML 5 草案不会在短期内获得认可,但 HTML 5 总算得以延续。