H5 语义化标签(头部,导航,section&article,尾部)

最新推荐文章于 2024-05-17 14:33:55 发布

ChaliceJoker

最新推荐文章于 2024-05-17 14:33:55 发布

阅读量991

点赞数 5

文章标签： html 前端

本文链接：https://blog.csdn.net/qq_53018334/article/details/125883557

版权

2.nav 导航标签

3.section 和 article标签

语义化标签本质上和div没有区别只是增加了代码的可读性

<header>header标签...</herder>

2.nav 导航标签

<nav>nav导航标签...</nav>

3.section 和 article标签

他代替了原有的<main>标签(main标签存在兼容性问题)

<section>和<article>在针对一个块内容作用时并无区别

<section>标签应用于该部分内容是否有明确的标题,是否会出现在这块区域的大纲/目录里

<article>标签应用:将该标签单独拿出来看 是否是一个完整的/独立的

ps:当这个块没有标题时不使用<section>

<section>和<article>并无父子关系,两者可以相互嵌套

<!--像一张报纸有很多版块每个板块都是一个 section -->
<section>
    <h2>chalicejoker第一板块</h2>
    <p>而每个版块(section)可能有多个文章(article)</p>
    <article>文章中又可以有很多版块</article>
    <article>
        <section>
            <h3>chalice第一板块</h3>
            <p>可以随意的嵌套</p>
        <section>
        <section>
            <h3>chalice第二板块</h3>
            <p>可以随意的嵌套</p>
        <section>
    </article>
</section>
<section>
    ...
</section>
...
...
...

section标签示例:

<body>
    <section>
        <h2>标题</h2>
        <span>内容</span>
    </section>
    <section>
        <h2>标题</h2>
        <span>内容</span>
    </section>
    <section>
        <h2>标题</h2>
        <span>内容</span>
    </section>
</body>

<footer> 标签定义页脚。

<footer> 通常包含文档的作者、版权信息、使用条款链接、联系信息等等

在文档中可以使用多个<footer>