id属性必须全局唯一，重复会导致js选中错乱、css样式失效及关联失败；应避免纯数字开头、特殊字符及驼峰命名，推荐字母数字连字符组合；框架中需动态生成稳定唯一id。
id 属性必须全局唯一，重复会导致 JS 选中错乱
HTML 中 id 不是“起个名字就行”，而是浏览器内部的快速查找锚点。一旦页面出现两个相同 id，document.getElementById() 只返回第一个匹配元素，后续逻辑大概率失效——尤其在动态插入内容、组件复用或第三方脚本介入时，这种错误极难排查。
常见错误现象：getElementById("modal") 返回 null 或错误元素；CSS 的 #modal 样式只生效在第一个；<label for="input"></label> 关联失效。
- 每个
id值在整页 HTML（含 iframe 内容）中必须唯一，不分大小写（ID和id被视为相同） - 避免用纯数字开头，如
id="123"—— 合法但部分老版本 CSS 选择器不支持，且易与数字变量混淆 - 服务端渲染或模板循环中，务必拼接唯一标识：比如
id="user-{{id}}"、id="item-"
id 值不能含空格、句号、冒号等 CSS 选择器特殊字符
看似合法的 id="user.name" 或 id="btn:submit" 在 HTML 解析上没问题，但会直接破坏 CSS 和 JS 使用：
CSS 中 #user.name 被解析为「id=user 且 class=name」；JS 中 querySelector("#user.name") 同样失败；getElementById("user.name") 虽能取到元素，但和样式/其他选择器完全脱节。
立即学习“前端免费学习笔记（深入）”；
- 推荐只用字母、数字、连字符
-、下划线_，如id="search-input"、id="sidebar-toggle" - 避免使用
.、:、[、]、/等字符，哪怕 HTML5 允许，实际工程中就是埋雷 - 若需表达层级或类型，用连字符分隔单词，别用驼峰（
id="userProfile"合法但易误读；id="user-profile"更稳妥）
id 和 name 属性用途完全不同，别混用
id 是 DOM 定位用的，name 是表单数据提交用的。把 name 当 id 用（比如写 <input name="email" id="email">），表面看没问题，但一旦后端返回同名字段、前端又用模板批量生成，就极易撞车。
-
id用于 JS 操作、CSS 样式、<label for=""></label>关联、锚点跳转（#section1） -
name仅在<form></form>提交时决定字段键名，对 DOM 查找无意义；getElementsByName()返回 NodeList，不是单个元素 - 两者可以相同（如都叫
email），但设计意图不同，不要因为“省事”而省掉id—— 尤其是需要 JS 绑定事件的输入框
Vue/React 等框架里，id 动态生成要防重复
框架组件常被多次渲染，比如列表项 v-for 或 {items.map()}，如果写死 id="delete-btn"，结果就是十多个相同 id，违反规范且影响可访问性（a11y）。
更隐蔽的问题是：服务端渲染（SSR）+ 客户端水合（hydration）时，若服务端和客户端生成的 id 不一致，React/Vue 会警告甚至丢弃 DOM。
- 用 key 衍生 id：如
:id="`delete-btn-${item.id}`"、id={`tooltip-${index}`} - 避免用 Math.random() 或 Date.now() 生成 id —— SSR 下无法保证服务端和客户端一致
- 需要稳定唯一 ID 又无业务主键时，可用短哈希（如 nanoid）或框架提供的 stable key 工具（如 Vue 的
useId()Composition API）
id 会从一个视觉小问题，演变成定位困难、脚本静默失败、无障碍工具报错的复合型故障。真正麻烦的不是写对，而是改错——尤其在别人写的遗留代码里找第 7 个 id="header"。 
