id必须唯一且慎用，因重复时getElementById只返回首个元素，导致锚点跳转、ARIA关联等静默失效；命名须字母开头、全小写、仅含字母数字连字符，优先用class或data-*替代。
全局属性不是“可有可无的装饰”，而是 HTML 结构健壮性和可维护性的底层支撑。漏写、错写或滥用 id、class、data-*，轻则导致 JS 选不到元素、CSS 样式失效，重则让屏幕阅读器报错、SEO 抓取失败、CI 流水线校验直接拒绝合并。
为什么 id 必须唯一且慎用
浏览器不阻止重复 id，但 document.getElementById() 只返回第一个匹配项；aria-labelledby、锚点跳转（#section2）等依赖 id 的功能会静默失败。
- 命名必须以字母或下划线开头，后续只允许字母、数字、
-、_、:、.——id="user-1"合法，id="1-user"非法 - 大小写敏感：
id="Header"和id="header"是两个不同标识 - 避免语义模糊的命名：
id="box3"不如id="search-form"明确用途 - 除非必要（如锚点、ARIA 关联、模态框控制），优先用
class或data-替代id
class 命名和操作的实际约束
class 是最常被误用的全局属性：命名含样式（class="red-btn"）、大小写混用（Class="Btn"）、空格拼错（class="btn primary" 缺少引号）都会引发连锁问题。
- 必须全小写，单词间用短横线：
class="user-profile-card"，禁止userProfileCard或user_profile_card - 禁止用视觉描述命名：改
class="float-left"为class="sidebar-nav"，否则布局一变就成“谎言” - JS 操作务必用
classListAPI：element.classList.add('active')，别用element.className += ' active'—— 后者会覆盖已有类、引入多余空格 - 多个类名必须用空格分隔且包裹在一对双引号内：
class="btn btn-warning is-disabled"
data-* 属性怎么写才真正可用
data- 是前端与后端/模板引擎传递结构化数据的“安全通道”，但它不是随便加个 data-id="123" 就完事 —— 命名不规范会导致 JS 解析失败、服务端无法映射、甚至被某些 CSP 策略拦截。
立即学习“前端免费学习笔记（深入）”；
- 必须全小写，用短横线连接：
data-product-sku="ABC-123"，不能是data-productSku或data_ProductSku - 值必须是字符串；若需传对象/数组，请 JSON.stringify 后再赋值：
data-config='{"theme":"dark","timeout":5000}' - JS 读取统一用
dataset（自动转驼峰）：element.dataset.productSku→"ABC-123"，而非element.getAttribute('data-product-sku') - 避免过度使用：不要用
data-存大量状态（如整个用户信息），该走 API 的走 API，该用状态管理的用状态管理
lang、charset、role 这些“非显性”属性为什么不能省
它们不渲染 UI，但决定页面是否能被正确解析、朗读、索引。漏掉 lang，中文站点在 Safari 下可能触发错误字体回退；没写 charset="UTF-8"，表单提交中文字段可能变成乱码；role 错配（如 role="button" 却没加键盘事件支持），会直接让残障用户卡死。
-
lang必须写在<html>标签上，值为 BCP 47 标准格式：lang="zh-CN"，不是lang="zh"或lang="cn" -
charset必须是<meta charset="UTF-8">，且放在<head>最前面（早于<title>） -
role要严格匹配 ARIA 角色语义：<div role="navigation">可以，但<nav role="navigation">多余且干扰辅助技术 - 所有带
aria-的属性（如aria-hidden、aria-expanded）必须有对应值，且值类型要合法（aria-expanded="true"不能写成aria-expanded="1"）
真正难的不是记住每条规则，而是在写第一行 <html lang="zh-CN">、给第一个按钮加 class="btn btn-primary"、往商品卡片加 data-product-id="456" 时，下意识就做对 —— 因为一旦出错，它不会立刻报红，而是在某个深夜的无障碍测试、某次海外用户投诉、某条 CI 报告里突然浮现。
