H5 新增语义标签

ゝ一世哀愁。 2022-12-29 09:16 180阅读 0赞

# 1、HTML5 简介 #

1.  HTML5是HTML最新的修订版本，2014年10月由万维网联盟（W3C）完成标准制定。
2.  HTML5的设计目的是为了在移动设备上支持多媒体。
3.  HTML5 简单易学。

--------------------

#  #

## 1.2、什么是 HTML5? ##

1.  HTML5 是下一代 HTML 标准。
2.  HTML , HTML 4.01的上一个版本诞生于 1999 年。自从那以后，Web 世界已经经历了巨变。

HTML5 仍处于完善之中。然而，大部分现代浏览器已经具备了某些 HTML5 支持。

--------------------

## 1.2、HTML5 是如何起步的？ ##

1.  HTML5 是 W3C 与 WHATWG 合作的结果,WHATWG 指 Web Hypertext Application Technology Working Group。
2.  WHATWG 致力于 web 表单和应用程序，而 W3C 专注于 XHTML 2.0。在 2006 年，双方决定进行合作，来创建一个新版本的 HTML。

--------------------

## 1.3、新特性 ##

HTML5 中的一些有趣的新特性：

*  用于绘画的 canvas 元素
 *  用于媒介回放的 video 和 audio 元素
 *  对本地离线存储的更好的支持
 *  新的特殊内容元素，比如 article、footer、header、nav、section、
 *  新的表单控件，比如 calendar、date、time、email、url、search

--------------------

# 2、浏览器兼容性 #

## 2.1、HTML5 浏览器支持 ##

最新版本的 Safari、Chrome、Firefox 以及 Opera 支持某些 HTML5 特性。Internet Explorer 9 将支持某些 HTML5 特性。

![3d9bc08a8e1494f4d0c9556b284b3158.png][]

1.  你可以让一些较早的浏览器（不支持HTML5）支持 HTML5。
2.  现代的浏览器都支持 HTML5。
3.  此外，所有浏览器，包括旧的和最新的，对无法识别的元素会作为内联元素自动处理。
4.  正因为如此，你可以 **"教会"** 浏览器处理 **"未知"** 的 HTML 元素。

--------------------

## 2.2、将 HTML5 元素定义为块元素 ##

*  HTML5 定了 8 个新的 HTML **语义（semantic）** 元素。所有这些元素都是 **块级** 元素。
 *  为了能让旧版本的浏览器正确显示这些元素，你可以设置 CSS 的 **display** 属性值为 **block**:
 *  在移动端就不需要考虑兼容问题。 H5+css3可以放心的在移动端使用。

--------------------

# 3、HTML5 新元素 #

## HTML5 新元素 ##

自1999年以后HTML 4.01 已经改变了很多,今天，在HTML 4.01中的几个已经被废弃，这些元素在HTML5中已经被删除或重新定义。

为了更好地处理今天的互联网应用，HTML5添加了很多新元素及功能，比如: 图形的绘制，多媒体内容，更好的页面结构，更好的形式 处理，和几个api拖放元素，定位，包括网页 应用程序缓存，存储，网络工作者，等。

## 3.1、<canvas> 新元素 ##

<table> 
 <tbody> 
  <tr> 
   <th>标签</th> 
   <th>描述</th> 
  </tr> 
  <tr> 
   <td><a href="https://www.runoob.com/tags/tag-canvas.html" rel="nofollow">&lt;canvas&gt;</a></td> 
   <td>标签定义图形，比如图表和其他图像。该标签基于 JavaScript 的绘图 API</td> 
  </tr> 
 </tbody> 
</table>

--------------------

## 3.2、新多媒体元素 ##

<table> 
 <tbody> 
  <tr> 
   <th>标签</th> 
   <th>描述</th> 
  </tr> 
  <tr> 
   <td><a href="https://www.runoob.com/tags/tag-audio.html" rel="nofollow">&lt;audio&gt;</a></td> 
   <td>定义音频内容</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.runoob.com/tags/tag-video.html" rel="nofollow">&lt;video&gt;</a></td> 
   <td>定义视频（video 或者 movie）</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.runoob.com/tags/tag-source.html" rel="nofollow">&lt;source&gt;</a></td> 
   <td>定义多媒体资源 &lt;video&gt; 和 &lt;audio&gt;</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.runoob.com/tags/tag-embed.html" rel="nofollow">&lt;embed&gt;</a></td> 
   <td>定义嵌入的内容，比如插件。</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.runoob.com/tags/tag-track.html" rel="nofollow">&lt;track&gt;</a></td> 
   <td>为诸如 &lt;video&gt; 和 &lt;audio&gt; 元素之类的媒介规定外部文本轨道。</td> 
  </tr> 
 </tbody> 
