网页内容区块编排技巧-优快云博客

关于内容区块的编排，可以分为“显式编排”和“隐式编排”。

显式编排内容区块：

是指明确使用section等元素创建文档结构，在每个内容区块内使用标题h1-h6,hgroup等，这个更清晰

<body>
	<h1>网页级内容区块标题</h1>
	<p>网业级内容区块的正文</p>
	<section>
	   <h2>section级内容区块的标题</h2>
	   <p>section级内容区块的标题</p>
	</section>
</body>

隐式编排内容区块：

是指不明确使用section等元素，而是根据页面中所书写的各级标题h1-h6,hgroup等把内容区块自动创建出来，因为HTML5分析器只要看到书写了某个级别的标题

就会判断存在相对应的内容区块

<body>
	<h1>网页级内容区块标题</h1>
	<p>网业级内容区块的正文</p>
	<h2>section级内容区块的标题</h2>
	<p>section级内容区块的正文</p>
</body>

标题分级：

隐式编排的时候按照如下的规则自动生成内容区块

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

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

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

网页编排示例：

<!DOCTYPE html>
<meta charset="utf-8">
<head>
	<title>网页编排示例</title>
</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>
		<small>版权所有：呼呼</small>
	</footer>
</body>

点击打开链接