---
title: 新增布局标签
date: 2024-06-06T23:51:11Z
tags: []
---



## 1. 布局标签

| 标签名                    | 语义                                                          | 单/双标签 |
| ------------------------- | ------------------------------------------------------------- | --------- |
| header                    | 整个或部分区域的头部                                          | 双        |
| footer                    | 整个或部分区域的底部                                          | 双        |
| nav                       | 导航                                                          | 双        |
| article                   | 文章,帖子,杂志,新闻,博客,评论....                             | 双        |
| section                   | 页面中的某段文字,或文章中的某段文字(里面的文字通常会包含标题) | 双        |
| aside                     | 侧边栏                                                        | 双        |
| main                      | 文档的主要内容(WHATWG没有语义,IE不支持)，几乎不用             | 双        |
| hgroup                    | 如果包裹连续的标题,例如文章主标题,副标题的组合(W3C将其删除)   | 双        |
| 关于`article`和`section`: |                                                               |           |

1. `article`里面有多个`section`
2. `section`强调的是分段或分块,比如将一块内容分成几段
3. `article`比`section`更强调独立性,一块内容如果比较独立,比较完整,应该用`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          | 邮箱的输入类型,表单提交时会验证类型                          |
| url            | url的输入类型,表单提交时会验证类型                           |
| number         | 数字的输入类型,表单提交时会验证类型                          |
| search         | 搜索的输入类型,表单提交时不会验证类型                        |
| tel            | 电话的输入类型,表单提交时不会验证类型,在移动端会唤起数字键盘 |
| range          | 范围选择框,默认值为50,表单提交时不会验证类型                 |
| color          | 颜色选择框,默认值为黑色,表单提交时不会验证类型               |
| date           | 日期选择框,默认值为日期,表单提交时不会验证类型               |
| month          | 月份选择框,默认值为空,表单提交时不会验证类型                 |
| week           | 周选择框,默认值为空,表单提交时不会验证类型                   |
| time           | 时间选择框,默认值为空,表单提交时不会验证类型                 |
| datetime-local | 日期+时间的选择框,默认值为空,表单提交时不会验证类型          |

## 视频标签

```html
<video>标签来定义视频
```

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

## 音频标签

```html
<audio>标签来定义视频
```

| 属性名   | 值                 | 描述                                                                                                                            |
| -------- | ------------------ | ------------------------------------------------------------------------------------------------------------------------------- |
| src      | URL地址            | 音频地址                                                                                                                        |
| controls |                    | 向用户展示音频控件(播放/暂停)                                                                                                   |
| muted    |                    | 音频静音                                                                                                                        |
| autoplay |                    | 音频自动播放                                                                                                                    |
| loop     |                    | 循环播放                                                                                                                        |
| preload  | auto/metadata/none | 音频预加载,如果使用`autoplay`​,则忽略该属性`none`​:不进行预加载`metadata`​:仅预先获取音频的元数据(例如长度)`auto`​:加载整个音频 |

## 全局属性

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