id用于唯一标识元素，适用于锚点、label关联、高频JS访问；class用于复用样式和状态，支持多类共存与批量操作，CSS权重更低更灵活，推荐优先使用。
id 是唯一标识，class 是可复用标签
一个页面里 id 值必须全局唯一，重复会导致 document.getElementById() 返回第一个匹配项（不可靠），也会影响 label 关联 input、锚点跳转（#section1）等行为。而 class 天然支持复用：同一个 class 可以加在 5 个 div 上，一个元素也能同时拥有多个 class，比如 class="btn btn--primary js-modal-trigger"。
CSS 优先级和选择器写法不同
id 在 CSS 中用 # 开头，如 #header；class 用 . 开头，如 .header。权重上，id 选择器是 0,1,0,0，class 是 0,0,1,0——这意味着哪怕你写十个 .nav-link 连写，也压不过一个 #main-nav 的样式声明。实际开发中，过度依赖 id 会抬高特异性，让后续覆盖变得别扭，尤其在组件化或第三方样式介入时容易失控。
JavaScript 获取方式差异明显
document.getElementById("user-form") 直接返回单个元素，快且确定；而 document.getElementsByClassName("form-field") 返回的是类数组（HTMLCollection），得手动遍历或用 [0] 取值，稍麻烦。更现代的做法是统一用 document.querySelector(".form-field")（取第一个）或 document.querySelectorAll(".form-field")（取全部），这时 class 反而比 id 更灵活——尤其当你需要批量操作同类元素时。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
什么时候该用 id，什么时候该用 class
用 id 的场景很明确：
- 页面内唯一锚点，如
<a href="#contact">联系我</a>+<section id="contact"></section> - JS 需要精准、高频访问的单个元素（如主画布容器
<canvas id="game-canvas"></canvas>） - 表单中
label的for属性必须指向唯一id
class。BEM 命名（如 .card__title、.card--hover）就是建立在这种复用逻辑上的，不是为了“看起来高级”，而是避免样式污染和维护断裂。立即学习“前端免费学习笔记（深入）”；
最容易被忽略的一点：浏览器不校验 id 是否真的唯一，但一旦重复，getElementById 和 CSS 锚点行为就不可预测；而 class 没有这种隐性风险，只是命名混乱会让团队协作成本陡增——所以别省那几个字母，写清楚语义，比如用 class="search-input" 而不是 class="blue-border"。
