HTML5新标签语义及用法

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

HTML5中新增标签
  • <article> : 定义外部的内容,外部内容可以是来自一个外部的新闻提供者的一篇新的文章,或者来自 blog 的文本,或者是来自论坛的文本。亦或是来自其他外部源内容。
  • <aside> : 定义 article 以外的内容。aside 的内容应该与 article 的内容相关。
  • <audio> : 定义声音,比如音乐或其他音频流。
  • <canvas> : 定义图形,比如图表和其他图像。
  • <command> : 定义命令按钮,比如单选按钮、复选框或按钮。
  • <datalist> : 定义选项列表。请与 input 元素配合使用该元素,来定义 input 可能的值。datalist 及其选项不会被想显示出来,它仅仅是合法的输入值列表。请使用 input 元素的 list 属性来绑定 datalist。
  • <details> : 用于描述文档或文档某个部分的细节。与 <summary>标签配合使用可以为 details 定义标题。标题是可见的,用户点击标题时,会显示出 details。
  •  : 定义嵌入的内容,比如插件。
  • <figure> : 定义媒介内容的分组,以及它们的标题。用于对元素进行组合。
  • <figcaption> : 定义 figure 元素的标题。”figcaption” 元素应该被置于 “figure” 元素的第一个或最后一个子元素的位置。
  • <footer> : 定义 section 或 document 的页脚。
  • <header> : 定义文档的页眉(介绍信息)。
  • <hgroup> : 定义有关文档中的 section 的信息。用于对网页或区段(section)的标题进行组合。
  • <keygen> : 定义生成密钥。
  • <mark> : 定义带有记号的文本。请在需要突出显示文本时使用 <m> 标签。
  • <meter> : 定义度量衡。仅用于已知最大和最小值的度量。
  • <nav> : 定义导航链接的部分。
  • <output> : 定义不同类型的输出,比如脚本的输出。
  • <progress> : 定义任何类型的任务的进度。可以使用 <progress> 标签来显示 JavaScript 中耗费时间的函数的进度。
  • <ruby> : 定义 ruby 注释(中文注音或字符)。
  • <rp> : 定义若浏览器不支持 ruby 元素显示的内容。
  • <rt> : 定义字符(中文注音或字符)的解释或发音。
  • <section> : 定义文档中的节(section、区段)。比如章节、页眉、页脚或文档中的其他部分。
  • <source> : 为媒介元素(比如 <video> 和 <audio>)定义媒介资源。
  • <summary> : 定义 details 元素的标题。
  • <time> : 定义日期或时间,或者两者。
  • <video> : 定义视频,比如电影片段或其他视频流。
HTML5舍弃的标签
  • <acronym> :定义首字母缩写。
  • <applet> : 定义嵌入的 applet。
  • <basefont> : 定义基准字体。(请使用 CSS 代替。)
  • <big> : 定义大号文本。
  • <center> : 定义居中的文本。
  • <dir> : 定义目录列表。
  • <font> : 规定文本的字体外观、字体尺寸和字体颜色。(请使用 CSS 向元素添加样式。)
  • <frame> : 定义子窗口(框架)。
  • <frameset> : 定义框架的集。
  • <isindex> : 定义单行的输入域。
  • <noframes> : 向浏览器显示无法处理框架的提示文本。noframes 元素位于 frameset 元素中。
  • <s> : 定义加删除线的文本。(请使用 CSS 代替。)
  • <strike> : 定义加删除线的文本。(请使用 CSS 代替。)
  • <tt> : 定义打字机文本。(请使用 CSS 代替。)
  • <u> : 定义下划线文本。(请使用 CSS 代替。)
  • <xmp> : 定义预格式文本。
建议使用CSS替代

以下元素都是短语元素。并不反对使用它们,但是通过使用样式表,可能取得更丰富的效果。

  • <em> : 呈现为被强调的文本。
  • <strong> : 定义重要的文本。
  • <dfn> : 定义一个定义项目。
  • <code> : 定义计算机代码文本。
  • <samp> : 定义样本计算机代码。
  • <kbd> : 定义键盘文本。它表示文本是从键盘上键入的。它经常用在与计算机相关的文档或手册中。
  • <var> : 定义变量。您可以将此标签与 <pre> 及 <code> 标签配合使用。
  • <cite> : 定义引用。可使用该标签对参考文献的引用进行定义,比如书籍或杂志的标题。
HTML中很少用到的标签(但可能很有用)
  • <abbr> : 表示一个缩写形式,比如 “Inc.”、”etc.”。最初是在 HTML 4.0 中引入的,表示它所包含的文本是一个更长的单词或短语的缩写形式。
  • <address> : 定义文档作者或拥有者的联系信息。
  • <bdo> : 定义文本显示的方向。
  • <blockquote> : 定义摘自另一个源的块引用。<blockquote> 与 </blockquote> 之间的所有文本都会从常规文本中分离出来,经常会在左、右两边进行缩进,而且有时会使用斜体。也就是说,块引用拥有它们自己的空间。
  • <dl> : 定义一个定义列表。
  • <dt> : 定义一个定义列表中的一个项目,以及 dialog 中的角色。
  • <dd> : 定义一个定义列表中对项目的描述。
  • <del> : 定义文档中已删除的文本。(与<ins>一起使用,描述文档中的更新和修正。)
  • <ins> : 定义插入文本。(与<del> 标签一起使用,来描述对文档的更新和修正。)
  • <fieldset> : 将表单内的相关元素分组。
  • <legend> : 为 <fieldset>、<figure> 以及 <details> 元素定义标题。
  • <menu> : 定义菜单列表。当希望列出表单控件时使用该标签。(请使用 CSS 来定义列表的类型。)
  • <q> : 定义一个短的引用。(浏览器经常会在这种引用的周围插入引号。)

扩展阅读:
让IE系列浏览器支持HTML5新标签

“HTML5新标签语义及用法”的8个回复

  1. Howdy, I want to ask you something. Is this a wordpress blog? My business is wondering about switching our webpage from Blogger to wordpress, ya think this is possible? Additionally did you build the following theme by yourself some how? Cheers for the help!

发表评论

电子邮件地址不会被公开。 必填项已用*标注