[Design]HTML5的新标签

关注Web发展的人们都几乎都知道html5的强大,都在讨论html5是否会取代并淘汰flash。
本文并不对html5是否取代flash进行讨论,我们来看看html5除了有名的标签外,还有什么新成员添加到html标签大家族。

HTML5新增的标签分别有:

  • 图形媒体:canvas标签 audio标签 embed标签 video标签 source标签
  • 文档结构:header标签 nav标签 section标签 footer标签
  • 文档内容:article标签 aside标签 details标签 summary标签 hgroup标签 time标签 figure标签 figcaption标签
  • 表单元素:command标签 datalist标签
  • 其他文本:ruby标签 rp标签 rt标签 keygen标签 mark标签 meter标签 output标签 progress标签

canvas标签

标签定义图形,比如图表和其他图像。
这个 HTML 元素是为了客户端矢量图形而设计的。它自己没有行为,但却把一个绘图 API 展现给客户端 JavaScript 以使脚本能够把想绘制的东西都绘制到一块画布上。

//<![CDATA[
var canvas=document.getElementById(‘myCanvas’);
var ctx=canvas.getContext(‘2d’);
ctx.fillStyle=’#FF0000′;
ctx.fillRect(0,0,80,100);
//]]>

audio标签

标签定义声音,比如音乐或其他音频流。
提示:可以在开始标签和结束标签之间放置文本内容,这样老的浏览器就可以显示出不支持该标签的信息。

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

embed标签

标签定义嵌入的内容,比如插件。
提示:您无法在开始标签和结束标签之间写文本,来说明旧式的浏览器不支持该标签,就像 和 。

video标签

标签定义视频,比如电影片段或其他视频流。
提示:可以在开始标签和结束标签之间放置文本内容,这样老的浏览器就可以显示出不支持该标签的信息。

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

source标签

标签为媒介元素(比如 和 )定义媒介资源。

header标签

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

nav标签

标签定义导航链接的部分。
提示:如果文档中有“前后”按钮,则应该把它放到 元素中。

section标签

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

  

PRC

  

The People’s Republic of China was born in 1949…

footer标签

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

article标签

标签定义外部的内容。比如来自一个外部的新闻提供者的一篇新的文章,或者来自 blog 的文本,或者是来自论坛的文本。亦或是来自其他外部源内容。
注释: 标签的内容独立于文档的其余部分。

Netscape Is Dead

AOL has now officially announced that they will end
the development and support of all Netscape browsers.

aside标签

标签定义 article 以外的内容。aside 的内容应该与 article 的内容相关。
注释: 的内容可用作文档的侧栏。

Aside 的内容是独立的内容,但应与文档内容相关。

details标签

标签定义元素的细节,用户可进行查看,或通过点击进行隐藏。
提示:与

一起使用,来制作 detail 的标题。该标题对用户是可见的,当在其上点击时可打开或关闭 detail。

HTML 5
This document teaches you everything you have to learn about HTML 5.

summary标签

标签包含 details 元素的标题,”details” 元素用于描述有关文档或文档片段的详细信息。
提示:请与 标签一起使用。标题是可见的,当用户点击标题时会显示出详细信息。
注释:”summary” 元素应该是 “details” 元素的第一个子元素。

HTML 5
This document teaches you everything you have to learn about HTML 5.

hgroup标签

标签用于对网页或区段(section)的标题进行组合。
提示:请使用 元素为元素组添加标题。

  

Welcome to my WWF

  

For a living planet

The rest of the content…

time标签

标签定义日期或时间,或者两者。
实例:

我们在每天早上 9:00 开始营业。

我在 情人节 有个约会。

figure标签

标签用于对元素进行组合。
提示:请使用 元素为元素组添加标题。

  

PRC

  

The People’s Republic of China was born in 1949…

figcaption标签

标签定义 figure 元素的标题。
“figcaption” 元素应该被置于 “figure” 元素的第一个或最后一个子元素的位置。
提示:”figcaption” 元素应该被置于 “figure” 元素的第一个或最后一个子元素的位置。

  PRC
  

The People’s Republic of China was born in 1949…

command标签

标签定义命令按钮,比如单选按钮、复选框或按钮。

datalist

标签定义可选数据的列表。与 input 元素配合使用,就可以制作出输入值的下拉列表。

  

  

  

ruby标签

标签定义 ruby 注释(中文注音或字符)。
在东亚使用,显示的是东亚字符的发音。
与 以及 标签一同使用:
ruby 元素由一个或多个字符(需要一个解释/发音)和一个提供该信息的 rt 元素组成,还包括可选的 rp 元素,定义当浏览器不支持 “ruby” 元素时显示的内容。

漢 (ㄏㄢˋ)

rp标签

标签在 ruby 注释中使用,以定义不支持 ruby 元素的浏览器所显示的内容。
ruby 注释是中文注音或字符。
在东亚使用,显示的是东亚字符的发音。
与 以及 标签一同使用:
ruby 元素由一个或多个字符(需要一个解释/发音)和一个提供该信息的 rt 元素组成,还包括可选的 rp 元素,定义当浏览器不支持 “ruby” 元素时显示的内容。
提示:支持 “ruby” 元素的浏览器不会显示 “rp” 元素的内容。

漢 (ㄏㄢˋ)

rt标签

标签定义字符(中文注音或字符)的解释或发音。
ruby 注释是中文注音或字符。
在东亚使用,显示的是东亚字符的发音。
与 以及 标签一同使用:
ruby 元素由一个或多个字符(需要一个解释/发音)和一个提供该信息的 rt 元素组成,还包括可选的 rp 元素,定义当浏览器不支持 “ruby” 元素时显示的内容。
提示:支持 “ruby” 元素的浏览器不会显示 “rp” 元素的内容。

漢 (ㄏㄢˋ)

keygen标签

标签定义生成密钥。

mark标签

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

Do not forget to buy milk today.

meter标签

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

5
2 out of 10
30%

output标签

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

progress标签

标签定义运行中的进度(进程)。
可以使用 标签来显示 JavaScript 中耗费时间的函数的进度。
提示:请使用 标签来显示下载的进度。

对象的下载进度:

85%

Advertisements

发表评论

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / 更改 )

Twitter picture

You are commenting using your Twitter account. Log Out / 更改 )

Facebook photo

You are commenting using your Facebook account. Log Out / 更改 )

Google+ photo

You are commenting using your Google+ account. Log Out / 更改 )

Connecting to %s

%d 博主赞过: