新增布局标签

1. 布局标签

标签名语义单/双标签
header整个或部分区域的头部
footer整个或部分区域的底部
nav导航
article文章,帖子,杂志,新闻,博客,评论…
section页面中的某段文字,或文章中的某段文字(里面的文字通常会包含标题)
aside侧边栏
main文档的主要内容(WHATWG没有语义,IE不支持),几乎不用
hgroup如果包裹连续的标题,例如文章主标题,副标题的组合(W3C将其删除)
关于articlesection:
  1. article里面有多个section
  2. section强调的是分段或分块,比如将一块内容分成几段
  3. articlesection更强调独立性,一块内容如果比较独立,比较完整,应该用article元素

2.状态标签

语义:定义已知范围内的标量测量,例如电量,磁盘用量

标签名描述
high数值规定高值
lov数值规定低值
max数值规定最大值
min数值规定最小值
optimum数值规定当前最优值
value数值规定当前值

语义:显示某个任务完成的进度指示器

标签名描述
max数值规定最大值
value数值规定当前值

列表标签

标签名语义单/双标签
datalist用于搜索框的关键词提示
datails用于展示问题和答案,或对专有名称进行解释
summary写在datails里面,指定问题或专有名称

文本注音

标签名语义单/双标签
ruby包裹需要注音的文字
rt写注音,rt标签写在ruby的里面

文本标记

标签名语义单/双标签
mark标记

W3C建议标记搜索结果的关键字

表单属性

novalidate:不检验表单

表单控件属性

属性名功能
placeholder提示文字,适用于文本输入类的表单控件
required表示输入项必填,适用于按钮外其他表单控件
autofocus自动获取焦距,适用于所有表单控件
autocomplete匹配历史中想匹配的,适用文字输入类的表单控件
pattern正则表达式,适用文字输入类的表单控件,空白和多行无效

input属性

属性名功能
email邮箱的输入类型,表单提交时会验证类型
urlurl的输入类型,表单提交时会验证类型
number数字的输入类型,表单提交时会验证类型
search搜索的输入类型,表单提交时不会验证类型
tel电话的输入类型,表单提交时不会验证类型,在移动端会唤起数字键盘
range范围选择框,默认值为50,表单提交时不会验证类型
color颜色选择框,默认值为黑色,表单提交时不会验证类型
date日期选择框,默认值为日期,表单提交时不会验证类型
month月份选择框,默认值为空,表单提交时不会验证类型
week周选择框,默认值为空,表单提交时不会验证类型
time时间选择框,默认值为空,表单提交时不会验证类型
datetime-local日期+时间的选择框,默认值为空,表单提交时不会验证类型

视频标签

<video>标签来定义视频
属性名描述
srcURL地址视频地址
height像素值设置视频高度
width像素值设置视频宽度
controls向用户展示视频控件(播放/暂停)
muted视频静音
autoplay视频自动播放
loop循环播放
posterURL地址视频封面
preloadauto/metadata/none视频预加载,如果使用autoplay​,则忽略该属性none​:不进行预加载metadata​:仅预先获取视频的元数据(例如长度)auto​:加载整个视频

音频标签

<audio>标签来定义视频
属性名描述
srcURL地址音频地址
controls向用户展示音频控件(播放/暂停)
muted音频静音
autoplay音频自动播放
loop循环播放
preloadauto/metadata/none音频预加载,如果使用autoplay​,则忽略该属性none​:不进行预加载metadata​:仅预先获取音频的元数据(例如长度)auto​:加载整个音频

全局属性

属性名功能
contenteditable表示元素是否可以被用户编辑,可选值如下:true​:可编辑false​:不可编辑
draggable表示元素是否可以被拖动,可选值如下:true​:可拖动false​:不可拖动
hidden隐藏元素
spellcheck规定是否对元素进行拼写和语法检查,可选值如下:true​:检查false​:不检查
contextmenu用于规定元素的上下文菜单,在用户点击元素时显示
data-*用于储存页面私有数据