HTML中id属性是为元素设置全局唯一标识符的标准做法，必须确保整个页面中仅出现一次，命名需以字母开头、仅含字母数字及连字符，用于锚点跳转、表单关联、ARIA引用等精准定位场景，不可重复或用于样式复用。
给HTML标签加全局唯一标识符，核心就是用 id 属性——它不是可选技巧，而是标准做法，且必须满足“整个页面只出现一次”这个硬性要求。
id 属性的基本写法
在任意开始标签里直接写 id="值" 即可。这个值不能重复，也不能含空格、点、冒号等容易引发解析问题的字符。
- ✅ 正确示例：
<div id="header-nav"></div>、<input id="email-field"> - ❌ 错误示例：
id="1st-section"（数字开头）、id="user.name"（含点）、id="search input"（含空格） - 注意：大小写敏感，
id="Contact"和id="contact"被视为两个不同标识符
为什么必须唯一？不唯一的后果
浏览器不会报错，但实际效果会出问题：
Wechat Article Html
下载
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
- JavaScript 中
document.getElementById("xxx")永远只返回第一个匹配元素，后面同名的被忽略 - CSS 用
#xxx选择器时，样式可能意外应用到多个元素，不同浏览器表现还不一致 - 表单中
<label for="xxx">关联不到正确控件，影响可访问性 - 服务端渲染（SSR）和前端 hydration 不一致时，React/Vue 可能报 mismatch 警告
命名建议：简洁、语义、稳定
别为了“看起来高级”堆砌前缀或随机字符串，重点是让人一眼看懂用途，且长期可用。
立即学习“前端免费学习笔记（深入）”；
- 用小写字母 + 连字符，比如
id="main-content"、id="footer-cta" - 避免 JavaScript 保留字，如
for、class、default - 循环生成时动态拼接，比如 Vue/React 中用
:id="`item-${index}`"，而不是写死id="item" - 组件复用场景下，通过 prop 注入命名前缀，防止父级多次引用导致冲突
什么情况该用 id？什么情况不该用？
id 不是万能钩子，现代开发中要克制使用：
- ✅ 合理用法：锚点跳转（
<a href="#section2">）、ARIA 关联（aria-labelledby="title-id"）、<label for="xxx">绑定表单控件 - ❌ 过度使用：只为 JS 绑事件（改用
class="js-submit"或data-action="submit"）；只为加样式（优先用 class） - 替代方案：功能类操作统一走
data-*属性，样式归类用class，语义结构用语义化标签本身
