HTML5的革新:结构之美(3)
作者:iefans 发布时间:2011-04-16 10:57:00
如何用HTML 5新标签结构化元素
通过上面的示例,我们了解到HTML 5的新标签对结构化的革新,但切换到实际使用中,该如何恰当的使用它们呢?我想这也是很多HTML 5学习者想问一个问题。如同XHTML语义化一样,HTML 5语义化标签的使用也应该遵循:每个标签都有它特定的意义,而语义化,就是让我们在适当的位置用适当的标签,以更好的让人和机器(机器可理解为浏览器可理解为搜索引擎)都一目了然。比如header标签一般是页面的第一个区块元素(header标签也可用于类型的头部元素中,比如文章区块的标题),包含的了页面的主题信息;nav标签一般用于包裹导航信息;footer一般用来包裹页面底部信息;等等。
下面是我参考HTML 5手册列出的结构类常用新标签的语 * 释及使用指引:
<header>标签
手册释义:定义 section 或 document 的页眉。
使用指引:一般用来包含页面头部,也可用于其他区域头部,比如article头部:
<header>
<hgroup>
<h1>网站标题</h1>
<h1>网站副标题</h1>
</hgroup>
</header>
<hgroup>标签
手册释义:用于对网页或区段(section)的标题进行组合。
使用指引:用于标题类的组合,比如文章的标题与副标题:
<hgroup>
<h1>这是一篇介绍HTML 5结构标签的文章</h1>
<h2>HTML 5的革新</h2>
</hgroup>
<nav>标签
手册释义:定义导航链接的部分。
使用指引:用于定义页面的导航部分:
<nav>
<ul>
<li>HTML 5</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</nav>
<aside>标签
定义 article 以外的内容。aside 的内容应该与 article 的内容相关。
使用指引:用于成节的内容,会在文档流中开始一个新的节,一般用于与文章内容相关的边栏:
<aside>
<h1>作者简介</h1>
<p>Mr.Think,专注Web前端技术的凡夫俗子。</p>
</aside>
<section>标签
手册释义:定义文档中的节(section)。比如章节、页眉、页脚或文档中的其他部分。
使用指引:用于成节的内容,会在文档流中开始一个新的节:
<section>
<h1>section是什么?</h1>
<h2>一个新的章节</h2>
<article>
<h2>关于section</h1>
<p>section的介绍</p>
…
</article>
</section>
猜你喜欢
- 大部分数据库管理员拥有某种形式的数据库元数据库,他们依赖其来跟踪范围很广的Microsoft SQL Server环境。我利用连接的服务器和
- <%Class Cls_TemplateDim RegDim PageDim CIDDim SIDDim RuleDim Conten
- 段时间作项目中,遇到使用视图的问题,以前的工作中很少遇到视图,认为直接用表就ok了,何须视图呢?下面我来讲述一下它的功用:以往当我们查询数据
- SQL语句先前写的时候,很容易把一些特殊的用法忘记,我特此整理了一下SQL语句操作,方便自己写SQL时方便一点,想贴上来,一起看看,同时希望
- HTTP应答头概述 Web服务器的HTTP
- 需要准备的工具:SQL Query Analyzer和SqlExec Sunx Version第一部分:去掉xp_cmdshell保护系统的
- 如何显示存储在BLOB字段中的图像?showimges.asp' 在浏览器上单独显示图像 <%@ 
- 导言(Introduction)这个提案描述了如何在jQuery的核心库中增加模板支持。更为特别是,这个提案描述了一个新的jQuery方法-
- 当服务器必须提供与两个或更多个网络或网络子网的连接时,典型的方案是使用多宿主计算机。此计算机通常位于外围网络(也称为 DMZ、外围安全区域或
- 作为入门者来说,了解JavaScript中timer的工作方式是很重要的。通常它们的表现行为并不是那么地直观,而这是因为它们都处在一个单一线
- 一、连接MYSQL:格式: mysql -h主机地址 -u用户名 -p用户密码1、例1:连接到本机上的MYSQL。首先在打开DOS窗口,然后
- 最近对H1的讨论很多(在文章内容页中),大致有以下两种情况:H1应该用于文章的标题上H1应该用于站点的标题上相信大多数人都偏向第一种方式:用
- 如果您的网站面向世界各地的冲浪者或者对外开展商贸活动,检测来访者的浏览器语言类型就非常现实了。这里提供的脚本可以检测流露;浏览器
- 看如下asp代码:<%@ codepage="65001" %><!-- 
- asp之家注:作为一个学习asp的爱好者,相信一定接触过session,我们经常使用session来作为会员登录的验证,当然也可以使用COO
- 文章主要描述的是SQL Server数据库和Oracle数据库行转列的一种比较典型操作方法,对于有些业务来说,数据在表中的存储与其最终的Gr
- 相信大家对于常见 CSS BUG 的处理已经相对比较熟悉,例如:IE6 Three Pixel Gap、IE5/6 Doubled Floa
- 不论什么时候,只要系统带有多个设备,而这些设备的性能又各不相同,就存在从慢速设备到快速设备不断更换工作地点以改善系统性能的可能性,这就是缓存
- 感谢LeXRus为我们带来他费心制作的教程,这是一个非常棒的动画教程,教程中不仅有 DW MX 2004 的操作方法,还有一些代码的写作和方
- 作者: Alan Pearce原文: Multi-Column Layouts Climb Out of the Box地址: http:/