HTML5新增-0810

---

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表示当前进度。

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">

新增表单属性

1. required 必填
2. autofocus 自动获取焦点
3. autocomplete=“off/on(开启)” 显示历史记录 如果要显示历史记录，需要将数据存储到后台，要借助name属性
4. pattern=“” 正则(限定用户输入的值的规则) eg：符合规则a-z A-Z 0-9 只能输入3个 pattern="[a-zA-Z0-9]{3}
5. multiple 多选 加到文件上传标签(即type="file")内

本篇文章只是列举了部分较为常用的HTML5新增标签，如想了解更多，请访问w3c：click here