关于 article 和 section 的区别也是老生常谈的事了
但是你确定自己已经了解它们了吗?
你确定自己已经可以很好的运用它们了吗?
这里通过 html5 outliner 工具来进行学习
通过一系列的例子,我们来看下文档大纲的变化
首先是一个最简单的例子
<body>
<h1>文章列表</h1>
<article>
<header>
<h1>文章1 title</h1>
<p>文章1 描述</p>
</header>
<h2>文章1 小节1 title</h2>
<p>文章1 小节1 内容</p>
<h2>文章1 小节2 title</h2>
<p>文章1 小节2 内容</p>
</article>
<article>
<header>
<h1>文章2 title</h1>
<p>文章2 描述</p>
</header>
<h2>文章2 小节1 title</h2>
<p>文章2 小节1 内容</p>
<h2>文章2 小节2 title</h2>
<p>文章2 小节2 内容</p>
</article>
</body>
这是一个最简单的例子,一个文章列表,以及2篇文章
我们先看下 outliner 的结果:
通过这个小例子,感觉 outliner 很不智能,感觉就是搜索 hN
然后进行缩进
然后,尝试在第1篇文章添加评论列表,如下:
<article>
<header>
<h1>文章1 title</h1>
<p>文章1 描述</p>
</header>
<h2>文章1 小节1 title</h2>
<p>文章1 小节1 内容</p>
<h2>文章1 小节2 title</h2>
<p>文章1 小节2 内容</p>
<h2>文章1 评论列表</h2>
<article>
<header>
<h1>文章1 评论1 title</h1>
</header>
<p>文章1 评论1 内容</p>
</article>
<article>
<header>
<h1>文章1 评论2 title</h1>
</header>
<p>文章1 评论2 内容</p>
</article>
</article>
先看结果,看图说话
这里会发现,评论也用了 article,但是这些评论的结构和外面是同级的,这样看起来就很奇怪了
于是,我们尝试添加 section
<article>
<header>
<h1>文章1 title</h1>
<p>文章1 描述</p>
</header>
<h2>文章1 小节1 title</h2>
<p>文章1 小节1 内容</p>
<h2>文章1 小节2 title</h2>
<p>文章1 小节2 内容</p>
<section>
<h2>文章1 评论列表</h2>
<article>
<header>
<h1>文章1 评论1 title</h1>
</header>
<p>文章1 评论1 内容</p>
</article>
<article>
<header>
<h1>文章1 评论2 title</h1>
</header>
<p>文章1 评论2 内容</p>
</article>
</section>
</article>
结果如下:
可以看到,只是简单的给评论列表添加了一个 section 元素,文档结构变得明朗起来
如果添加包裹的不是 section,而是 div 元素的话,结果是和没有包裹一样的!
纵观我们项目的页面,文档大纲都是惨不忍睹
所以这些基本功感觉还是要捡起来的~