HTML5 新增标签

HTML5的新标签包括:

      <article>、<aside>、<progress><header><footer>、<main> 

      <mark>、<nav><audio><video><source>、<address>

      <canvas>、<meter>、<datalist>、<details>、<output>

      <section>、<embed>、<figcaption>、<figure>、<track>、

      <command>、<time>、<summary>、<dialog>、<bdi>、

      <rp>、<rt>、<ruby>、<wbr>、<menuitem>

<canvas> 标签

<canvas> 标签定义图形,比如图表和其他图像。

<canvas> 标签只是图形容器,您必须使用脚本来绘制图形。

大多数 Canvas 绘图 API 都没有定义在 <canvas> 元素本身上,而是定义在通过画布的 getContext() 方法获得的一个“绘图环境”对象上。

<canvas> 标记和 SVG 以及 VML 之间的差异

<canvas> 标记和 SVG 以及 VML 之间的一个重要的不同是,<canvas> 有一个基于 JavaScript 的绘图 API,而 SVG 和 VML 使用一个 XML 文档来描述绘图。

这两种方式在功能上是等同的,任何一种都可以用另一种来模拟。从表面上看,它们很不相同,可是,每一种都有强项和弱点。例如,SVG 绘图很容易编辑,只要从其描述中移除元素就行。

要从同一图形的一个 <canvas> 标记中移除元素,往往需要擦掉绘图重新绘制它。

<article> 标签

<article> 标签规定独立的自包含内容。

一篇文章应有其自身的意义,应该有可能独立于站点的其余部分对其进行分发。

<article> 元素的潜在来源:

  • 论坛帖子
  • 报纸文章
  • 博客条目
  • 用户评论

 

<main> 标签

<main> 标签规定文档的主要内容。

<main> 元素中的内容对于文档来说应当是唯一的。它不应包含在文档中重复出现的内容,比如侧栏、导航栏、版权信息、站点标志或搜索表单。

注释:在一个文档中,不能出现一个以上的 <main> 元素。<main> 元素不能是以下元素的后代:<article>、<aside>、<footer>、<header> 或 <nav>。

<figure> 标签

<figure> 标签规定独立的流内容(图像、图表、照片、代码等等)。

figure 元素的内容应该与主内容相关,但如果被删除,则不应对文档流产生影响

<address> 标签

<address> 标签定义文档或文章的作者/拥有者的联系信息。

如果 <address> 元素位于 <body> 元素内,则它表示文档联系信息。

如果 <address> 元素位于 <article> 元素内,则它表示文章的联系信息。

<address> 元素中的文本通常呈现为斜体。大多数浏览器会在 address 元素前后添加折行。

提示:<address> 标签不应该用于描述通讯地址,除非它是联系信息的一部分。

           <address> 元素通常连同其他信息被包含在 <footer> 元素中。

<footer> 标签

<footer> 标签定义文档或节的页脚。

<footer> 元素应当含有其包含元素的信息。

页脚通常包含文档的作者、版权信息、使用条款链接、联系信息等等。

可以在一个文档中使用多个 <footer> 元素

提示:<footer> 元素内的联系信息应该位于 <address> 标签中。

<header> 标签

<header> 标签定义文档的o页眉(介绍信息)

<nav> 标签

<nav> 标签定义导航链接的部分。

提示:如果文档中有“前后”按钮,则应该把它放到 <nav> 元素中。

<aside> 标签

<aside> 标签定义其所处内容之外的内容。

aside 的内容应该与附近的内容相关。

提示:<aside> 的内容可用作文章的侧栏。

<output> 标签

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

<progress> 标签

<progress> 标签标示任务的进度(进程)

提示:请结合 <progress> 标签与 JavaScript 一同使用,来显示任务的进度。

注释:<progress> 标签不适合用来表示度量衡(例如,磁盘空间使用情况或查询结果)。如需表示度量衡,请使用 <meter> 标签代替。

<audio> 标签

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

提示:可以在开始标签和结束标签之间放置文本内容,这样老的浏览器就可以显示出不支持该标签的信息。

<video> 标签

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

提示:可以在开始标签和结束标签之间放置文本内容,这样老的浏览器就可以显示出不支持该标签的信息。

<source> 标签

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

<source> 标签允许您规定可替换的视频/音频文件供浏览器根据它对媒体类型或者编解码器的支持进行选择。

<track> 标签

<track> 标签为诸如 video 元素之类的媒介规定外部文本轨道。