</table>

--------------------

## 3.3、新表单元素 ##

<table> 
 <tbody> 
  <tr> 
   <th>标签</th> 
   <th>描述</th> 
  </tr> 
  <tr> 
   <td><a href="https://www.runoob.com/tags/tag-datalist.html" rel="nofollow">&lt;datalist&gt;</a></td> 
   <td>定义选项列表。请与 input 元素配合使用该元素，来定义 input 可能的值。</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.runoob.com/tags/tag-keygen.html" rel="nofollow">&lt;keygen&gt;</a></td> 
   <td>规定用于表单的密钥对生成器字段。</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.runoob.com/tags/tag-output.html" rel="nofollow">&lt;output&gt;</a></td> 
   <td>定义不同类型的输出，比如脚本的输出。</td> 
  </tr> 
 </tbody> 
</table>

--------------------

## 3.4、新的语义和结构元素 ##

HTML5提供了新的元素来创建更好的页面结构：

<table> 
 <tbody> 
  <tr> 
   <th>标签</th> 
   <th>描述</th> 
  </tr> 
  <tr> 
   <td><a href="https://www.runoob.com/tags/tag-article.html" rel="nofollow">&lt;article&gt;</a></td> 
   <td>定义页面独立的内容区域。</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.runoob.com/tags/tag-aside.html" rel="nofollow">&lt;aside&gt;</a></td> 
   <td>定义页面的侧边栏内容。</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.runoob.com/tags/tag-bdi.html" rel="nofollow">&lt;bdi&gt;</a></td> 
   <td>允许您设置一段文本，使其脱离其父元素的文本方向设置。</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.runoob.com/tags/tag-command.html" rel="nofollow">&lt;command&gt;</a></td> 
   <td>定义命令按钮，比如单选按钮、复选框或按钮</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.runoob.com/tags/tag-details.html" rel="nofollow">&lt;details&gt;</a></td> 
   <td>用于描述文档或文档某个部分的细节</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.runoob.com/tags/tag-dialog.html" rel="nofollow">&lt;dialog&gt;</a></td> 
   <td>定义对话框，比如提示框</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.runoob.com/tags/tag-summary.html" rel="nofollow">&lt;summary&gt;</a></td> 
   <td>标签包含 details 元素的标题</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.runoob.com/tags/tag-figure.html" rel="nofollow">&lt;figure&gt;</a></td> 
   <td>规定独立的流内容（图像、图表、照片、代码等等）。</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.runoob.com/tags/tag-figcaption.html" rel="nofollow">&lt;figcaption&gt;</a></td> 
   <td>定义 &lt;figure&gt; 元素的标题</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.runoob.com/tags/tag-footer.html" rel="nofollow">&lt;footer&gt;</a></td> 
   <td>定义 section 或 document 的页脚。</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.runoob.com/tags/tag-header.html" rel="nofollow">&lt;header&gt;</a></td> 
   <td>定义了文档的头部区域</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.runoob.com/tags/tag-mark.html" rel="nofollow">&lt;mark&gt;</a></td> 
   <td>定义带有记号的文本。</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.runoob.com/tags/tag-meter.html" rel="nofollow">&lt;meter&gt;</a></td> 
   <td>定义度量衡。仅用于已知最大和最小值的度量。</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.runoob.com/tags/tag-nav.html" rel="nofollow">&lt;nav&gt;</a></td> 
   <td>定义导航链接的部分。</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.runoob.com/tags/tag-progress.html" rel="nofollow">&lt;progress&gt;</a></td> 
   <td>定义任何类型的任务的进度。</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.runoob.com/tags/tag-ruby.html" rel="nofollow">&lt;ruby&gt;</a></td> 
   <td>定义 ruby 注释（中文注音或字符）。</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.runoob.com/tags/tag-rt.html" rel="nofollow">&lt;rt&gt;</a></td> 
   <td>定义字符（中文注音或字符）的解释或发音。</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.runoob.com/tags/tag-rp.html" rel="nofollow">&lt;rp&gt;</a></td> 
   <td>在 ruby 注释中使用，定义不支持 ruby 元素的浏览器所显示的内容。</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.runoob.com/tags/tag-section.html" rel="nofollow">&lt;section&gt;</a></td> 
   <td>定义文档中的节（section、区段）。</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.runoob.com/tags/tag-time.html" rel="nofollow">&lt;time&gt;</a></td> 
   <td>定义日期或时间。</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.runoob.com/tags/tag-wbr.html" rel="nofollow">&lt;wbr&gt;</a></td> 
   <td>规定在文本中的何处适合添加换行符。</td> 
  </tr> 
 </tbody> 
