结构之美:html5新的布局标签

结构之美:主要是HTML5新增了一些新的布局元素(header、section、article、nav、aside、footer、hgroup、figure、menu),用来标识页面结构,使得html更语义化。下面我们就来看看HTML5中新增的一些关键的结构性标记。

header标签

手册释义:定义 section 或 document 的页头。
使用指引:一般用来包含页面头部,也可用于其他区域头部,比如article头部:

<header>
	<hgroup>
		<h1>瑞克互动博客</h1>
		<h1>关注前端开发,CSS hack,HTML3CSS3,网页设计,游戏等新动态</h1>
	</hgroup>
</header>

section标签

手册释义:定义文档中的节(section)。比如章节、页眉、页脚或文档中的其他部分。
使用指引:用于成节的内容,会在文档流中开始一个新的节:

<section>
	<h1>section是什么?</h1>
	<h2>一个新的章节</h2>
	<article>
		<h2>关于section</h1>
		<p>section的介绍</p>
		…
	</article>
</section>

article标签

手册释义:定义外部的内容。比如来自一个外部的新闻提供者的一篇新的文章,或者来自 blog 的文本,或者是来自论坛的文
本。亦或是来自其他外部源内容。
使用指引:顾名思义,一般用于文章区块:

<article>
	<header>
		<hgroup>
			<h1>这是一篇介绍HTML 5结构标签的文章</h1>
			<h2>HTML 5的结构之美</h2>
		</hgroup>
		<time datetime=”2011-12-30″>2011.12.30</time>
	</header>
	<p>文章内容详情</p>
</article>

nav标签

手册释义:定义导航链接的部分。
使用指引:用于定义页面的导航部分:

<nav>
	<ul>
		<li>HTML 5</li>
		<li>CSS</li>
		<li>JavaScript</li>
	</ul>
</nav>

 

aside标签

定义 article 以外的内容。aside 的内容应该与 article 的内容相关。
使用指引:用于成节的内容,会在文档流中开始一个新的节,一般用于与文章内容相关的边栏:

<aside>
	<h1>瑞克简介</h1>
	<p>瑞克互动博客,关注前端开发,CSS hack,HTML3CSS3,网页设计,游戏等新动态</p>
</aside>

footer标签

手册释义:定义 section 或 document 的页脚。典型地,它会包含创作者的姓名、文档的创作日期以及/或者联系信息。
使用指引:一般用来包裹整个页面通用底部,也可用于其他区域底部,比如article底部:

<footer>
	COPYRIGHT@reake.com
</footer>

hgroup标签

手册释义:用于对网页或区段(section)的标题进行组合。
使用指引:用于标题类的组合,比如文章的标题与副标题:

<hgroup>
	<h1>这是一篇介绍HTML 5结构标签的文章</h1>
	<h2>HTML5的结构之美</h2>
</hgroup>

figure标签

手册释义:用于对元素进行组合。
使用指引:多用于图片与图片描述组合:

<figure>
	<img src=”img.gif” alt=”figure标签”  title=”figure标签” />
	<figcaption>这儿是图片的描述信息</figcaption>
</figure>

menu标签

手册释义:定义菜单列表。当希望列出表单控件时使用该标签。
使用指引:使用于菜单类区块,用来定义菜单列表或菜单选项:

<menu>
	<li>HTML 5</li>
	<li>CSS</li>
	<li>JavaScript</li>
</menu>

HTML5的其他新标签,请参考记录HTML5新增的标签和属性这篇文章,或请自行查询HTML5手册和HTML5标签/属性/事件及兼容性图文速查表。

此条目发表在HTML5/CSS3分类目录,贴了, , 标签。将固定链接加入收藏夹。

结构之美:html5新的布局标签》有1条回应

  1. Pingback引用通告: 开始学习和记录html5 | 瑞克互动

发表回复

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