用于规定字幕文件或其他包含文本的文件,当媒介播放时,这些文件是可见的。

<time> 标签

<time> 标签定义公历的时间(24 小时制)或日期,时间和时区偏移是可选的。

该元素能够以机器可读的方式对日期和时间进行编码,这样,举例说,用户代理能够把生日提醒或排定的事件添加到用户日程表中,搜索引擎也能够生成更智能的搜索结果。

 <mark> 标签

<mark> 标签定义带有记号的文本。请在需要突出显示文本时使用 <m> 标签。

<section> 标签

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

<command> 标签

command 元素表示用户能够调用的命令。

<command> 标签可以定义命令按钮,比如单选按钮、复选框或按钮。

只有当 command 元素位于 menu 元素内时,该元素才是可见的。否则不会显示这个元素,但是可以用它规定键盘快捷键。

<datalist> 标签

<datalist> 标签定义选项列表。与 input 元素配合使用该元素,来定义 input 可能的值。

datalist 及其选项不会被显示出来,它仅仅是合法的输入值列表。

使用 input 元素的 list 属性来绑定 datalist。

<details> 标签

<details> 标签用于描述文档或文档某个部分的细节。

提示:与<summary>标签配合使用可以为 details 定义标题。标题是可见的,用户点击标题时,会显示出 details。

<summary> 标签

<summary> 标签包含 details 元素的标题,"details" 元素用于描述有关文档或文档片段的详细信息。

提示:请与 <datails>标签一起使用。标题是可见的,当用户点击标题时会显示出详细信息。

注释:"summary" 元素应该是 "details" 元素的第一个子元素。

<meter> 标签

<meter> 标签定义已知范围或分数值内的标量测量。也被称为 gauge(尺度)。

例子:磁盘用量、查询结果的相关性,等等。

注释:<meter> 标签不应用于指示进度(在进度条中)。如果标记进度条,使用 <progress> 标签。

<embed> 标签

<embed> 标签定义嵌入的内容,比如插件。

<bdi> 标签

bdi 指的是 bidi 隔离。

<bdi> 标签允许您设置一段文本,使其脱离其父元素的文本方向设置。

在发布用户评论或其他您无法完全控制的内容时,该标签很有用。

<dialog> 标签

<dialog> 标签定义对话框或窗口。

<figcaption> 标签

<figcaption> 标签定义figure 元素的标题(caption)。

"figcaption" 元素应该被置于 "figure" 元素的第一个或最后一个子元素的位置。

<menuitem> 标签

<menuitem> 标签定义用户可以从弹出菜单调用的命令/菜单项目

<rp> 标签

<rp> 标签在 ruby 注释中使用,以定义不支持 ruby 元素的浏览器所显示的内容。

ruby 注释是中文注音或字符。

在东亚使用,显示的是东亚字符的发音。

与 <ruby> 以及 <rt> 标签一同使用:

ruby 元素由一个或多个字符(需要一个解释/发音)和一个提供该信息的 rt 元素组成,还包括可选的 rp 元素,定义当浏览器不支持 "ruby" 元素时显示的内容。

提示:支持 "ruby" 元素的浏览器不会显示 "rp" 元素的内容。

<rt> 标签

<rt> 标签定义字符(中文注音或字符)的解释或发音。

ruby 注释是中文注音或字符。

在东亚使用,显示的是东亚字符的发音。

与 <ruby> 以及 <rt> 标签一同使用:

ruby 元素由一个或多个字符(需要一个解释/发音)和一个提供该信息的 rt 元素组成,还包括可选的 rp 元素,定义当浏览器不支持 "ruby" 元素时显示的内容。

<ruby> 标签

<ruby> 标签定义 ruby 注释(中文注音或字符)。

在东亚使用,显示的是东亚字符的发音。

与 <ruby> 以及 <rt> 标签一同使用:

ruby 元素由一个或多个字符(需要一个解释/发音)和一个提供该信息的 rt 元素组成,还包括可选的 rp 元素,定义当浏览器不支持 "ruby" 元素时显示的内容。

<wbr> 标签

Word Break Opportunity (<wbr>) 规定在文本中的何处适合添加换行符。

提示:如果单词太长,或者您担心浏览器会在错误的位置换行,那么您可以使用 <wbr> 元素来添加 Word Break Opportunity(单词换行时机)。

猜你喜欢

转载自blog.csdn.net/zmeilin/article/details/81161695