HTML5 新增元素整理

superxielei

浏览: 267157 次
性别:
来自: 沈阳

最近访客更多访客>>

eflys666

bisgoon

sd3870181

wuxiandeng

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

html5

整理了一下html5中新增的页面元素。效果是在Chrome下展示的效果。

<!DOCTYPE html>
<title>HTML5新增元素</title>
<header>
	header元素表示页面中的一个内容区块或整个页面的标题
</header>
<hr/>
<nav>
	导航
</nav>
<hr/>
<aside>aside元素表示article元素的内容之外的、与article元素的内容相关的辅助信息。</aside>
<article>
	article元素表示页面中的一块与上下文不相关的独立内容，比如博客中的一篇文章或报纸中的一篇文章。
</article>
<hr/>
<figure>
	<figcaption>PRC</figcaption>
	<p>figure元素表示一段独立的流内容，一般表示文档主体流内容中的一个独立单元。使用figcaption元素为figure元素组添加标题。</p>
</figure>
<hr/>
<section>
	section元素表示页面中的一个内容区块，比如章节、页眉、页脚或页面中的其他部分。它可以与<mark>h1</mark>,h2,h3,h4,h5,h6等元素结合起来使用，标示文档结构。
</section>
<hr/>
<details>
	<summary>HTML5</summary>
	details元素标示用户要求得到并且可以得到的细节信息。它可以与summary元素配合使用。summary元素提供标题或图例。标题是可见的，用户点击标题时，会显示出细节信息。
</details>
<hr/>
<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>
<hr/>
<keygen>
	keygen元素表示生产密钥
</keygen>
<hr/>
<output>
	output元素表示不同类型的输出，比如脚本的输出。
</output>
<hr/>
menu元素表示菜单列表。当希望列出表单控件时使用该标签。
<menu>
	<li><input type="checkbox" />Rad</li>
	<li><input type="checkbox" />Blue</li>
</menu>
<hr/>
<form>
	<menu>
		<li>Email:<input type="email" /></li>
		<li>url:<input type="url" /></li>
		<li>number:<input type="number" /></li>
		<li>range:<input type="range" /></li>
		<li>date:<input type="date" /></li>
		<li>month:<input type="month" name="test" value="value" /></li>
		<li>week:<input type="week" name="test" value="value" /></li>
		<li>time:<input type="time" name="test" value="value" /></li>
		<li>datetime:<input type="datetime" name="test" value="value" /></li>
		<li>datetime-local:<input type="datetime-local" name="test" value="value" /></li>
	</menu>
</form>
<hr/>
<footer>footer</footer>