html5 article & section
html5 article & section
IMWeb前端团队
发布于 2019-12-03 15:57:00
发布于 2019-12-03 15:57:00
关于 article & section
关于 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 元素的话，结果是和没有包裹一样的！
小结
纵观我们项目的页面，文档大纲都是惨不忍睹
所以这些基本功感觉还是要捡起来的~
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2017-08-26 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录