html5 article & section

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

小结

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

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏风中追风

分布式进阶__动物园园长 zookeeper

数据的发布/订阅(配置中心:disconf) 、 负载均衡(dubbo利用了zookeeper机制实现负载均衡) 、

42017
来自专栏MoeLove

Git 本地仓库和裸仓库

通常我们会用 git init 命令来将我们所在的目录转换为一个 Git 本地仓库或者初始化一个新的空仓库。

1252
来自专栏吴锐的专栏

深入浅出腾讯云 CDN:缓存篇

原有 CDN 服务器的存储引擎在处理视频文件,以及复杂的 HTTP 协议内容上出现了瓶颈,改造迫在眉睫。

1.8K0
来自专栏杨建荣的学习笔记

Python的兼容性很无助

直觉的思路就是使用pip来检查,但是发现pip不可用了。最开始以为是pip导致的。修复方法如下:

1010
来自专栏java系列博客

cookies与session 的区别

1283
来自专栏kevin-blog

解决在/etc/porfile下设置环境变量以后zsh没有起效的问题

今天在添加java的环境变量的时候,我在/etc/profile添加了环境变量,因为我使用的是zsh,在source /etc/profile以后,zsh的主题...

1831
来自专栏hbbliyong

运行yum时出现/var/run/yum.pid已被锁定,PID为xxxx的另一个程序正在运行的问题解决

删除文件后再次运行yum可用。 --------------------- 作者:黯淡荣耀 来源:CSDN 原文:https://blog.csdn.ne...

1152
来自专栏酷玩时刻

H5仿微信支付键盘

视频地址:https://github.com/Javen205/IJPay-Demo/blob/master/doc/pay_keyboard.m4v

1002
来自专栏用户3254834的专栏

如何利用好Cookie和Session来提高储存信息的安全性

在Web发展历史中,session与cookie都是伟大的存在,其初衷都是为了记住用户在网站上的浏览信息,如果没有其他替代品的出现,几乎所有web站点都离不开s...

761
来自专栏Java帮帮-微信公众号-技术文章全总结

Linux查看日志命令【面试+工作】

2174

扫码关注云+社区