欢迎莅临阿Q的项目

专业WP商业设计开发销售中心

HTML5 新增元素详解

2011年04月15日000
之前，我们只能用万能的div标签，并为其设置不同的id如header, footer, sidebar等来分别表达头部，底部或者侧栏等。而现在代码编写者不再需要为id的命名费尽心思，对于手机、阅读器等设备更有语义的好处。

一、HTML5新增结构元素

之前，我们只能用万能的div标签，并为其设置不同的id如header, footer, sidebar等来分别表达头部，底部或者侧栏等。而现在代码编写者不再需要为id的命名费尽心思，对于手机、阅读器等设备更有语义的好处。

HTML 5增加了新的结构元素来表达这些最常用的结构：

  1. section: 这可以表达书本的一部分或一章，或者一章内的一节
  2. header: 页面主体上的头部。并非head元素
  3. footer: 页面的底部（页脚），可以是一封邮件签名的所在
  4. nav: 到其他页面的链接集合
  5. article: 诸如blog, 杂志，纲要等之中的一条独立记录

举个例子，一个blog的首页，用HTML 5写的话，可以是这样：

[syntaxHighLighter brush="html"]

<!DOCTYPE html>
<html>
<head>
<title>HTML5 新增结构元素</title>
</head>

<body>
<header>
	<hgroup>
		<h1>Page title</h1>
		<h2>Page subtitle</h2>
	</hgroup>
	</header>

<nav>
	<ul>
		Navigation...
	</ul>
</nav>
<section>
	<article>
		<header>
			<h1>Title</h1>
		</header>
		<section>
			Content...
		</section>
	</article>
	<article>
		<header>
			<h1>Title</h1>
		</header>
		<section>
			Content...
		</section>
	</article>
</section>

<aside>
	Top links...
</aside>

<figure>
	<img src="..."/>
	<figcaption>Chart 1.1</figcaption>
</figure>

<footer>
	Copyright ©
	<time datetime="2010-11-08">2010</time>.
</footer>
</body>
</html>

[/syntaxHighLighter]

二、HTML5新增块级元素

  1. aside: 定义页面内容之外的内容，比如侧边栏
  2. figure: 定义媒介内容的分组，以及它们的标题
  3. figcaption: 媒介内容的标题说明
  4. dialog: 定义对话（会话）

aside可以用以表达注记、贴士、侧栏、摘要、插入的引用等诸如作为补充主体的内容。比如这样表达blog的侧栏：

[syntaxHighLighter brush="html"]

<aside>
	<h3>最新文章</h3>
	<ul>
		<li><a href="#" mce_href="#">文章标题</a></li>
	</ul>
</aside><>/pre[/syntaxHighLighter]

figure元素表示一个有说明的块级图片。比如：

[syntaxHighLighter brush="html"]
<figure>
	<figcaption>PRC</figcaption>
	<legend>Figure 1. JavaScript Alert Box.</legend>
	<img alt="图片可替换文本" src="img.png" mce_src="img.png" />
</figure>

[/syntaxHighLighter]

dialog元素用于表达人们之间的对话。在HTML 5中，dt用于表示说话者，而dd则用来表示说话者的内容。如：

[syntaxHighLighter brush="html"]

<dialog>
	<dt>悟空</dt>
	<dd>什么是幸福</dd>
	<dt>佛</dt>
	<dd>我请你穿越这片田野，去摘一朵最美丽的花，但是有个规则：你不能走回头路，而且你只能摘一次。</dd>
</dialog>

[/syntaxHighLighter]

三、HTML5新增行内语义标签元素

  1. mark: 定义有记号的文本
  2. time: 定义日期/时间
  3. meter: 定义预定义范围内的度量
  4. progress: 定义运行中的进度（进程）

mark元素用来标记一些不是那么需要着重强调的文本。

[syntaxHighLighter brush="html"]<p>今天别忘记了买 <mark>牛奶</mark>。</p>[/syntaxHighLighter]

time元素如其名，用来表达时间。它需要一个datetime的特性来标明机器能够认识的时间，如：

[syntaxHighLighter brush="html"]

<p>On Saturdays, we open at <time>09:00</time>.</p>
<p>The concert is <time datetime="2009-02-18">next Wednesday</time>.</p>
<p>We finally hit the road at <time datetime="2009-02-17T05:00-07:00">5am last Tuesday</time>.</p>

[/syntaxHighLighter]

meter元素表达特定范围内的数值。可用于薪水、百分比、分数等。比如：

[syntaxHighLighter brush="html"]

<p>您的分数是：
<meter value="88.7" min="0" max="100" low="65" high="96" optimum="100">B+</meter>.
</p>
<ul>
	<li><meter>25%</meter></li>
	<li><meter>1/4</meter></li>
	<li><meter>200 out of 800</meter></li>
	<li><meter>max: 100; current: 25</meter></li>
	<li><meter min="0" max="100" value="25"></meter></li>
