HTML5中新增的标签

178 阅读2分钟

H5中的新标签主要是提供了语义化的功能。

脚本

template 代码片段,不会渲染但是能够被JS实例化(类似Vue里的)

章节

article 文章,可以独立于内容其余部分的完整独立内容块。

section 章节

nav 导航,只包含导航链接的章节。

aside 侧消息,和页面内容关联度较低的内容

header 页面或章节的头部

main 文档中主要或重要的内容

footer 页面或章节的尾部(头header身main脚footer中,头脚都要加-er)

组织内容

figure 图例

figcaption 图例的说明文本

文字形式

data 给被框起的文本关联一个对应的数据,能够被机器读取

time 时间和日期值(这很语义化)

mark 需要被高亮的引用文字

ruby ruby元素,用来把 rtrp 包围起来,展示东亚文字的注音/拼音

rt ruby注释,如汉语拼音

rp ruby注释两边的额外插入文本

bdi 脱离父元素文本方向的一段文本

wbr word break opportunity 建议换行位置

嵌入内容

embed 内嵌外部资源(资源有图片或视频等)

video 视频

audio 音频

source 视频/音频的媒体源

track 视频/音频的字幕

canvas 位图占位元素,在JS中写脚本绘画。

svg 内嵌矢量图,直接CSS作画,自带视口和坐标系统。

math 数学公式

表单

datalist 预定义选项内容的选择框(有点类似select,但支持查找和增添)

keygen 密钥对生成器

output 计算值

progress 进度条

meter 滑动条

交互元素

details 可点击小控件

summary details元素的综述或标题

menuitem 可点击菜单项

menu 菜单

input新增的type属性

  • email 自动校验邮件格式
  • search 提供快速清除按钮
  • url 自动校验网址格式
  • tel 屏幕设备上显示拨号键盘
  • number 数字,能给定属性:默认值/最小值/最大值/调整数字的步数(value/min/max/step)
  • range 提供滑块组件,选择范围,可选属性同number
  • color 提供拾色器
  • date 日期
  • month 月份
  • week 星期

参考:HTML5 标签列表