语义化标签（二）

最新推荐文章于 2024-07-20 18:10:58 发布

Samatha_子衿

最新推荐文章于 2024-07-20 18:10:58 发布

阅读量105

点赞数

分类专栏：前端文章标签： html

本文链接：https://blog.csdn.net/weixin_44489591/article/details/104731894

版权

前端专栏收录该内容

10 篇文章 0 订阅

订阅专栏

该文分为两部分，上半部分参见语义化标签（一）

语义化标签在显示样式上没有任何区别，所呈现效果均为CSS样式调节达成。

常用

div : 块元素，无语义，最常用于网页布局
span : 行内元素，无语义，常用于网页中选中文字

非常用

header 网页头部
main 网页主体，一个网页中只可有一个
footer 网页底部
nav 导航栏
aside 和主体有关的部分（不属于主体），常用于侧边栏
article 网页单独的文章
section 除上诉部分外的区域

完整代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>语义化标签（2）</title>
  </head>
  <body>
    <header>网页头部</header>
    <main>网页主体，一个网页中只有一个</main>
    <footer>网页底部</footer>
    <nav>导航栏</nav>
    <article>单独的文章</article>
    <aside>和主体有关的部分，但不属于主体（侧边栏）</aside>

    <section>除了上诉部分的区域</section>

    <div>块元素，无语义，最常用于网页布局</div>
    <span>行内元素，无语义，常用于网页中选中文字</span>

    上述所有语义化标签在显示样式上一致，包括位置。通过CSS样式进行调节有所区别
  </body>
</html>

语义话标签显示无区别

Samatha_子衿

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
语义化标签（二）

语义化标签在显示样式上没有任何区别，所呈现效果均为CSS样式调节达成。常用div : 块元素，无语义，最常用于网页布局span : 行内元素，无语义，常用于网页中选中文字非常用header 网页头部main 网页主体，一个网页中只可有一个footer 网页底部nav 导航栏aside 和主体有关的部分（不属于主体），常用于侧边栏article 网页单独的文章...
复制链接

扫一扫