HTML5新增加的标签元素
HTML5 新增加了一些语义的标签,能够使得 HTML 文档的结构更加清晰。
- <article> 定义一个文章标签
- <aside> 定义页面内容的侧边栏
- <bdi> 定义格式化为不同方向的文本
- <details> 定义一些详细信息,用户可以显示和隐藏
- <summary> 为 details 标签定义一个可见部分
- <dialog> 定义一个对话框和窗口
- <figure> 定义独立封闭的内容,比如图片,图标,代码等
- <figcaption> 在 figure 标签里面定义标题
- <footer> 定义文档脚部
- <header> 定义文档头部
- <main> 定义文档主题区域
- <mark> 定义标记或者高亮的文本
- <menuitem> 定义一个菜单项,用户可以从弹出菜单中选择
- <meter> 定义在可选范围内的标量测量
- <nav> 定义导航栏
- <progress> 定义任务进度条
- <rp> 定义在不支持 ruby 注释的浏览器中显示什么
- <rt> 定义字符的解释和发音,用于东亚排版
- <ruby> 定义一个 ruby 注释
- <section> 在文档中定义一个部分
- <time> 定义一个时间、日期
- <wbr> 定义一个自动换行的区域
由以上可见,HTML5 的标准还是姗姗来迟,这些东西在 HTML5 未出来之前,使用 JavaScript 特效一样实现的非常好,并且大部分的 HTML 标签绝大多数网站是不用的。所以对于 HTML5 提供的一些很方便的标签或者表单属性,我觉得应该也没有多少人会用,因为默认的 UI 都很丑陋,并且不能满足绝大多数场景的需求。
下面介绍一些新的在表单中使用的标签。
- <datalist> 定义预先定义的选择方便输入控制
- <keygen> 定义密钥队生成器,方便表单使用
- <output> 定义计算结果的输出
新增加的一些表单 input 标签的 type 属性值。
- color, date, datetime, datetime-local, email
- month, number, range, search, tel, time, url, week
新增加的一些表单 input 标签的属性。
- autocomplete, autofocus, form, formaction, formenctype
- formmethod, formnovalidate, formtarget, height, width, list
- min and max, multiple, pattern (regexp), placeholder, required, step
新增的一些图像标签。
- <canvas> 使用 JavaScript 脚本在运行时绘图
- <svg> 用于绘制可伸缩矢量图
新增的一些媒体支持标签。
- <audio> 音频标签
- <embed> 外部应用插件容器
- <source> 视频或者音频资源
- <track> 视频或者音频的曲目
- <video> 视频或者电影内容