1. 什么是属性
属性可以为 HTML 标签提供一些额外信息，或者对 HTML 标签进行修饰。属性需要添加在开始标签中，语法格式为：
attr="value"
attr表示属性名value表示属性值。属性值必须使用双引号" "或者单引号’ '包围。
注意⚠️ ：虽然双引号和单引号都可以包围属性值，但是为了规范和专业，请尽量使用双引号。
一个标签可以没有属性，也可以有一个或者多个属性。
2. 属性分类
HTML 属性有很多，大体可以分为三类：
- 全局属性：有些属性适用于大部分或者所有 HTML 标签
- 专用属性：有些属性只适用于一个或者几个特定的 HTML 标签
- 自定义属性：借助 CSS 和 JavaScript 处理自定义属性，为 HTML 标签添加指定样式或者行为
3. 属性列表
tip: 颜色加深是常用属性
| 属性名 | 元素 | 描述 |
|---|---|---|
| accept | form， input | 服务器接受内容或文件类型的列表 |
| accept-charset | form | 支持的字符集列表 |
| accesskey | 全局属性 | 定义键盘快捷键来激活或者聚焦元素 |
| action | form | 表单信息提交的 url 地址，指向进行处理的程序 |
| align | applet, caption, col, colgroup, hr, iframe, img, table, tbody, td, tfoot , th, thead, tr | 设置元素的水平对齐 |
| allow | iframe | 指定iframe的功能策略 |
| alt | applet, area, img, input | 在图片无法呈现时的替代文本 |
| async | script | 表示该脚本应该异步执行 |
| autocapitalize | 全局属性 | 设置用户输入时输入是否自动大写 |
| autocomplete | form, input, select, textarea | 表示该表单中是否可以由浏览器自动完成填值 |
| autofocus | button, input, keygen, select, textarea | 在网页加载后该元素应该自动聚焦 |
| background | body, table, td, th | 背景综合属性 |
| bgcolor | body, col, colgroup, marquee, table, tbody, tfoot, td, th, tr | 元素的背景颜色 |
| border | img, object, table | 边框宽度 |
| buffered | audio, video | 包含已缓存媒体的时间范围 |
| challenge | keygen | 与公钥一起提交的挑战字符 |
| charset | meta, script | 申明该页面或脚本的字符编码 |
| checked | command, input | 指出该元素在页面加载后是否处于选中状态 |
| cite | blockquote, del, ins, q | 包含一个 URI，用来指明引用或修改的源地址 |
| class | 全局属性 | 经常和 CSS 一起配合使用来修饰元素 |
| code | applet | 标明被加载和执行的 applet 类文件的 URL |
| color | basefont, font, hr | 属性可用于指定颜色 |
| cols | textarea | 定义一个 textarea 中包含多少列 |
| colspan | td, th | 该属性一般用在 td 标签中，用于指定一个单元格占用多少列，例如:td colspan='2’表示占用一个单元格占 2 列 |
| content | meta | 与http equiv或名称相关联的值，具体取决于上下文 |
| contenteditable | 全局属性 | 指出该元素的内容是否可以被编辑 |
| contextmenu | 全局属性 | 定义将用作元素上下文菜单的menu元素的 ID |
| controls | audio, video | 指出浏览器是否对用户显示播放控制台 (前进或回退) |
| coords | area | 指定热点区域坐标的一组值 |
| data | object | 资源 URL 地址 |
| data-* | 自定义属性 | |
| 允许你对于一个 HTML 元素绑定自定义的属性 | ||
| dir | 全局属性 | 定义文字方向。允许的值为ltr（从左到右）或rtl（从右到左） |
| disabled | button, command, fieldset, input, keygen, optgroup, option, select, textarea | 指示用户是否可以与元素交互 |
| download | a, area | 指示超链接用于下载资源 |
| for | label, output | 描述与当前元素绑定的元素 |
| form | button, fieldset, input, keygen, label, meter, object, output, progress, select, textarea | 指示作为元素所有者的窗体 |
| height | canvas, embed, iframe, img, input, object, video | 注意：在某些情况下，例如div，这是一个遗留属性，在这种情况下应该使用 CSS height 属性。 在其他情况下，例如canvas，必须使用此属性指定高度 |
| hidden | 全局属性 | 是否隐藏 |
| href | a, area, base, link | 关联资源的 URL |
| id | 全局属性 | 通常与CSS一起使用以设置特定元素的样式。此属性的值必须唯一 |
| itemprop | 全局属性 | |
| language | script | 定义元素中使用的脚本语言 |
| loop | audio, bgsound, marquee, video | 指示媒体完成后是否应从头开始播放 |
| max | input, meter, progress | 指示允许的最大值 |
| maxlength | input, textarea | 定义元素中允许的最大字符数 |
| media | a, area, link, source, style | 指定为其设计链接资源的媒体的提示 |
| method | form | 定义提交表单时要使用的HTTP方法。可以是GET（默认）或POST |
| min | input, meter | 指示允许的最小值 |
| multiple | input, select | 指示是否可以在电子邮件或文件类型的输入中输入多个值 |
| name | button, form, fieldset, iframe, input, keygen, object, output, select, textarea, map, meta, param | 元素的名称。例如，服务器用于标识表单提交中的字段 |
| required | input, select, textarea | 指示是否需要填写此元素 |
| rows | textarea | 定义文本区域中的行数 |
| rowspan | td, th | 定义表单元格应跨越的行数 |
| spellcheck | 全局属性 | 指示元素是否允许拼写检查 |
| scope | th | |
| scoped | style | |
| selected | option | 定义将在页面加载时选择的值 |
| size | input, select | 定义元素的宽度（以像素为单位）。如果元素的类型属性是文本或密码，则为字符数 |
| span | col, colgroup | |
| src | audio, embed, iframe, img, input, script, source, track, video | 可嵌入内容的URL |
| step | input | 定义元素中使用的语言 |
| style | 全局属性 | 定义 CSS 样式，这些样式会覆盖之前设置的样式 |
| tabindex | 全局属性 | 替代浏览器的默认选项卡顺序，并遵循指定的顺序 |
| target | a, area, base, form | |
| title | 全局属性 | 当鼠标悬停在元素上面时，提示框显示的文本 |
| type | button, input, command, embed, object, script, source, style, menu | 定义元素的类型 |
| value | button, option, input, li, meter, progress, param | 定义页面加载时，在元素内显示的默认值 |
| width | canvas, embed, iframe, img, input, object, video | 注意：在某些情况下，例如＜div＞，这是一个遗留属性，在这种情况下，应该使用CSS width属性。在其他情况下，如＜canvas＞，必须使用此属性指定宽度 |
| wrap | textarea | 指示文本是否应换行 |
3.1 例举几个常用的属性
- id 全局属性
<div id="attr">我是id属性, 一个标签只有一个id</id>
- class 全局属性
<div class="attr1 sttr2">我是class属性, 一个标签可以有多个class</id>
- src 专用属性
<img src="./web入门.png" alt="在图片无法呈现时的替代文本" width="100" height="50">
- data-* 自定义属性
<div data-params="web入门"></div>