HTML 基础-18-语义化标签

最新推荐文章于 2024-09-11 08:17:43 发布

Keep learning（Poker）

最新推荐文章于 2024-09-11 08:17:43 发布

阅读量449

点赞数

文章标签： html css css3

本文链接：https://blog.csdn.net/weixin_63562705/article/details/121701088

版权

目标:能够认识开发中常用的没有语义布局标签( div、 span )和有语义的布局标签

学习路径:

1.没有语义的布局标签

2.有语义的布局标签 (了解)

1.1没有语义的布局标签-div和span

★场景: 实际开发网页时会大量频繁的使用到div和span这两个没语义的布局标签

★div标签: 一行只显示一个(独占一行)

★span标签: 一行可以显示多个

<body>
        这不是div标签
    <div>这是div标签</div>
    <div>这是div标签</div>
      <span>这是span标签</span>
      <span>这是span标签</span>
</body>

2.1有语义的布局标签(了解)

★场景: 在HTML5新版本中，推出了一些有语义的布局标签供开发者使用

★标签:

标签名	语义
header	网页头部
nav	网页导航
footer	网页底部
aside	网页侧边栏
section	网页区块
article	网页

★注意点:

· 以上标签显示特点和div一致,但是比div多了不同的语义

<body>
    <!-- 移动端常用 -->
    <header>网页的头部</header>
    <nav>网页的导航</nav>
    <footer>网页底部</footer>
    <aside>网页侧边栏</aside>
    <section>网页区块</section>
    <article>网页的文章</article>
</body>