HTML5教程:3.3 HTML 5结构

最新推荐文章于 2024-07-18 11:48:33 发布

weixin_30432179

最新推荐文章于 2024-07-18 11:48:33 发布

阅读量78

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/wangyexx/archive/2012/07/17/2595757.html

版权

前面两节中详细介绍了在HTML 5中具体新增了哪些结构元素，以及这些元素的定义和使用方法。接下来，让我们看一下在HTML 5中进行总体页面布局的时候，具体应该怎样来综合运用这些结构元素。

一、大纲

通过使用新的结构元素，HTML 5的文档结构比大量使用div元素的HTML 4的文档结构清晰、明确了很多。如果再规划好文档结构的大纲，就可以创建出对于阅读者或屏幕阅读程序来说，都很清晰易读的文档结构。

所谓大纲，简单来说就是文档中各内容区块的结构编排。内容区块可以使用标题元素（h1—h6）来展示各级内容区块的标题。综合运用各级内容区块的标题创建好文档的目录后，该目录就是一个大纲了。

关于内容区块的编排，可以分为“显示编排”与“隐式编排”两种方式。

1．显式编排内容区块

显式编排是指明确使用section等元素创建文档结构，在每个内容区块内使用标题（h1—h6、hgroup等），如示例1所示。

示例1：

折叠 XML/HTML 代码复制内容到剪贴板

<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>显式编排内容区块示例</title>
</head>
<body>
<h1>网页级内容区块标题</h1>
<p>网页级内容区块的正文</p>
<section>
<h2>section级内容区块的标题</h2>
<p>section级内容区块的正文</p>
</section>
</body>

2．隐式编排内容区块

所谓隐式编排，是指不明确使用section等元素，而是根据页面中所书写的各级标题(h1—h6、hgroup)等把内容区块自动创建出来。因为HTML 5分析器只要看到书写了某个级别的标题，就会判断存在相对应的内容区块。示例2为一个隐式编排内容区块的示例。WANGYEXX.COM

示例2：

折叠 XML/HTML 代码复制内容到剪贴板

<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>隐式编排内容区块示例</title>
</head>
<body>
<h1>网页级内容区块标题</h1>
<p>网页级内容区块的正文</p>
<h2>section级内容区块的标题</h2>
<p>section级内容区块的正文</p>
</body>

将这两种编排方式进行对比，很明显，显式编排更加清晰、易读。

3．标题分级

不同的标题有不同的级别，h1的级别最高，h6的级别最低。隐式编排时按如下规则自动生成内容区块：

★ 如果新出现的标题比上一个标题级别低，生成下级内容区块。

★ 如果新出现的标题比上一个标题级别高或级别相等，生成新的内容区块。

第一条规则的示例与前面一样，现在我们来看关于第二条规则的示例，如示例3所示。

示例3：

折叠 XML/HTML 代码复制内容到剪贴板

<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>第二条规则示例</title>
</head>
<body>
<section>
<h2>section级别的内容区块的标题</h2>
<p>section级别的内容区块的正文</p>
<!—因为下面的标题级别比上一个标题级别高，所以自动创建新的内容区块 -->
<h1>新的section级别的内容区块的标题</h1>
<p>新的section级别的内容区块的正文</p>
</section>
</body>

如果把上一个示例改成显式编排，如示例4所示。

示例4：

折叠 XML/HTML 代码复制内容到剪贴板

<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>第二条规则的显式编排示例</title>
</head>
<body>
<section>
<h2>section级别的内容区块的标题</h2>
<p>section级别的内容区块的正文</p>
</section>
<section>
<h1>新的section级别的内容区块的标题</h1>
<p>新的section级别的内容区块的正文</p>
</section>
</body>

因为隐式编排容易让自动生成的整个文档结构与想要的文档结构不一样，而且也容易引起文档结构的混乱，所以请尽量使用显式编排。

4．不同的内容区块可以使用相同级别的标题

另外，不同的内容区块可以使用相同级别的标题。例如，父内容区块与子内容区块可以使用相同级别的标题h1。这样做的好处是：每个级别的标题都可以单独设计，如果既需要“整个网页的标题”，又需要“文章的标题”（譬如书写文档时），这样做将会带来很大的便利性，如示例5所示。

