<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link href="style.css" rel="stylesheet">
</head>
<body>
<div class="head">整个页面的顶部区域</div>
<div class="content">
/* 这是页面导航部分，可以放置导航栏或是文章的结构目录 */
<nav>左侧导航界面</nav>
/* 这是整个文章的区域 */
<article>
/* 这是文章的标题区域 */
<head>
<h1>整个文章的标题</h1> /* 如果有副标题，则需要引入<hgroup>元素 */
/* <time> 和pubdate各主流浏览器都还未支持，不过可以先用起来。
<p>文章发表于<time pubdate>2017-09-26</time></p>
</head>
/* 下面是文章的正文部分 */
<section>
<h2>这是分章节的标题<h2>
<p>这是分章节的内容</p>
</section>
<section>
<h2>这是第二章节的标题</h2>
<p>这是第二章节的内容</p>
</section>
/* 这是文章的footer，一般为版权等信息，需要的话加上，不需要也可以不要 */
<footer>著作版权等</footer>
</article>
</div>
/* 暂时考虑放一些页面支持的插件，可以显示一些信息，或者执行一些命令。 */
<div class="footer">整个页面的底部区域</div>
</body>
</html>
整个页面的核心区域为article区域，整个文档的结构有section构成，section需要有自己的标题，并且在article的内部，如果需要再往下分，则section中再套入section的标签，section可以靠它下面的h1~h6来区分层级，这样层级结构就出来了。这样的结构，最末级元素就是p了，通过这样的方式进行结构化分层设计。
这样的分层设计还是需要对seciton的层级进行单独的定义，seciton的层级还是无法明确，要嘛就像python一样，通过缩进来表示层级，还不如直接规定层级完事，方便抽出文章的结构。
网友评论