黎清龙

2017-08-26 19:22

html5 article & section

本文作者:IMWeb 黎清龙 原文出处:IMWeb社区 未经同意,禁止转载

html5 article & section

关于 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 元素的话,结果是和没有包裹一样的!

小结

纵观我们项目的页面,文档大纲都是惨不忍睹

所以这些基本功感觉还是要捡起来的~

1条评论

    您需要 注册 一个IMWeb账号或者 才能进行评论。