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 条评论
登录 后参与评论

相关文章

来自专栏ml

javaSE基础之记事本编程

     首先安装好jdk和jre,之后进行如下操作:           1. 将代码记事本----》cmd--->javac 文件名.java ----->...

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

Python的兼容性很无助

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

1310
来自专栏java系列博客

cookies与session 的区别

1383
来自专栏marsggbo

coursera 视频总是缓冲或者无法观看的解决办法

注意!!!该方法针对Windows用户,亲测有效。 1.用管理员权限记事本打开host文件 2.将如下内容复制到文件末尾 52.84.246.90 ...

2345
来自专栏技术博文

linux 设置中文版man手册

作为CentOS 新手,看懂英文man固然重要,不过配置好中文man也可以让自己更快速地学习! 1. 下载中文man包 源码的网址:https://src.fe...

3505
来自专栏老安的博客

docker 容积硬盘扩容小坑一个

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

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

3334
来自专栏全栈之路

VUE之组件全局方法

全局方法其实是js自身就可以实现的方法,具体实现其实很简单, 比如加个日志显示组件:

2983
来自专栏Django中文社区

前言

Django 是使用 Python 编写的一个开源 Web 框架,可以用它来快速搭建一个高性能的网站。 Django makes it easier to b...

2896
来自专栏Laoqi's Linux运维专列

自动化监控Zabbix之主机自动发现

2103

扫码关注云+社区

领取腾讯云代金券