</ul>
<dl>
	<dt>Width:</dt>
	<dd><meter min="0" max="200" value="12" title="millimeters">173mm</meter></dd>
	<dt>Height:</dt>
	<dd><meter min="0" max="100" value="2" title="millimeters">104mm</meter></dd>
</dl>

[/syntaxHighLighter]

可以使用 <progress> 标签来显示 JavaScript 中耗费时间的函数的进度。

[syntaxHighLighter brush="html"]

对象的下载进度：
<progress>
<span id="objprogress">85</span>%
</progress>

[/syntaxHighLighter]

四、HTML5新增行交互性标签元素

  1. details: 定义元素的细节
  2. datagrid: 定义树列表 (tree-list) 中的数据
  3. datalist: 定义选项列表
  4. menu: 定义菜单列表
  5. command: 定义命令按钮

details用来表示一段具体的内容，但是内容默认可能不显示，通过某种手段（如点击）与legend交互才显示出来。这跟现在各种通过JavaScript隐藏一段内容，在点击后才显示出来的做法有些类似。比如：

[syntaxHighLighter brush="html"]<details open="open">This document was written in 2010.</details>[/syntaxHighLighter]

datagriddatagrid用来控制数据，可以由用户或者脚本来更新，比如：

[syntaxHighLighter brush="html"]

<datagrid>
<ol>
	<li>(datagrid row 0)</li>
	<li>(datagrid row 1)
		<ol style="list-style-type:lower-alpha;">
			<li>(datagrid row 1,0)</li>
			<li>(datagrid row 1,1)</li>
		</ol>
	</li>
	<li>(datagrid row 2)</li>
</ol>
</datagrid>

[/syntaxHighLighter]

datalist 标签定义选项列表。请与 input 元素配合使用该元素，来定义 input 可能的值。datalist 及其选项不会被想显示出来，它仅仅是合法的输入值列表。请使用 input 元素的 list 属性来绑定 datalist。

[syntaxHighLighter brush="html"]

<h4>Example 1 (for HTML 5 browsers)</h4>
<p>
	<label>
	Enter your favorite cartoon character:<br />
	<input type="text" name="favCharacter" list="characters">
	<datalist id="characters">
		<option value="Homer Simpson">
		<option value="Bart">
		<option value="Fred Flinstone">
	</datalist>
	</label><br />
</p>
<h4>Example 2 (for both legacy and HTML 5 browsers)</h4>

[/syntaxHighLighter]

menu 在HTML 2就存在了，不过HTML 4把它废弃了。HTML 5废物利用，并在期内加上command元素。autosubmit为true时，表单控件改变时自动提交。label为菜单定义一个可见的标注，type是表现的方式，默认为list，还有context和toolbar。
[syntaxHighLighter brush="html"]

<menu label="菜单" type="toolbar" autosubmit="true">
	<li><input type="checkbox" />Red</li>
	<li><input type="checkbox" />blue</li>
</menu>
<menu>
	<command type="command">Click Me!</command>
</menu>

[/syntaxHighLighter]

五、HTML5新增行多媒体标签元素

  1. video: 定义视频
  2. audio: 定义音频
  3. source: 媒介元素（比如 <video> 和 <audio>）定义媒介资源

video标签定义视频，比如电影片段或其他视频流：

[syntaxHighLighter brush="html"]

<video src="/video/pass-countdown.ogg" width="300" height="150" controls>
	<p>If you are reading this, it is because your browser does not support the HTML5 video element.</p>
</video>

[/syntaxHighLighter]

audio标签定义声音，比如音乐或其他音频流：

[syntaxHighLighter brush="html"]<audio src="someaudio.wav">
您的浏览器不支持 audio 标签。
</audio>[/syntaxHighLighter]

[syntaxHighLighter brush="html"]

<audio>
	<source src="/music/good_enough.wma" type="audio/x-ms-wma">
	<source src="/music/good_enough.mp3" type="audio/mpeg">
	<p>If you are reading this, it is because your browser does not support the HTML 'audio' element.</p>
</audio>

[/syntaxHighLighter]

<body>   <header>     <hgroup>       <h1>Page title</h1>       <h2>Page subtitle</h2>     </hgroup>   </header>   <nav>    <ul>      Navigation...    </ul>   </nav>   <section>    <article>      <header>        <h1>Title</h1>      </header>      <section>        Content...      </section>    </article>    <article>      <header>        <h1>Title</h1>      </header>      <section>        Content...      </section>    </article>   </section>   <aside>    Top links...   </aside>   <figure>     <imgsrc="..."/>     <figcaption>Chart 1.1</figcaption>   </figure>   <footer>    Copyright ©    <timedatetime="2010-11-08">2010</time>.   </footer></body>
点赞讨厌收藏
如果喜欢本文，请分享给朋友们

    相关文章