关注前端开发
关注用户体验

Html5新标签解释及用法

HTML 5 是一个新的网络标准,目标在于取代现有的 HTML 4.01, XHTML 1.0 and DOM Level 2 HTML 标准。它希望能够减少浏览器对于需要插件的丰富性网络应用服务(plug-in-based rich internet application,RIA),如Adobe Flash, Microsoft Silverlight, 与 Sun JavaFX 的需求。

HTML 5 提供了一些新的元素和属性,反映典型的现代用法网站。其中有些是技术上类似 <div> 和 <span> 标签,但有一定含义,例如 <nav>(网站导航块)和 <footer>。这种标签将有利于搜索引擎的索引整理、小屏幕装置和视障人士使用。同时为其他浏览要素提供了新的功能,通过一个标准接口,如 <audio> 和 <video> 标记。

之前的一篇:HTML5 Shiv – 让该死的IE系列支持HTML5吧介绍了如何让所有浏览器都支持html5标签,你可以放心大胆的用了!

一些过时的 HTML 4 标记将取消,其中包括纯粹用作显示效果的标记,如 <font> 和 <center>,因为它们已经被 CSS 取代。还有一些透过 DOM 的网络行为(via)。

下面我们来看一下HTML 5提供的一些新的标签用法以及和HTML 4的区别。

<article>标签定义外部的内容。比如来自一个外部的新闻提供者的一篇新的文章,或者来自 blog 的文本,或者是来自论坛的文本。亦或是来自其他外部源内容。
HTML5:<article></article>
HTML4:<div></div>

<aside>标签定义 article 以外的内容。aside 的内容应该与 article 的内容相关。
HTML5:<aside>Aside 的内容是独立的内容,但应与文档内容相关。</aside>
HTML4:<div>Aside 的内容是独立的内容,但应与文档内容相关。</div>

<audio> 标签定义声音,比如音乐或其他音频流。
HTML5:<audio src="someaudio.wav">您的浏览器不支持 audio 标签。</audio>
HTML4:<object type="application/ogg" data="someaudio.wav"><param name="src" value="someaudio.wav"></object>

<canvas> 标签定义图形,比如图表和其他图像。这个 HTML 元素是为了客户端矢量图形而设计的。它自己没有行为,但却把一个绘图 API 展现给客户端 JavaScript 以使脚本能够把想绘制的东西都绘制到一块画布上。
HTML5:<canvas id="myCanvas" width="200" height="200"></canvas>
HTML4:<object data="inc/hdr.svg" type="image/svg+xml" width="200" height="200"></object>

<command> 标签定义命令按钮,比如单选按钮、复选框或按钮。
HTML5: <command onclick=cut()" label="cut">
HTML4: none

<datalist> 标签定义可选数据的列表。与 input 元素配合使用,就可以制作出输入值的下拉列表。
HTML5: <datalist></datalist>
HTML4: see combobox.

<details> 标签定义元素的细节,用户可进行查看,或通过点击进行隐藏。与 <legend> 一起使用,来制作 detail 的标题。该标题对用户是可见的,当在其上点击时可打开或关闭 detail。
HTML5: <details></details>
HTML4: <dl style="display:hidden"></dl>

<embed> 标签定义嵌入的内容,比如插件。
HTML5: <embed src="horse.wav" />
HTML4: <object data="flash.swf"  type="application/x-shockwave-flash"></object>

<figcaption> 标签定义 figure 元素的标题。”figcaption” 元素应该被置于 “figure” 元素的第一个或最后一个子元素的位置。
HTML5: <figure><figcaption>PRC</figcaption></figure>
HTML4: none

<figure> 标签用于对元素进行组合。使用 <figcaption> 元素为元素组添加标题。
HTML5: <figure><figcaption>PRC</figcaption><p>The People's Republic of China was born in 1949...</p></figure>
HTML4: <dl><h1>PRC</h1><p>The People's Republic of China was born in 1949...</p></dl>

<footer> 标签定义 section 或 document 的页脚。典型地,它会包含创作者的姓名、文档的创作日期以及/或者联系信息。
HTML5: <footer></footer>
HTML4: <div></div>

<header> 标签定义 section 或 document 的页眉。
HTML5: <header></header>
HTML4: <div></div>

<hgroup> 标签用于对网页或区段(section)的标题进行组合。
HTML5: <hgroup></hgroup>
HTML4: <div></div>

<keygen> 标签定义生成密钥。
HTML5: <keygen>
HTML4: none

<mark>主要用来在视觉上向用户呈现那些需要突出的文字。<mark>标签的一个比较典型的应用就是在搜索结果中向用户高亮显示搜索关键词。
HTML5: <mark></mark>
HTML4: <span></span>

<meter> 标签定义度量衡。仅用于已知最大和最小值的度量。必须定义度量的范围,既可以在元素的文本中,也可以在 min/max 属性中定义。
HTML5: <meter></meter>
HTML4: none

<nav> 标签定义导航链接的部分。
HTML5: <nav></nav>
HTML4:<ul></ul>

<output> 标签定义不同类型的输出,比如脚本的输出。
HTML5: <output></output>
HTML4: <span></span>

