title: “HTML5新增 0810”
date: 2022-08-11T13:56:16+08:00
文章目录
HTML5新增(语义化)标签
header头部、footer底部、main定义文档的主内容、nav导航、aside侧边栏、section板块、article 文章、time日期(内联元素)、mark标记(内联元素)。
figure定义自包含内容，比如图示、图表、照片、代码清单等等，常与figcaption标签连用(其连用相当于自定义列表)。
video 视频 内联块元素，有以下属性(只有属性没有值)：
- controls 显示控件(播放 进度条等)的HTML属性
- loop 自动循环播放
- muted 自动静音
- autoplay 自动播放: Google/Firefox浏览器中设置该属性时，会静音状态下自动播放；IE浏览器会正常播放。
audio 音频 内联块元素
- controls 显示控件(播放 进度条等)的HTML属性
- loop 自动循环播放
- muted 自动静音
- autoplay 自动播放: Google/Firefox浏览器中设置该属性时，会静音状态下自动播放；IE浏览器会正常播放。
新增状态标签
meter标签
定义已知范围(尺度)内的标量测量，eg：
电量值表示：
<meter min="0" max="100" value="60" low="50" high="70"></meter>
解释：min/max表示最低/高范围区间；value表示当前的值；low表示低值，即当前值（value值）如果低于该值，会出现警告色；high值表示高值，即当前值（value值）如果高于该值，会出现警告色。
progress标签：
定义任务进度。
<progress min="0" max="100" value="40"></progress>
解释：min:最低范围；max最高范围；value表示当前进度。
扫描二维码关注公众号，回复：
17492982 查看本文章
datalist标签
带搜索的下拉列表（input身上的list的属性值要绑定到datalist身上的id名）内联块元素
<input type="text" list="myData">
<datalist id="myData" style="width: 300px;">
<option value="a1a1a1a1a1"></option>
<option value="a2a1a1a1a1"></option>
</datalist>
details和summary标签
定义用户可查看或隐藏的额外细节。常与summary标签连用，summary标签用来定义 details 元素的可见标题。
<details>
<summary>标题</summary>
<p>
展开内容
</p>
</details>
新增表单type类型和属性
新增表单type类型
地址 type=“url”
<input type="url">
邮箱 type=“email”
<input type="email">
数字 type=“number” min=“最小” max=“最大”
<input type="number" min="10" max="100">
颜色 type=“color”
<input type="color">
滑块/范围 type=“range” min=“最小” max=“最大” value=“当前等级”
<input type="range" min="0" max="100" value="30">
时分 type=“time”
<input type="time">
月 type=“month”
<input type="month">
周 type=“week”
<input type="week">
年月日时分 type=“datetime-local”
<input type="datetime-local">
新增表单属性
- required 必填
- autofocus 自动获取焦点
- autocomplete=“off/on(开启)” 显示历史记录 如果要显示历史记录，需要将数据存储到后台，要借助name属性
- pattern=“” 正则(限定用户输入的值的规则) eg：符合规则a-z A-Z 0-9 只能输入3个 pattern="[a-zA-Z0-9]{3}
- multiple 多选 加到文件上传标签(即
type="file")内
本篇文章只是列举了部分较为常用的HTML5新增标签，如想了解更多，请访问w3c：click here