HTML5 新特征：新语义化标签

Posted 2021-07-04 QXXXD

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标准，可以减少差异化