HTML5中的新增标签及其用法(持续更新)

傷城~ 2024-04-18 09:19 42阅读 0赞

# HTML5中的新增标签及其用法 #

[HTML 参考手册][HTML]

## 结构标签 ##

HTML5提供了新的语义元素来明确一个Web页面的不同部分,在一个网页中，这些新的语义标签元素位置如下图所示：

![20190905101252731.jpg][]

<table>  标签及其属性介绍  
 <thead> 
  <tr> 
   <th style="text-align:center;width:400px;">标签</th> 
   <th style="text-align:center;width:400px;">描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td style="text-align:center;width:400px;"> <p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;article&gt;</p> </td> 
   <td style="text-align:center;width:400px;">规定独立的自包含内容</td> 
  </tr> 
  <tr> 
   <td style="text-align:center;width:400px;">&lt;aside&gt;</td> 
   <td style="text-align:center;width:400px;">定义其所处内容之外的内容</td> 
  </tr> 
  <tr> 
   <td style="text-align:center;width:400px;">&lt;header&gt;</td> 
   <td style="text-align:center;width:400px;">定义文档的页眉（介绍信息）</td> 
  </tr> 
  <tr> 
   <td style="text-align:center;width:400px;">&lt;footer&gt;</td> 
   <td style="text-align:center;width:400px;">定义文档或节的页脚</td> 
  </tr> 
  <tr> 
   <td style="text-align:center;width:400px;">&lt;nav&gt;</td> 
   <td style="text-align:center;width:400px;">&nbsp;定义导航链接的部分</td> 
  </tr> 
  <tr> 
   <td style="text-align:center;width:400px;">&lt;section&gt;</td> 
   <td style="text-align:center;width:400px;">定义文档中的节（section，区段）</td> 
  </tr> 
 </tbody> 
</table>

### 定义文档页眉<header> ###

<header> 标签定义文档或者文档的一部分区域的页眉。

<header> 元素应该作为介绍内容或者导航链接栏的容器。

在一个文档中，您可以定义多个 <header> 元素。

**注释：**<header> 标签不能被放在 <footer>、<address> 或者另一个 <header> 元素内部。

从下面的例子中可以看到,我们可以使用<header>标签定义一篇文章的标题、发布时间等头部信息。

###  ###

### 定义文章标签<article></article> ###

<article> 标签规定独立的自包含内容。一篇文章应有其自身的意义，应该有可能独立于站点的其余部分对其进行分发。

article元素代表了文档、页面或者是应用程序当中的独立完整可以被外部引用的内容，他可以以一篇文章、一篇帖子、一段评论或者是独立的插件形式出现。除了内容主题以外，一个article元素通常会有自己的标题及脚注。

代码：

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
    </head>
    <body>
        <article>
            <header>
                <h1>HTTP中GET和POST的区别</h1>
                <p>发表时间:<time   pubdate="pubdate">2019/09/04</time></p>
            </header>
            <p>在HTTP中规定了许多与服务器进行交互的方法，如GET、POST、PUT、DELETE。其中资源描述符是URL，在这里我们可以这样理解，一个URL地址可以描述网络中的一个资源，而前面的GET、POST、PUT、DELETE所对应的分别是对这个资源的查、改、增、删。最经常说的就是GET是从指定的资源获取数据，而POST是向指定的资源提交将要处理的数据。</p>
            <footer>
                <small>© 2019 Miever</small>
            </footer>
        </article>
    
        <article>
            <header>
                <h1>如何理解HTML结构的语义化</h1>
                <p>发表时间:<time   pubdate="pubdate">2019/09/04</time></p>
            </header>
            <p>通俗的来讲就是从代码上来展示页面的结构，而不是从最终视觉上来展示结构，在去掉或样式丢失的时候依然能让页面呈现清晰的结构。</p>
            <footer>
                <small>© 2019 Miever</small>
            </footer>
        </article>
    
    </body>
    </html>

效果：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L01pZXZlcg_size_16_color_FFFFFF_t_70][]

###  ###

### 定义导航标签<nav> ###

<nav> 标签定义导航链接的部分。Nav元素可以用作页面导航的链接组，在导航链接组里面有很多的链接，点击每个链接可以链接到其他页面或者当前页面的其他部分，并不是所有的链接组都要被放在nav元素里面，我们只需要把最主要的、基本的、重要的放在nav元素里面即可。

代码：

效果:

![20190905091715712.png][]

### 定义其所处内容之外的内容<aside> ###

<aside> 标签定义 <article> 标签外的内容，aside 的内容应该与附近的内容相关，内容可用作文章的侧栏。

代码:

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <style>
            div {
                width: 900px;
                height: 600px;
            }
            article {
                width: 600px;
                height: 400px;
                background-color: pink;
                float: left;
            }
    
            aside{
                width: 200px;
                height: 400px;
                float: left;
                background-color: skyblue;
            }
        </style>
    </head>
    <body>
        <div>
                <article>
                        <header>
                            <h1>HTTP中GET和POST的区别</h1>
                        </header>
                        <p>在HTTP中规定了许多与服务器进行交互的方法，如GET、POST、PUT、DELETE。</p>
                </article>
                <aside>
                    <h1>浏览器与服务器...</h1>
                    <p>当我们打开浏览器，在浏览器的地址栏中输入URL地址去访问服务器上的1.jsp这个web资源的过程中...</p>
                    <h1>浅谈HTTP中Get...</h1>
                    <p>在ASP中，服务端获取GET请求参数用Request.QueryString，获取POST请求参数用Request.Form。在JSP中...</p>
                </aside>
        </div>
            
    </body>
    </html>

##  ##

效果:

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L01pZXZlcg_size_16_color_FFFFFF_t_70 1][]

### 定义文档中的节<section> ###

<section> 标签定义了文档的某个区域。比如章节、头部、底部或者文档的其他区域。

<section> 不是一个专用来做容器的标签，如果仅仅是用于设置样式或脚本处理，专用的是 div。它的里应该有 标题（h1~6），但文章中推荐用 article 来代替。

<section>的作用是对页面上的内容进行分块，如各个有标题的版块、功能区或对文章进行分段，不要与有自己完整、独立内容的article混淆。

例子：

zelda官网运用了大量的<section>标签

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L01pZXZlcg_size_16_color_FFFFFF_t_70 2][]

[你如何理解 HTML5 的 section？会在什么场景使用？为什么这些场景使用 section 而不是 div？][HTML5 _ section_ section _ div]

[HTML]: https://www.w3school.com.cn/tags/index.asp
[20190905101252731.jpg]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/c4643d7d11b7428384cb4e290bdec140.jpg
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L01pZXZlcg_size_16_color_FFFFFF_t_70]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/56cadcb806074856be9159abdeffa181.png
[20190905091715712.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/ec81c84a97174f928f943f4a34dd4521.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L01pZXZlcg_size_16_color_FFFFFF_t_70 1]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/55addabb2aa04108b1444be5b3a97c31.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L01pZXZlcg_size_16_color_FFFFFF_t_70 2]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/82480a8076254289a7c1b105414fd86c.png
[HTML5 _ section_ section _ div]: https://www.zhihu.com/question/20227599