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> | 定义视频或影片内容。 |