HTML5 新元素 (stage1-35)

清疚 2022-06-02 11:13 180阅读 0赞

在前面的34篇博客里，其中1-33篇介绍了HTML的使用及相关的元素和属性等，第34篇则简单介绍了一下XHTML与HTML的区别，那么从第35篇开始，我们接下来学习的是HTML5。

在前面的34篇博客当中，我也有简单的介绍过HTML5的相关文章，参考如下：  
HTML5 简介1：[http://blog.csdn.net/weixin\_38628915/article/details/78919298][http_blog.csdn.net_weixin_38628915_article_details_78919298]  
HTML5 简介2：[http://blog.csdn.net/weixin\_38628915/article/details/78921238][http_blog.csdn.net_weixin_38628915_article_details_78921238]  
HTML5 浏览器支持：[http://blog.csdn.net/weixin\_38628915/article/details/78922319][http_blog.csdn.net_weixin_38628915_article_details_78922319]

# 基础篇-HTML5 新元素 #

#### 1.HTML5新元素 ####

自1999年以后HTML 4.01 已经改变了很多,今天，在HTML 4.01中的几个已经被废弃，这些元素在HTML5中已经被删除或重新定义。  
为了更好地处理今天的互联网应用，HTML5添加了很多新元素及功能，比如: 图形的绘制，多媒体内容，更好的页面结构，更好的形式处理，和几个api拖放元素，定位，包括网页应用程序缓存，存储，网络工作者等。

#### 2.`<canvas>` 新元素 ####

<table> 
 <thead> 
  <tr> 
   <th>标签</th> 
   <th align="center">描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td><code>&lt;canvas&gt;</code></td> 
   <td align="center">标签定义图形，比如图表和其他图像。该标签基于 JavaScript 的绘图 API</td> 
  </tr> 
 </tbody> 
</table>

#### 3.新多媒体元素 ####

<table> 
 <thead> 
  <tr> 
   <th>标签</th> 
   <th align="center">描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td><code>&lt;audio&gt;</code></td> 
   <td align="center">定义音频内容</td> 
  </tr> 
  <tr> 
   <td><code>&lt;video&gt;</code></td> 
   <td align="center">定义视频（video 或者 movie）</td> 
  </tr> 
  <tr> 
   <td><code>&lt;source&gt;</code></td> 
   <td align="center">定义多媒体资源 <code>&lt;video&gt;</code> 和 <code>&lt;audio&gt;</code></td> 
  </tr> 
  <tr> 
   <td><code>&lt;embed&gt;</code></td> 
   <td align="center">定义嵌入的内容，比如插件。</td> 
  </tr> 
  <tr> 
   <td><code>&lt;track&gt;</code></td> 
   <td align="center">为诸如 <code>&lt;video&gt;</code> 和 <code>&lt;audio&gt;</code> 元素之类的媒介规定外部文本轨道。</td> 
  </tr> 
 </tbody> 
</table>

#### 4.新表单元素 ####

<table> 
 <thead> 
  <tr> 
   <th>标签</th> 
   <th align="center">描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td><code>&lt;datalist&gt;</code></td> 
   <td align="center">定义选项列表。请与 input 元素配合使用该元素，来定义 input 可能的值。</td> 
  </tr> 
  <tr> 
   <td><code>&lt;keygen&gt;</code></td> 
   <td align="center">规定用于表单的密钥对生成器字段。</td> 
  </tr> 
  <tr> 
   <td><code>&lt;output&gt;</code></td> 
   <td align="center">定义不同类型的输出，比如脚本的输出。</td> 
  </tr> 
 </tbody> 
</table>

#### 5.新的语义和结构元素 ####

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

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

#### 6.已移除的元素 ####

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

今天到这里~~

[http_blog.csdn.net_weixin_38628915_article_details_78919298]: http://blog.csdn.net/weixin_38628915/article/details/78919298
[http_blog.csdn.net_weixin_38628915_article_details_78921238]: http://blog.csdn.net/weixin_38628915/article/details/78921238
[http_blog.csdn.net_weixin_38628915_article_details_78922319]: http://blog.csdn.net/weixin_38628915/article/details/78922319