HTML5的大纲讲解
（1）HTML5大纲分析工具网址：https://gsnedders.html5.org/outliner/（会呈现最终页面效果）
（2）HTML5大纲的编排规则：分为‘显示编排’和‘隐式编排’两种方式。
‘显示编排’是指明确使用section元素进行分块，每个内容区块内使用标题元素h1-h6；‘隐式编排’是指不使用section元素进行分块，而是根据标题元素h1-h6的级别进行自动创建区块，标题分级的规则是：如果新出现的标题比上一个标题级别低，那么将生成下级内容区块；如果级别高或者级别相同，那么将生成新的内容区块！
（3）“显示编排”demo如下，将代码复制到上面链接页面中，即可看到下面的效果图：
<!DOCTYPEhtml>
<html>
<head>
<meta charset='utf-8'>
<title>题目</title>
</head>
<body>
<h1>HTML5大纲显示编排</h1>
<section>
<h1>HTML5部分</h1>
<section>
<h2>HTML5的大纲（上）</h2>
<section>
<h3>标题1</h3>
<p>内容1</p>
</section>
<section>
<h3>标题2</h3>
<p>内容2</p>
</section>
<section>
<h3>标题3</h3>
<p>内容3</p>
</section>
</section>
<section>
<h2>HTML5的大纲（下）</h2>
<section>
<h3>标题1</h3>
<p>内容1</p>
</section>
</section>
</section>
</body>
</html>
效果图为：
注意：单独的header元素、footer元素不可以做大纲，因为大纲是根据标题元素h1-h6生成的，但可以在header元素中包含标题子元素，这样标题子元素中包含的内容或图片就可以生成大纲了
（4）“隐式编排”demo如下，将代码复制到上面链接页面中，即可看到下面的效果图：
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<title>题目</title>
</head>
<body>
<h1>HTML5大纲隐式编排</h1>
<p>隐式编排的内容</p>
<h2>子标题1</h2>
<p>子标题1的内容</p>
<h3>子子标题1</h3>
<p>子子标题1的内容</p>
<h2>子标题2</h2>
<p>子标题2的内容</p>
<h1>HTML5大纲隐式编排的例子</h1>
<p>隐式编排的内容</p>
</body>
</html>
效果图为：
扫一扫
2684
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
