HTML5 新元素


HTML5中的新元素

HTML5添加了很多新元素及功能,比如: 图形绘制(cavnas),多媒体内容,更好的页面结构,更好的形式处理和新的HTML5 API,拖放(Drag and Drop),地理位置定位(Geolocation),应用缓存(Application Cache),本地数据存储(Local Storage),线程(Web Workers)等


新的语义/结构元素

HTML5为更好的文档结构提供了新元素:

标签(Tag) 描述(Description)
<article> 定义文档内的文章
<aside> 定义页面内容之外的内容
<bdi> 定义与其他文本不同的文本方向
<details> 定义用户可查看或隐藏的额外细节
<dialog> 定义对话框或窗口
<figcaption> 定义 <figure> 元素的标题
<figure> 定义自包含内容,比如图示、图表、照片、代码清单等等
<footer> 定义了文档或section的页脚区域
<header> 定义了文档或section的头部区域
<main> 定义文档的主内容
<mark> 定义带有记号的文本
<meter> 定义已知范围内的标量测量(标尺)
<nav> 定义文档内的导航链接
<progress> 定义任何类型的任务的进度
<rp> 在 ruby 注释中使用,定义不支持 ruby 元素的浏览器所显示的内容
<rt> 定义字符(中文注音或字符)的解释或发音
<ruby> 定义 ruby 注释(中文注音或字符)
<section> 标签定义文档或应用的一个部分
<summary> 标签包含 <details> 元素的标题
<time> 定义日期或时间
<wbr> 规定在文本中的何处适合添加换行符

阅读有关 HTML5语义 的更多信息。


新表单元素

标签(Tag) 描述(Description)
<datalist> 定义选项列表。请与 input 元素配合使用该元素,来定义 input 可能的值
<output> 定义不同类型的输出,比如脚本的输出

阅读 HTML表单元素 中的所有新旧 表单元素


新的Input类型

Input类型 Input属性
  • color
  • date
  • datetime
  • datetime-local
  • email
  • month
  • number
  • range
  • search
  • tel
  • time
  • url
  • week
  • autocomplete
  • autofocus
  • form
  • formaction
  • formenctype
  • formmethod
  • formnovalidate
  • formtarget
  • height and width
  • list
  • min and max
  • multiple
  • pattern (regexp)
  • placeholder
  • required
  • step

了解 HTML输入类型 中的所有新 输入类型

了解 HTML输入属性 中的所有新 输入属性


HTML5 - 新属性语法

HTML5允许四种不同的属性语法。

此示例演示<input>标记中使用的不同语法:

类型 示例
空(Empty) <input type="text" value="uihtml" disabled >
没有引号(Unquoted) <input type="text" value=uihtml >
双引号(Double-quoted) <input type="text" value="uihtml 教程" >
单引号(Single-quoted) <input type="text" value='uihtml 教程' >

在HTML5中,可以使用所有四种语法,具体取决于属性所需的内容。


HTML5图形

标签(Tag) 描述(Description)
<canvas> 标签定义图形,比如图表和其他图像。该标签基于 JavaScript 的绘图 API
<svg> 定义使用 SVG 的图像绘制

阅读有关 HTML5 Canvas 的更多信息

阅读有关 HTML5 SVG 的更多信息


新媒体元素

标签(Tag) 描述(Description)
<audio> 定义声音或音乐内容
<embed> 定义外部应用程序的容器(比如插件)
<source> 为媒体元素定义多个媒体资源 (<video> 和 <audio>)
<track> 定义媒体元素的文本轨道 (<video> 和 <audio>)
<video> 定义视频或影片内容

阅读有关 HTML5视频 的更多信息

阅读有关 HTML5音频 的更多信息