<progress> 标签运行中的进程。可以使用 <progress> 标签来显示 JavaScript 中耗费时间的函数的进程。
HTML5: <progress></progress>
HTML4: none

<rp> 标签在 ruby 注释中使用,以定义不支持 ruby 元素的浏览器所显示的内容。
HTML5: <ruby>漢 <rt><rp>(</rp>ㄏㄢˋ<rp>)</rp></rt></ruby>
HTML4: none

<rt> 标签定义字符(中文注音或字符)的解释或发音。
HTML5: <ruby>漢 <rt> ㄏㄢˋ </rt></ruby>
HTML4: none

<ruby> 标签定义 ruby 注释(中文注音或字符)。
HTML5: <ruby>漢 <rt><rp>(</rp>ㄏㄢˋ<rp>)</rp></rt></ruby>
HTML4: none

<section> 标签定义文档中的节(section、区段)。比如章节、页眉、页脚或文档中的其他部分。
HTML5: <section></section>
HTML4: <div></div>

<source> 标签为媒介元素(比如 <video> 和 <audio>)定义媒介资源。
HTML5: <source>
HTML4: <param>

<summary> 标签包含 details 元素的标题,”details” 元素用于描述有关文档或文档片段的详细信息。”summary” 元素应该是 “details” 元素的第一个子元素。
HTML5: <details><summary>HTML 5</summary>This document teaches you everything you have to learn about HTML 5.</details>
HTML4: none

<time> 标签定义日期或时间,或者两者。
HTML5: <time></time>
HTML4: <span></span>

<video> 标签定义视频,比如电影片段或其他视频流。
HTML5: <video src="movie.ogg" controls="controls">您的浏览器不支持 video 标签。</video>
HTML4:<object type="video/ogg" data="movie.ogv"><param name="src" value="movie.ogv"></object>

赞(21)
未经允许不得转载:大前端 » Html5新标签解释及用法
分享到: 更多 (0)

评论 16

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
  1. #14

    These moles might be irregular in dimensions and coloration and that is what makes them such a wellness threat. If you have been born with this problem you could also be more probably to develop Melanoma and so you might need to get the needed precautions when it comes to guarding your skin and your health.

    Jordan Mellin2周前 (05-13)回复
  2. #13

    I loved as much as you’ll receive carried out right here. The sketch is attractive, your authored material stylish. nonetheless, you command get bought an nervousness over that you wish be delivering the following. unwell unquestionably come more formerly again as exactly the same nearly very often inside case you shield this increase.

    Nonton Anime2周前 (05-10)回复
  3. #12

    Hey! Someone in my Facebook group shared this site with us so I came to take a look. I’m definitely loving the information. I’m book-marking and will be tweeting this to my followers! Terrific blog and excellent design.

    cat tales2周前 (05-08)回复
  4. #11

    I simply had to say thanks yet again. I do not know the things I would have made to happen in the absence of those ways contributed by you relating to such a theme. It previously was a real terrifying circumstance in my circumstances, but noticing your specialized fashion you processed the issue forced me to jump with gladness. I’m happy for your information and then believe you comprehend what a powerful job that you’re getting into educating some other people through the use of a web site. I know that you have never come across any of us.

    huidspecialist1个月前 (04-17)回复
  5. #10

    pumpkins, and put in some little kid disney halloween music hope ya have a good time

    Gala Woolum2个月前 (04-08)回复
  6. #9

    Hey there! I just wish to offer you a big thumbs up for the excellent information you have right here on this post. I’ll be coming back to your website for more soon.

    Apex Legends Season 12个月前 (04-02)回复
  7. #8

    Good info. Lucky me I discovered your website by chance (stumbleupon). I’ve saved it for later!

    Apex Legends DPS2个月前 (03-31)回复
  8. #7

    Good post. I study one thing more challenging on totally different blogs everyday. It is going to all the time be stimulating to learn content material from different writers and observe a bit of one thing from their store. I prefer to make use of some with the content material on my blog whether you don’t mind. Natually I provide you with a hyperlink in your web blog. Thanks for sharing.

    my singing monsters2个月前 (03-28)回复
  9. #6

    i got pregnant a couple of months ago and right now i am choosing the right kind of maternity clothes that is comfortable-

    Delfina Koyanagi3个月前 (03-11)回复
  10. #5

    和没说一样啊,来这里看吧,比这清晰详细多了。http://www.frontwow.com/learninghtml5/ 😈

    shallon7年前 (2012-02-04)回复
  11. #4

    还不错,就是不够详细,建议在此基础上细细解析

    蜜瓜8年前 (2011-02-06)回复
  12. #3

    html 5很强啊。好像苹果也都支持?

    John8年前 (2011-01-30)回复
  13. #2

    QQ弹窗强制升级浏览器,我就学习HTML5 😈

    聊IT评论网8年前 (2011-01-30)回复
    • 真要等到那个时候你就OUT啦,哈哈

      浩子8年前 (2011-01-30)回复
  14. #1

    支持你一下 记得更新哦!很棒额、、

    丰禾8年前 (2011-01-28)回复

themebetter 国内更好的WordPress主题服务商

立即前往