HTML5 新增元素与废弃元素

Posted 2021-03-30 斑马编程教程

html的开发到 1999 年 HTML 4 就停止了。万维网联盟（W3C）把重点转向将 HTML 的底层语法从标准通用标记语言（SGML）改为可扩展标记语言（XML），以及可缩放向量图型（SVG）、XForms 和 MathML 这些全新的标记语言。

HTML5 第一次向 HTML 中引入新的元素。新的结构元素包括 aside、figure 和 section。新的内联元素包括 time、meter 和 progress。新的内嵌元素有 video 和 audio。新的交互元素有 details、datagrid 和 command。

这些元素提供了一些额外的功能来创建吸引人的动态网站。在这些元素的帮助下，您可以使代码变得简单快捷。

---

HTML5<canvas> 新元素

标签	描述
<canvas>	标签定义图形，比如图表和其他图像。该标签基于 javascript 的绘图 API

---

HTML5新多媒体元素

标签	描述
<audio>	定义音频内容
<video>	定义视频（video 或者 movie）
<source>	定义多媒体资源 <video> 和 <audio>
<embed>	定义嵌入的内容，比如插件。
<track>	为诸如 <video> 和 <audio> 元素之类的媒介规定外部文本轨道。

---

HTML5新表单元素

标签	描述
<datalist>	定义选项列表。请与 input 元素配合使用该元素，来定义 input 可能的值。
<keygen>	规定用于表单的密钥对生成器字段。
<output>	定义不同类型的输出，比如脚本的输出。

---

HTML5新的语义和结构元素

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

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

---

HTML5新的<input>类型

类型	描述
color	定义颜色选择器的输入字段。
date	定义日期选择器的输入字段。
datetime	定义带有时区信息的完整日期和时间显示。
datetime-local	定义没有时区信息的日期和时间。
email	使用电子邮件模式验证定义输入字段。
month	定义输入字段以输入特定年份的月份
number	定义仅选择数字值的字段。
range	定义一个数值选择器，其范围为1到100。
search	用于定义搜索字段。
tel	定义输入电话号码的控件。
time	定义输入没有时区的时间值的控件。
url	定义输入URL的输入字段
week	为特定年份的周值定义了一个选择器。

---

HTML5已废弃的元素

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

• <acronym>

• <applet>

• <basefont>

• <big>

• <center>

• <dir>

• <font>

• <frame>

• <frameset>

• <noframes>

• <strike>

• <tt>