html元素id必须全局唯一且语义清晰，用于锚点、label关联、aria及单例js控制；列表项等可复用结构禁用静态id；推荐连字符命名如“search-input”；动态内容需数据驱动生成；多数场景优先使用class或data-*属性。
HTML 元素的全局唯一标识符（id）不是“随便起个名字”，而是要服务于定位、可访问性和语义一致性。用对了，JS 快、跳转准、屏幕阅读器顺；用错了，元素找不着、样式乱套、表单关联失效——而且问题常在上线后才暴露。
id 必须全局唯一，且只用于真正需要“唯一性”的场景
整个 HTML 文档（含 iframe 内容）中，任意两个元素不能有相同 id。浏览器不报错，但后果明确：
-
document.getElementById('save-btn')永远只返回第一个匹配元素，后续同名按钮事件绑定会静默失败 -
<label for="email"></label>只能正确关联到第一个id="email"的输入框 - URL 锚点
#section2滚动时，也只会停在第一个匹配位置
所以，别把 id 当作“带样式的 class”。列表项、卡片、按钮组这类可复用结构，绝不能写死 id="card" 或 id="delete-btn"。
命名要规范：字母开头 + 连字符分隔 + 语义清晰
合法 ≠ 安全。HTML5 虽允许冒号、点、下划线等字符，但实际工程中极易踩坑：
- ❌
id="1st-item"（数字开头）→ CSS 中需写成#\31 st-item，难读易错 - ❌
id="user.name"→querySelector("#user.name")会被解析为「id=user 且 class=name」 - ❌
id="nav-toggle"✅ 推荐；id="navToggle"（驼峰）虽合法，但易与 JS 变量混淆，也不利于 CSS 复用 - ✅ 推荐格式：
id="main-header"、id="search-input"、id="sidebar-nav"
动态内容里，id 要靠数据驱动生成
模板循环或组件渲染时，静态 id 是最大雷区：
- 服务端模板（如 EJS、Django）：用
id="item-{{item.id}}"或id="user-" - 前端框架（Vue/React）：避免在子组件内硬编码
id="modal"；改用:id="`modal-${uuid}`"或通过 prop 注入前缀，如id="user-profile-modal-{{userId}}" - SSR + Hydration 场景：确保服务端和客户端生成 id 的逻辑完全一致，否则 React/Vue 会警告“hydration mismatch”
多数时候，class 或 data-* 更合适
不是所有 JS 绑定或样式都需要 id。现代开发中，应优先考虑更灵活、可复用的方式：
- 批量操作按钮 → 用
class="js-submit"或data-action="submit"，再querySelectorAll('[data-action="submit"]') - 区分状态或类型 → 用
data-status="pending"、data-type="article" - 纯样式需求 → 一律用
class，避免#header这类高权重选择器破坏 CSS 层叠逻辑 - 只有以下情况才真正需要
id：锚点跳转、<label for=""></label>关联、ARIA 属性（如aria-labelledby）、或 JS 精确控制单个不可复用元素（如全局模态框容器）
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
