zoukankan      html  css  js  c++  java
  • 《重学前端》笔记 -- 关于语义html

    <body>
        <header>……</header>
        <article>
            <header>……</header>
            <section>……</section>
            <section>……</section>
            <section>……</section>
            <footer>……</footer>
        </article>
        <article>
            ……
        </article>
        <article>
            ……
        </article>
        <footer>
            <address></address>
        </footer>
    </body>
    

      

    body 里面有自己的 header 和 footer,然后里面是竖篇的 article,每一个 article 里面都有自己的 header、section、footer。这是一个典型的多文章结构。

    在这个结构里,我们看到了一些新标签,我也来逐个介绍一下。

    header,如其名,通常出现在前部,表示导航或者介绍性的内容。

    footer,通常出现在尾部,包含一些作者信息、相关链接、版权信息等。

    header 和 footer 一般都是放在 article 或者 body 的直接子元素,但是标准中并没有明确规定,footer 也可以和 aside,nav,section 相关联(header 不存在关联问题)。

    aside 表示跟文章主体不那么相关的部分,它可能包含导航、广告等工具性质的内容。

    aside 很容易被理解为侧边栏,实际上二者是包含关系,侧边栏是 aside,aside 不一定是侧边栏。

    aside 和 header 中都可能出现导航(nav 标签),二者的区别是,header 中的导航多数是到文章自己的目录,而 aside 中的导航多数是到关联页面或者是整站地图。

    最后 footer 中包含 address,这是个非常容易被误用的标签。address 并非像 date 一样,表示一个给机器阅读的地址,而是表示“文章(作者)的联系方式”,address 明确地只关联到 article 和 body。

  • 相关阅读:
    promise!
    123
    git回忆回忆回忆
    Vue基本指令
    vue小案例(跑马灯)
    mvc
    nodejs中path模块
    web服务端重定向
    弹性布局
    导出数据库的表的所有字段类型,长度,名称
  • 原文地址:https://www.cnblogs.com/huhanhaha/p/10319473.html
Copyright © 2011-2022 走看看