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

相关文章

来自专栏JetpropelledSnake

[简明版] 有道云笔记Markdown指南

使用有道词典配合Markdown,可以快速准确做出美观精致的笔记,下面我们来看一下如何使用有道词典的MarkDown功能。

1251
来自专栏数据小魔方

用R语言抓取网页图片——从此高效存图告别手工时代

今天这个标题实在是有点言过其实了,对于R的爬虫知识,我只是领会了一点儿皮毛。 主要看不懂正则表达式,特别是那种一个括号里要匹配多种类型文本的语句,特像火星文,估...

40511
来自专栏Android小菜鸡

自定义组件——TitleView

  TitleView是一个常用的顶部标题栏组件,操作简单,可以快速搭建,并实现统一管理标题栏的目的。   采用建造者模式,支持快速构建back按钮、标题名、...

643
来自专栏码农阿宇

html中的div span和frameset框架标签

Div和span 1.      div独占一层,由div九不允许有别的。 2.      span标签不是独自占用一行,span一般用来设置字体。 框架标签:...

3379
来自专栏CDA数据分析师

50个逆天功能,看完变Excel绝顶高手(全都是动图!)

Excel的50个逆天功能,动画教程珍藏版。 1、自动筛选 ? 2、在Excel中字符替换 ? 3、在Excel中冻结行列标题 ? 4、在Excel中为导入外部...

2076
来自专栏自动化测试实战

Flask第36篇——模板项目实战(二)

前面我们利用宏将首页代码进行了第一次优化。如果我们现在还有其他页面,试想一下,首页上面的搜索框

573
来自专栏钱塘大数据

【干货】50个Excel常用功能,一秒变数据处理专家

今天小编给大家分享工作中经常使用到的EXCEL表格实用技巧,整整50个,学会一半,都会让你比别人牛N倍!EXCEL表格制作。 50个实用技巧 ▽附动态说明图▽ ...

6747
来自专栏小白鼠

Ionic3 高德Web定位

高德提供了Web平台定位的JS API,同样需要用到 APP_Key,并且需要注意是使用Web端的Key,如下图所示。必须是Web端的,其它平台的无效。 ht...

732
来自专栏新工科课程建设探讨——以能源与动力工程专业为例

2.2.5 HTML5程序调试

假设有一个网页,由debug.html何debug.js构成,其中debug.html内容如下:

600
来自专栏强仔仔

利用js实现输入框动态提示信息

为了提高和用户的交互性,现在的输入框往往都采用输入信息自动提示的功能,类似于百度输入框中的提示功能。 设计思路是:在输入框input的组件下面放置一个div,这...

2266

扫码关注云+社区