</table>

--------------------

# 4、HTML5 语义元素 #

语义= 意义

语义元素 = 有意义的元素

## 什么是语义元素? ##

一个语义元素能够清楚的描述其意义给浏览器和开发者。

**无语义** 元素实例: <div> 和 <span> - 无需考虑内容.

**语义**元素实例: <form>, <table>, and <img> - 清楚的定义了它的内容.

--------------------

## 浏览器支持 ##

Internet Explorer 9+, Firefox, Chrome, Safari 和 Opera 支持语义元素。

**注意:** Internet Explorer 8 及更早版本不支持该元素。

--------------------

## HTML5中新的语义元素 ##

许多现有网站都包含以下HTML代码： <div id="nav">, <div class="header">, 或者 <div id="footer">, 来指明导航链接, 头部, 以及尾部.

HTML5 提供了新的语义元素来明确一个Web页面的不同部分:

1.nav 定义导航

2.header 表示网页的头部。通常是一些导航信息或者标题。

3.article 表示一块独立的部分。

4.aside 对article的内容进行信息的辅助解释。次要信息，比如博客网站中的侧边公告，或者广告，分类等信息。

5.section 文档中的一个节点或者区域。

6.footer 页面的底部。通常是链接或版权信息

布局图：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2E3NTQzMzQ1OTk_size_16_color_FFFFFF_t_70][]

--------------------

## <section> 元素 ##

<section> 标签定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分。

根据W3C HTML5文档: section 包含了一组内容及其标题。

## <nav> 元素 ##

<nav> 标签定义导航链接的部分。

<nav> 元素用于定义页面的导航链接部分区域，但是，不是所有的链接都需要包含在 <nav> 元素中!

## <aside> 元素 ##

<aside> 标签定义页面主区域内容之外的内容（比如侧边栏）。

aside 标签的内容应与主区域的内容相关.

## <header> 元素 ##

<header>元素描述了文档的头部区域

<header>元素主要用于定义内容的介绍展示区域.

在页面中你可以使用多个<header> 元素.

## <footer> 元素 ##

<footer> 元素描述了文档的底部区域.

<footer> 元素应该包含它的包含元素

一个页脚通常包含文档的作者，著作权信息，链接的使用条款，联系信息等

文档中你可以使用多个 <footer>元素.

## <figure> 和 <figcaption> 元素 ##

<figure>标签规定独立的流内容（图像、图表、照片、代码等等）。

<figure> 元素的内容应该与主内容相关，但如果被删除，则不应对文档流产生影响。

<figcaption> 标签定义 <figure> 元素的标题.

<figcaption>元素应该被置于 "figure" 元素的第一个或最后一个子元素的位置。

网页布局实例：

<header>
            <hgroup>
                <h1>H5是什么？</h1>
                <h2>作者：匿名</h2>
            </hgroup>
            <nav>
                <ul>
                    <li><a href="#">首页</a></li>
                    <li><a href="#">新随笔</a></li>
                    <li><a href="#">订阅</a></li>
                    <li><a href="#">管理</a></li>
                </ul>
            </nav>
        </header>
        
        <main>
            <article>
                <section>
                    <p>其实H5它包换了HTML5 的标记规范，运用到了例如 CSS、JS(Java)等多种计算机语言，可以实现多种动效和视听效果，会利用到后端和前端的多种功能，主要在手机端传播，可以跨平台在PC、平板上浏览等等...</p>
                </section>
            </article>
            <aside>
                公告
            </aside>
            <aside>
                广告
            </aside>
        </main>
        
        <footer>
            版权信息/超链接
        </footer>
        
    </body>
    </html>

## 已移除的元素 ##

以下的 HTML 4.01 元素在HTML5中已经被删除:

*  <acronym>
 *  <applet>
 *  <basefont>
 *  <big>
 *  <center>
 *  <dir>
 *  <font>
 *  <frame>
 *  <frameset>
 *  <noframes>
 *  <strike>
 *  <tt>

[3d9bc08a8e1494f4d0c9556b284b3158.png]: /images/20221120/3e3ad4f0dc824a57991a5809c57c64e5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2E3NTQzMzQ1OTk_size_16_color_FFFFFF_t_70]: /images/20221120/a6e4f5ced7ac4232bd29e215172f89cc.png