初学HTML5：结构化（语义化）标签

持久的棒棒君

已于 2022-12-22 14:15:36 修改

阅读量1.2k

点赞数 5

分类专栏：大杂烩文章标签： html5 前端

于 2022-07-23 23:45:00 首次发布

本文链接：https://blog.csdn.net/lalala_dxf/article/details/125934749

版权

大杂烩专栏收录该内容

259 篇文章 1 订阅

订阅专栏

文章目录

H5新增标签与属性
H5新增结构化（语义化）标签简介

H5新增标签与属性

H5新增结构化（语义化）标签简介

Html5新增了很多语义化标签，这些标签多为块元素，其表现形式与div完全一致，即没有特殊样式。但是div是无意义的块元素，而Html5新增的这些元素多为有意义元素，例如header表达了头部的意思，在网页中任意暗含头部的结构都可以使用header标签。

什么是语义化标签

语义化是指根据内容的结构化（内容语义化），选择合适的标签（代码语义化），便于开发者阅读和写出更优雅的代码的同时，让浏览器的爬虫和机器很好的解析。

为什么要语义化

1、语义化的HTML在没有CSS的情况下也能呈现较好的内容结构与代码结构
2、方便其他设备的解析
3、便于团队开发和维护

h5中语义化标签如下：

标签	描述
article	定义文章
section	定义文档中的节
aside	定义页面内容之外的内容
header	定义文档或节的页眉
nav	定义导航链接集合
main	规定文档的主内容
mark	定义重要的或需要强调的文本
footer	定义文档或节的页脚
details	定义用户能够查看或隐藏的额外细节
summary	定义details元素的可见标题
time	定义日期/时间
address	定义文档作者或拥有者的联系信息
figure	定义媒介（例如图片）内容的分组，以及它们的标题。
figcaption	定义 figure 元素的标题

此外，Html5中还新增了一些功能性标签，但是由于其在各个浏览器中表现不一致，我们很少使用这些元素，取而代之的是组件，因此这里不做过多描述。
例如：

功能性标签	描述
progress	定义任何类型的任务的进度
meter	定义预定义范围内的度量

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        header {
            width: 800px;
            height: 60px;
            background-color: skyblue;
            margin-left: auto;
            margin-right: auto;
            margin-bottom: 10px;
        }

        nav {
            width: 800px;
            height: 30px;
            background-color: pink;
            margin: 10px auto;
            display: flex;
            justify-content: space-around;
        }

        nav>a {
            text-decoration: none;
            color: white;
        }

        main {
            width: 800px;
            height: 400px;
            border: 2px dotted rgb(159, 219, 230);
            margin: auto;
        }

        article {
            width: auto;
            background-color: rgb(238, 155, 155);
        }

        section {
            float: left;
            width: 600px;
            height: 195px;
            border: 3px dotted orange;
            background-color: lightgreen;
        }

        aside {
            background-color: lightblue;
            height: 400px;
            overflow: hidden;
        }

        aside>ul {
            list-style-type: none;
        }

        footer {
            width: 800px;
            height: 50px;
            margin: 10px auto;
            background-color: rgb(214, 206, 206);
            text-align: center;
        }
    </style>
</head>

<body>
    <!-- 头部 -->
    <header>
        这是header
    </header>
    <!-- 导航 -->
    <nav>
        <a href="#">导航1</a>
        <a href="#">导航1</a>
        <a href="#">导航1</a>
        <a href="#">导航1</a>
    </nav>

    <!-- 文档主要内容 -->
    <main>
        <!-- 文章-->
        <article>
            <section>
                这是session标签
            </section>
            <section>
                这是session标签
            </section>
        </article>
        <aside>
            <ul>
                <li>这是aside标签</li>
                <li>通常用于作为主内容以外的某些内容</li>
                <li>其他</li>
            </ul>
        </aside>
    </main>
    <!-- 尾部 -->
    <footer>
        这是footer,尾部留点联系方式啥的
        <!-- 其他标签使用 -->
        <time>2022/7/23</time>
        <progress value="22" max="100"></progress>
        <meter value="22" min="0" max="100"></meter>
        <meter value="0.6"></meter>
    </footer>
</body>

</html>

在这里插入图片描述

持久的棒棒君

关注

5
点赞
踩
14

收藏

觉得还不错? 一键收藏
0
评论
初学HTML5：结构化（语义化）标签

Html5新增了很多语义化标签，这些标签多为块元素，其表现形式与div完全一致，即没有特殊样式。但是div是无意义的块元素，而Html5新增的这些元素多为有意义元素，例如header表达了头部的意思，在网页中任意暗含头部的结构都可以使用header标签。什么是语义化标签语义化是指根据内容的结构化（内容语义化），选择合适的标签（代码语义化），便于开发者阅读和写出更优雅的代码的同时，让浏览器的爬虫和机器很好的解析。为什么要语义化1、语义化的HTML在没有CSS的情况下也能呈现较好的内容结构与代码结构......
复制链接

扫一扫