HTML5 新特征：新语义化标签

深藏阁楼爱情的钟 2022-10-10 12:55 199阅读 0赞

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

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

##### header 元素 #####

`<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 元素中作为主要内容的附属信息部分，其中的内容可以是与当前文章有关的相关资料、标签、名次解释等。

##### details 元素 #####

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

##### figure 元素 #####

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

<figure>
      <img src="figure.png" alt="figure.png图片按" title="figure图片">
    </figure>
    <p>段落</p>
     
    
    <figure>
       <img src="figure.png" alt="figure.png图片按" title="figure图片">picture">   
       <figcaption>figure图片描述</figcaption>
    </figure>
    <p>段落.....</p>

##### time 元素 #####

定义日期/时间

##### 新语义化标签的作用： #####

*  去掉或样式丢失的时候能让页面呈现清晰的结构
 *  方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）以意义的方式来渲染网页
 *  有利于SEO
 *  便于团队开发和维护，遵循W3C标准，可以减少差异化