html5 新增的语义化标签

最新推荐文章于 2025-06-05 09:52:00 发布

只看五分钟佩奇的小姑姑

最新推荐文章于 2025-06-05 09:52:00 发布

阅读量643

点赞数

CC 4.0 BY-SA版权

文章标签： html5 标签

本文链接：https://blog.youkuaiyun.com/Aloe_904/article/details/78397818

前端的尘封往事专栏收录该内容

29 篇文章

订阅专栏

本文介绍了HTML5中新增加的语义化标签及其用途，包括页面结构划分标签如header、footer、nav等，以及相对独立的语义化标签如figure、time、details等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>html5</title>

</head>
<body>
    <header>用在页面或板块的头部</header>
    <nav>导航标签</nav>

    <hgroup>
        <h1>侬好</h1>
        <h2>你好</h2>
    </hgroup>

    <section>清白之年</section>

    <figure>
        <img src="">
        <figcaption>视频</figcaption>
    </figure>

    <time datetime="0909">情人节</time><br>

    <input type="text" list="123">
    <datalist id="123">
        <option value="js">js</option>
        <option value="html">html</option>
        <option value="css">css</option>
    </datalist>

    <details>
        <summary>课程</summary><!-- 点击三角，展开<p>的内容 -->
        <p>js html css</p>
    </details>

    <address>作者信息</address>

    <mark>标记的一句话</mark><br>

    <progress value="78" max="200">
<!-- <span>89</span>% 向下兼容-->   
    </progress>

    <footer>用在页面或板块的底部</footer>

</body>
</html>

对页面结构的划分：

<header>用在页面或板块的头部</header>
<footer>用在页面或板块的底部</footer>
<nav>导航标签</nav>
<hgroup>：用于标题组合
<section></section>:页面上的板块，用于划分页面上的不同区域，或者划分文章里不同的节
<article></article>:用来在页面中表示一套结构完整且独立的内容部分
<aside></aside>:用来表示主体的附属信息，相关内容的引用，侧边栏，广告~

相对独立的语义化标签：

<figure></figure>:对媒体元素的组合。<img>表示图片。<figcaption></figcaption>表示视频
<time></time>:时间标签,有个参数是datetime
<datalist></datalist>:选项列表，(会有提示)与input配合使用，来定义input的值。input新增list属性，其值是datalist的ID.
<details></details>:用于描述文档或文档的某个细节，open是默认展开
<summary></summary>:details元素的标题 <dialog></dialog>:定义一段对话
<address></address>:定义文章或页面作者的详细信息，显示是倾斜
<mark></mark>:需要标记的词或句子，默认标记的背景是黄色
<progress></progress>:进度条，属性max表示最大限度，value表示此时的进度