HTML5 新元素
自1999年以后HTML 4.01 已经改变了很多,今天,在HTML 4.01中的几个已经被废弃,这些元素在 HTML5 中已经被删除或重新定义。
为了更好地处理今天的互联网应用,HTML5 添加了很多新元素及功能,比如: 图形的绘制,多媒体内容,更好的页面结构,更好的形式处理,和几个api拖放元素,定位,包括网页 应用程序缓存,存储,网络工作者,等。
HTML5 中的新元素
下面列出的 HTML5 的新元素,以及对它们的描述。
新的语义/结构元素
HTML5 提供的新元素可以构建更好的文档结构:
标签 | 描述 |
---|---|
<article> | 定义文档内的文章。 |
<aside> | 定义页面内容之外的内容。 |
<bdi> | 定义与其他文本不同的文本方向。 |
<details> | 定义用户可查看或隐藏的额外细节。 |
<dialog> | 定义对话框或窗口。 |
<figcaption> | 定义 <figure> 元素的标题。 |
<figure> | 定义自包含内容,比如图示、图表、照片、代码清单等等。 |
<footer> | 定义文档或节的页脚。 |
<header> | 定义文档或节的页眉。 |
<main> | 定义文档的主内容。 |
<mark> | 定义重要或强调的内容。 |
<menuitem> | 定义用户能够从弹出菜单调用的命令/菜单项目。 |
<meter> | 定义已知范围(尺度)内的标量测量。 |
<nav> | 定义文档内的导航链接。 |
<progress> | 定义任务进度。 |
<rp> | 定义在不支持 ruby 注释的浏览器中显示什么。 |
<rt> | 定义关于字符的解释/发音(用于东亚字体)。 |
<ruby> | 定义 ruby 注释(用于东亚字体)。 |
<section> | 定义文档中的节。 |
<summary> | 定义 <details> 元素的可见标题。 |
<time> | 定义日期/时间。 |
<wbr> | 定义可能的折行(line-break)。 |
学习更多有关 HTML5 语义的内容。
新的表单元素
标签 | 描述 |
---|---|
<datalist> | 定义输入控件的预定义选项。 |
<keygen> | 定义键对生成器字段(用于表单)。 |
<output> | 定义计算结果。 |
学习更多有关 HTML 表单元素的内容。
新的输入类型
输入类型 | 描述 |
---|---|
color | 定义输入控件的颜色值。可选择颜色。 |
date | 定义输入控件的日期值。可选择或输入日期。 |
datetime | 定义输入控件的日期值。可选择或输入时间。 |
datetime-local | 定义输入控件的日期值。可选择或输入日期时间。 |
定义输入控件为email。 | |
month | 定义输入控件为月份。 |
number | 定义输入控件为数字。 |
range | 定义输入控件为范围。 |
search | 定义输入控件为查询。 |
tel | 定义输入控件为电话号码。 |
time | 定义输入控件为时间(时/分)。 |
url | 定义输入控件为url。 |
week | 定义输入控件为年周。 |
学习更多的 HTML 输入类型 的内容
新的输入属性
输入类型 | 描述 |
---|---|
autocomplete | 规定输入字段是否应该启用自动完成功能。 |
autofocus | 定义输入控件自动获得焦点。 |
form | 定义 form 属性用于设置 input 元素属于哪个表单。 |
formaction | 定义表单重写 action 属性。 |
formenctype | 定义表单重写 enctype 属性。 |
formmethod | 定义表单重写 method 属性。 |
formnovalidate | 定义表单重写 novalidate 属性。 |
formtarget | 定义表单重写 target 属性。 |
list | 用于设置输入域的 datalist 元素。 |
min | 规定输入字段所允许的最小值。 |
max | 规定输入字段所允许的最大值。 |
multiple | 定义 file 类型可选择多个文件。 |
pattern (regexp) | 定义用于匹配某个句法规则。 |
placeholder | 定义输入控件在内容为空时的提示信息。 |
required | 定义输入控件提交为空时提醒。 |
step | 规定输入字段的合法数字间隔。 |
学习所有的 HTML 输入属性 的内容
HTML5 - 新的属性语法
HTML5 允许四种不同的属性语法。
标签 | 描述 |
---|---|
Empty | <input type="text" value="John Doe" disabled> |
Unquoted | <input type="text" value=John> |
Double-quoted | <input type="text" value="John Doe"> |
Single-quoted | <input type="text" value='John Doe'> |
在 HTML5 中,根据属性所需,可能会使用所有这四种语法。
HTML5 图像
标签 | 描述 |
---|---|
<canvas> | 定义使用 JavaScript 的图像绘制。 |
<svg> | 定义使用 SVG 的图像绘制。 |
新的媒介元素
标签 | 描述 |
---|---|
<audio> | 定义声音或音乐内容。 |
<embed> | 定义外部应用程序的容器(比如插件)。 |
<source> | 定义 <video> 和 <audio> 的来源。 |
<track> | 定义 <video> 和 <audio> 的轨道。 |
<video> | 定义视频或影片内容。 |