HTML5新标签

最新推荐文章于 2025-06-05 21:39:35 发布

常常不爱学习

最新推荐文章于 2025-06-05 21:39:35 发布

阅读量472

点赞数 4

CC 4.0 BY-SA版权

文章标签： html5 前端 html

本文链接：https://blog.youkuaiyun.com/qq_56807425/article/details/142002101

H5新标签主要分为两类：

主体结构标签：控制页面的主体内容的标签
非主体结构标签：放置辅助主体内容的信息

为例方便浏览器更好的抓取页面内容，同时简化代码。

例子：

article：放置独立内容区块
section：表示一个区域，可放文章章节
nav：导航
aside：侧边栏
figure/figcaption：放置一组媒体内容及标题
header/footer：标题、logo、导航/友情链接等
hgroup：标题分组
address：地址、姓名、联系信息等（斜体）
…

article

独立内容区块，如文章、帖子、评论消息等
可嵌套其他元素，有自己的头尾、主体
一般独立完整的内同使用article标签，一段内容用section

在这里插入图片描述

    <article>
        <header>
            <h3>这里是header元素</h3>
            <h5>Article</h5>
        </header>
        <p>
            <article id="QT">
                <h3>评论</h3>
                <p>内容完整时，一个独立的区块使用article，且可以嵌套使用。</p>
            </article>
        </p>
        <footer>这里放置页脚</footer>
    </article>

section

给内容分段，页面分区
相互的内容独立（div形式上的独立）
可用于三种情况：
- 文章章节，对于有标题的内容
- 特定的内容区块
- 定义文档的主题内容

在这里插入图片描述

   <section id="sec1">
       <h3>这里是header元素</h3>
       <h5>Article</h5>
   </section>
   <section id="sec2">
       <h3>评论</h3>
       <p>内容完整时，一个独立的区块使用article，且可以嵌套使用。</p>
   </section>

在这里插入图片描述

    <header>
        <h3>这里是header元素</h3>
        <h5>Article</h5>
    </header>
    <section id="sec2">
        <h3>评论</h3>
        <p>这里使用section作为文档的主体内容。</p>
    </section>
    <footer>这里是页脚</footer>

注意

article强调内容的独立性，强调有完整的内容
section强调关联性，强调给页面内容分块
本质上都是带有div语义的元素，类似于：

<div id="article/section">  </div>

aside

侧边栏
定义article元素之外的内容，须与article内的元素内容相关
嵌套在article内部使用，作为主要内容的附属信息

在这里插入图片描述

    <header>
        <h3>这里是header元素</h3>
        <h5>Article</h5>
    </header>
    <article>
        <aside style="float: left;">这是侧边栏</aside>
        <section style="float: left;">
            <h3>评论</h3>
            <p>这里使用section作为文档的主体内容。</p>
        </section>
    </article>

注意

aside元素和section并排显示的条件需要都加上浮动float: left;

nav

导航栏，实现对超链接的分组，主导航栏/侧边导航栏
只把一个文档中的主导航栏放在nav中
可给一个文章做一个目录导航栏

在这里插入图片描述

    <header>
        <h3>这里是header元素</h3>
        <nav>
            <ul>
                <li style="display: inline;"><a herf="https://baidu.com">百度</a></li>
                <li style="display: inline;"><a herf="https://bilibili.com">哔哩哔哩</a></li>
                <li style="display: inline;"><a herf="https://google.com">谷歌</a></li>
                <li style="display: inline;"><a herf="https://firefox.com">火狐</a></li>
            </ul>
        </nav>
    </header>

Time

datetime设置的时间主要是为了能让浏览器抓取，不显示
pubbdate属性代表发布时间，为了浏览器抓取

在这里插入图片描述

<time datetime="2001-10-18" pubbdate="pubbdate">文章发表于2001年10月18日</time>
<time datetime="2001-10-18T20:00" pubbdate="pubbdate">文章发表于2001年10月18日20:00</time>
<time datetime="2001-10-18T20:00Z" pubbdate="pubbdate">文章发表于2001年10月18日UTC时间的20:00</time>
<time datetime="2001-10-18T20:00+09:00" pubbdate="pubbdate">文章发表于2001年10月18日时差为9个小时的20:00</time>

hgroup

用来给标题分组，通常放在header中，但也不绝对

address

名字、地址、电话、email等，斜体显示

figure/figuration

在这里插入图片描述

<figcaption>媒体组合</figcaption>
 <figure>
     <img src="../12.jpg" alt="肖小赞">
 </figure>