HTML5 新特征:新语义化标签

1,655 阅读2分钟

html5 语义标签,可以使开发者更方便清晰构建页面的布局

标签描述
<header>定义了文档的头部区域
<footer>定义了文档的尾部区域
<nav>定义文档的导航
<section>定义文档中的节
<article>定义文章
<aside>定义页面以外的内容
<details>定义用户可以看到或者隐藏的额外细节
<summary>标签包含details元素的标题
<dialog>定义对话框
<figure>定义自包含内容
<main>定义文档主内容
<mark>定义文档的主内容
<time>定义日期/时间
header 元素

<header> 元素定义文档的头部区域

<header>     
   <hgroup>         
       <h1>标题</h1>
       <h1>副标题</h1>
   </hgroup>
</header>
footer 元素

<footer> 元素定义文档的尾部区域 。通常含有该节的一些基本信息,如:作者,相关文档链接,版权资料。

<footer>原创作者;版权信息;联系方式;文档相关链接等...</footer>
nav 元素

<nav> 元素代表页面的导航链接区域。用于定义页面的主要导航部分。

<nav>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>
section 元素

<section>元素代表文档中的“节”或“段”,“段”可以是指一篇文章里按照主题的分段;“节”可以是指一个页面里的分组。

<section>
    <h1>这里是 section 标题...</h1>
    <p>这里是 section 标题对于内内容...</p>
</section>
aside 元素

<aside> 元素被包含在 article 元素中作为主要内容的附属信息部分,其中的内容可以是与当前文章有关的相关资料、标签、名次解释等。

<article>     
    <p>内容</p>     
    <aside>         
        <h1>作者简介</h1>         
        <p>内容</p>     
    </aside>
</article>
details 元素

描述文档或者文档某一部分细节,summary 是 details 元素的标题

<details>
    <summary>标题</summary>
    <p>内容</p>
</details>
figure 元素

<figure> 元素代表一段独立的内容.用于对元素进行组合。多用于图片与图片描述组合。

<!-- Just a figure -->
<figure>
  <img src="figure.png" alt="figure.png图片按" title="figure图片">
</figure>
<p>段落</p>
 
<!-- Figure with figcaption -->
<figure>
   <img src="figure.png" alt="figure.png图片按" title="figure图片">picture">   
   <figcaption>figure图片描述</figcaption>
</figure>
<p>段落.....</p>
time 元素

定义日期/时间

<time datetime="2021-06-01">
新语义化标签的作用:
  • 去掉或样式丢失的时候能让页面呈现清晰的结构
  • 方便其他设备解析(如屏幕阅读器、盲人阅读器、移动设备)以意义的方式来渲染网页
  • 有利于SEO
  • 便于团队开发和维护,遵循W3C标准,可以减少差异化