HTML标签属性必须写在开始标签内，格式为属性名="属性值"，用空格分隔；常见错误包括漏引号、拼错属性名（如scr）、布尔属性赋值（如checked="true"）；src、href、alt、id、class等高频属性值须用双引号包裹；lang必须出现在<html>标签上且推荐用lang="zh-CN"；自闭合标签（如<img>、<input>）不可写闭合标签；至少需href，外链需target="_blank"加rel="noopener"；<img>必须有src和alt；<input>必设name和type；<form>必设action和method；data-*属性名仅支持小写字母、数字、短横线，JS读取应使用dataset API；required、placeholder、autofocus等表单属性各有特定行为与限制；属性是契约，需确保语义准确并被实际使用。
怎么给HTML标签加属性才不会出错
属性必须写在开始标签内部，格式是 属性名="属性值"，中间用空格隔开。常见错误是漏掉引号、拼错属性名（比如把 src 写成 scr），或者把布尔属性（如 checked）写成 checked="true"——它只要存在就生效，不需要赋值。
以下几点要盯紧：
-
src、href、alt、id、class这些高频属性，值一律用双引号包裹，哪怕值是纯数字或单词（如id="header-1"） -
lang必须出现在<html>标签上，且推荐用lang="zh-CN"而不是lang="zh"，更符合 W3C 推荐 - 自闭合标签（如
<img>、<input>）不能写</img>，HTML5 不认这种写法
哪些属性该优先设置，哪些可以先不碰
不是每个标签都要塞满属性。真正影响功能和可访问性的核心属性就那几个：
-
<a>标签：至少要有href；如果指向新页面，加上target="_blank"，同时务必配rel="noopener"防安全漏洞 -
<img>标签：src和alt是硬性要求，缺一不可；width/height可选，但设了能避免布局偏移（CLS） -
<input>标签：name是表单提交必需的，否则后端收不到这个字段；type决定输入行为，别默认用text代替email或number -
<form>标签：action和method必须明确，否则提交会走当前 URL + GET 方式，容易出错
data-* 属性怎么用才不踩坑
data- 是唯一允许开发者自由定义的属性前缀，用于存私有数据，比如 data-user-id="12345"。但它不是万能胶水：
立即学习“前端免费学习笔记（深入）”；
- 属性名只能用小写字母、数字、短横线（
-），不能有大写或下划线；data-user_id是非法的，浏览器会忽略 - JS 读取时要用
datasetAPI：el.dataset.userId（自动驼峰化），而不是el.getAttribute('data-user-id')—— 后者也能读，但前者更规范 - 别用
data-存敏感信息（如 token、密码），它完全暴露在 HTML 源码里，前端无保密能力 - 大量使用
data-往往说明结构设计有问题，优先考虑用真实 DOM 层级或 JS 状态管理替代
表单类属性（required、placeholder、autofocus）的实际效果差异
这些属性看着简单，但浏览器兼容性和交互反馈差别不小：
-
required：只对<input>、<select>、<textarea>生效；提交时校验，但不阻止 JS 手动调用form.submit()，得配合checkValidity()主动判断 -
placeholder：纯提示文本，不占语义，屏幕阅读器可能跳过；别把它当 label 用，<label>才是正确关联方式 -
autofocus：页面加载后自动聚焦，但同一页面只能有一个生效；移动端 Safari 有时会忽略，且可能触发软键盘遮挡内容 -
pattern：正则校验仅在提交时触发，不实时反馈；错误提示文案无法自定义，靠浏览器默认（Chrome 显示“请匹配所要求的格式”）
最常被忽略的一点：属性不是装饰品，而是契约。你写了 required，就得接受浏览器强制校验；写了 alt，就得确保描述准确可读；写了 data-id，就要在 JS 里真去用它——否则不如不写。
