一、全局属性（所有 HTML 标签都支持，最常用）
所有元素通用，是写 HTML 每天都会用到的基础。
表格
| 属性 | 作用 | 示例 | 注意事项 |
|---|---|---|---|
id | 元素唯一标识符 | <div id="user-card-1001"> | 页面内绝对不能重复；不能以数字开头；JS/CSS 精准选择用 |
class | 元素类名，用于 CSS 样式和批量选择 | <div class="card vip-user"> | 可重复；多个类名用空格分隔；优先用 class 写样式 |
style | 内联样式 | <div style="color: red; font-size: 16px;"> | 优先级最高；只用于临时单个样式，不要写大量样式 |
title | 鼠标悬停时显示的提示文本 | <a href="#" title="点击查看详情">详情</a> | 支持换行（ ）；不要放重要信息 |
data-* | 自定义数据属性（W3C 标准） | <div data-user-id="1001" data-is-vip="true"> | 短横线转驼峰读取（dataset.userId）；值全是字符串；配合 PHP 传数据神器 |
lang | 元素内容的语言 | <html lang="zh-CN"> | 影响浏览器翻译、屏幕阅读器；建议在<html>标签全局设置 |
dir | 文本方向 | <div dir="rtl">阿拉伯文</div> | 可选值：ltr（从左到右，默认）、rtl（从右到左） |
hidden | 隐藏元素 | <div hidden>我被隐藏了</div> | 等价于 CSS display: none；元素仍在 DOM 中，JS 可操作 |
tabindex | Tab 键切换焦点的顺序 | <input tabindex="1"> | 0：默认顺序；-1：不可通过 Tab 聚焦；正数：按数字顺序 |
contenteditable | 元素内容是否可编辑 | <div contenteditable="true">可编辑文本</div> | 常用值：true/false；编辑后内容需要 JS 手动获取 |
draggable | 元素是否可拖拽 | <div draggable="true">拖拽我</div> | 配合 JS 拖拽事件使用 |
spellcheck | 是否开启拼写检查 | <textarea spellcheck="false"></textarea> | 对输入框、文本域生效；默认开启 |
translate | 是否允许浏览器翻译 | <div translate="no">品牌名</div> | 保护专有名词不被翻译 |
二、常用标签专属属性（90% 开发场景只用到这些）
按标签分类，只列每个标签最核心、最常用的属性。
1. 链接 <a>
表格
| 属性 | 作用 | 示例 | |
|---|---|---|---|
href | 链接目标地址 | <a href="https://wuxuanchen.top">我的博客</a> | 空链接写href="#"（不要写href=""） |
target | 链接打开方式 | <a href="#" target="_blank">新窗口打开</a> | 常用值：_self（当前页，默认）、_blank（新窗口） |
rel | 链接与当前页的关系 | <a href="#" rel="noopener noreferrer">安全链接</a> | 新窗口打开必须加rel="noopener noreferrer"，防止安全漏洞 |
download | 下载文件而不是打开 | <a href="file.pdf" download="文档.pdf">下载</a> | 只能下载同域名下的文件 |
2. 图片 <img>
表格
| 属性 | 作用 | 示例 | |
|---|---|---|---|
src | 图片地址 | <img src="avatar.jpg"> | 必须属性 |
alt | 图片加载失败时的替代文本 | <img src="avatar.jpg" alt="用户头像"> | 必须写！影响 SEO 和无障碍 |
width/height | 图片宽高 | <img src="avatar.jpg" width="100" height="100"> | 单位是像素；建议用 CSS 控制，避免拉伸 |
loading | 懒加载 | <img src="avatar.jpg" loading="lazy"> | 浏览器原生懒加载，页面滚动到可见区域才加载 |
3. 表单 <form>（PHP 后端最常用）
表格
| 属性 | 作用 | 示例 | |
|---|---|---|---|
action | 表单提交地址 | <form action="submit.php" method="post"> | 不写默认提交到当前页 |
method | 提交方式 | <form method="post"> | 常用值：get（参数在 URL）、post（参数在请求体，推荐） |
enctype | 表单数据编码方式 | <form enctype="multipart/form-data"> | 上传文件时必须写这个值 |
target | 提交结果打开方式 | <form target="_blank"> | 同<a>标签的target |
4. 输入框 <input>（表单核心）
表格
| 属性 | 作用 | 适用 type |
|---|---|---|
type | 输入框类型 | 所有；常用值：text/password/email/number/checkbox/radio/file/submit/button |
name | 表单字段名（PHP 接收用） | 所有；PHP 通过$_POST['name']获取值 |
value | 输入框默认值 | 所有；单选 / 复选框必须写 value |
placeholder | 输入提示文本 | text/password/email/textarea |
required | 必填验证 | 所有输入框；浏览器原生验证 |
disabled | 禁用输入框 | 所有；禁用后值不会被提交 |
readonly | 只读输入框 | 所有；只读但值会被提交 |
checked | 默认选中 | checkbox/radio |
maxlength | 最大输入长度 | text/password/textarea |
min/max | 数值范围 | number/date |
step | 数值步长 | number；step="0.01"表示保留两位小数 |
5. 其他表单元素
<select>下拉框：name、multiple（多选）、disabled<option>选项：value（提交的值）、selected（默认选中）<textarea>文本域：name、rows（行数）、cols（列数）、placeholder<button>按钮：type（button/submit/reset，默认是submit！）、disabled
6. 媒体标签
<video>视频：src、controls（显示控制条）、autoplay（自动播放，需静音）、loop（循环）、muted（静音）、poster（封面图）- “ 音频：同
<video>，没有poster属性
7. 表格标签
<td>/<th>单元格：colspan（跨列）、rowspan（跨行）- 注意：
border、cellpadding、cellspacing已废弃，全部用 CSS 控制
三、事件属性（基础交互用，复杂交互用 JS 绑定）
事件属性用于在 HTML 中直接绑定 JS 代码，简单场景可用，复杂项目建议用 JS 统一绑定。
常用鼠标事件
onclick：点击事件ondblclick：双击事件onmouseover：鼠标移入onmouseout：鼠标移出onmousedown：鼠标按下onmouseup：鼠标松开
常用键盘事件
onkeydown：键盘按下onkeyup：键盘松开onkeypress：按键按下并松开（不推荐，已废弃）
常用表单事件
onchange：值改变并失去焦点时触发oninput：值实时改变时触发onsubmit：表单提交时触发onfocus：获得焦点onblur：失去焦点
常用文档 / 窗口事件
onload：页面加载完成后触发onscroll：页面滚动时触发onresize：窗口大小改变时触发
示例：
html
<button onclick="alert('点击了按钮')">点击我</button>
<input type="text" oninput="console.log(this.value)">
四、特殊属性
1. 布尔属性
只要属性存在就表示true，不需要写值，写值也不影响结果。
html
<!-- 正确写法 -->
<input disabled>
<input checked>
<div hidden>
<!-- 也可以这么写，但没必要 -->
<input disabled="disabled">
<input checked="true">
2. ARIA 无障碍属性
用于提升屏幕阅读器的可访问性，现代网站建议添加。
role：定义元素的角色，如role="button"、role="alert"aria-label：元素的描述文本，如<button aria-label="关闭弹窗">×</button>aria-hidden="true"：隐藏元素，不让屏幕阅读器读取
五、常见坑与最佳实践
- 所有属性值建议用双引号包裹，特殊字符必须用引号
dataset取出来的值全是字符串，数字 / 布尔值需要手动转换- 不要用内联
style写大量样式，优先用class id不能重复，class可以重复- 新窗口打开链接必须加
rel="noopener noreferrer"，防止安全漏洞 - 上传文件时，
<form>必须加enctype="multipart/form-data" <button>默认是submit类型，放在表单里会自动提交，需要手动指定type="button"