W3C中文教程
全球最大最新的中文 Web 技术教程
HTML CSS SQL PHP COLORS MYSQL BOOTSTRAP
 

HTML5 新元素



下面是一个新HTML5元素的列表,并描述了它们的用途。


新语义/结构元素

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

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

阅读更多的 HTML5 语义


新表单元素

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

阅读所有关于旧和新的表单元素 HTML表单元素


新输入类型

新输入类型 新输入属性
  • 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="John" 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 的绘图 API
<svg> 使用SVG定义图形绘图

阅读更多的 HTML5 Canvas

阅读更多的 HTML5 SVG


新多媒体元素

标签 描述
<audio> 定义音频内容
<embed> 定义嵌入的内容,比如插件
<source> 定义多媒体资源 <video> 和 <audio>
<track> 定义 <video> 和 <audio> 的曲目
<video> 定义视频或电影内容

阅读更多的 HTML5 视频

阅读更多的 HTML5 音频