示例5：

折叠 XML/HTML 代码复制内容到剪贴板

<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>不同的内容区块可以使用相同级别的标题</title>
</head>
<body>
<h1>网页的标题</h1>
<article>
<header>
<hgroup>
<h1>文章标题</h1>
<h2>文章子标题</h2>
</hgroup>
<p>文章正文</p>
</header>
</article>
</body>

5．网页编排示例

基于以上讲解过的知识点，让我们来看应该怎样编排网页的内容。示例6为一个标准博客网页的示例，在这个示例中，具备了一个标准博客网页所需具备的基本要素，只缺少为了使用样式而补充添加的div元素。

示例6：

折叠 XML/HTML 代码复制内容到剪贴板

<!DOCTYPE html>
<head>
<title>网页编排示例</title>
<meta charset="UTF-8">
</head>
<body>
<header>
<h1>网页标题</h1>
<nav>
<ul>
<li><a href="index.html">首页</a></li>
<li><a href="help.html">帮助</a></li>
</ul>
</nav>
</header>
<article>
<hgroup>
<h1>文章主标题</h1>
<h2>文章子标题</h2>
</hgroup>
<p>文章正文</p>
<section class="comments">
<article>
<h1>评论标题</h1>
<p>评论正文</p>
</article>
</section>
</article>
<footer>
</footer>
</body>

在这个示例中，使用了嵌套article元素的方式，将关于评论的article元素嵌套在了主article元素中，在HTML 5中，推荐使用这种方式。

二、对新的结构元素使用样式

因为很多浏览器尚未对HTML 5中新增的结构元素提供支持，我们无法知道客户端使用的浏览器是否支持这些元素，所以需要使用CSS追加如下声明，目的是通知浏览器页面中使用的HTMIL 5中新增元素都是以块方式显示的，如下所示。

折叠 CSS 代码复制内容到剪贴板

//追加block声明
article, aside, dialog, figure, footer, headar, legend, nav, section { display : block; }
//正常使用样式
nav{float:left;width:20%}
article{float:rightright;width:79%;}

另外，IE 8及之前的浏览器是不支持用CSS的方法来使用这些尚未支持的结构元素的，为了在Internet Explorer浏览器中也能正常使用这些结构元素，需要使用JavaScript脚本，如下所示：

折叠 XML/HTML 代码复制内容到剪贴板

<script>
document.createElement("header");
document.createElement("nav");
document.createElement("article");
document.createElement("footer");
</script>
<style>
//正常使用样式
nav{float:left;width:20%;}
article{float:right;width:79%;}
</style>

尽管这段JavaScript脚本在其他浏览器中是不需要的，但它不会对这些浏览器造成什么不良影响。另外，到了IE 9之后，这段脚本就不需要了。

三、article元素的样式

一个网页中可能有多个独立的article元素，每一个article元素都允许有自己的标题与脚注等从属元素，并允许对自己的从属元素单独使用样式。譬如一个网页中的样式可能如下所示：

折叠 CSS 代码复制内容到剪贴板

header{display:block;color:red;text-align:rightright;}
aritcle header{color:blue;text-align:center;}

点击下载HTML5教程案例资源返回《深入探索HTML5教程》教程列表

转载请注明本文地址:http://www.wangyexx.com/html/html5/1616.html

转载于:https://www.cnblogs.com/wangyexx/archive/2012/07/17/2595757.html

weixin_30432179

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML5教程:3.3 HTML 5结构

前面两节中详细介绍了在HTML 5中具体新增了哪些结构元素，以及这些元素的定义和使用方法。接下来，让我们看一下在HTML 5中进行总体页面布局的时候，具体应该怎样来综合运用这些结构元素。一、大纲通过使用新的结构元素，HTML 5的文档结构比大量使用div元素的HTML 4的文档结构清晰、明确了很多。如果再规划好文档结构的大纲，就可以创建出对于阅读者或屏幕阅读程序来说，都很清晰易读的文档结构...
复制链接

扫一扫