写网页的时候，总免不了给标签加点标识，方便后面用CSS或者JavaScript来操作。最常见的就是用 id 和 class，虽然看起来差不多，但其实差别挺大。
id 是唯一的身份证号
每个 HTML 元素的 id 就像人的身份证号码，全页面只能有一个。不能重复，也不能有两个一样的 id。浏览器靠它快速定位到某个具体元素。
比如你想做个跳转锚点，或者单独控制一个按钮的显示隐藏，这时候用 id 最合适。
<button id="submit-btn">提交</button>JavaScript 拿这个元素也特别简单：
document.getElementById("submit-btn");class 是可复用的标签
class 就不一样了，它可以重复使用。多个元素可以共享同一个 class，用来统一设置样式或行为。就像一群人都穿着同款工服，一眼就知道是同一组的。
比如你有好几个盒子，都想要圆角边框和灰色背景，那就给它们都加上同一个 class。
<div class="box">内容1</div>
<div class="box">内容2</div>
<div class="box">内容3</div>CSS 写起来也很省事：
.box {
border-radius: 8px;
background-color: #eee;
}实际场景对比
假设你在做一个个人简历页面。页面顶部有个“联系方式”区域，你想点击菜单直接跳过去。这个区域就得有个唯一 id：
<section id="contact">...</section>而页面里每一项技能条，比如“HTML”“CSS”“JavaScript”，长得都一样，可以用同一个 class 来控制样式：
<div class="skill-bar">HTML</div>
<div class="skill-bar">CSS</div>
<div class="skill-bar">JS</div>能同时用吗？当然可以
一个元素既能有 id 又能有 class，不冲突。你要觉得某个模块既需要单独控制，又属于某一类样式组，那就一起上。
<nav id="main-nav" class="navbar">...</nav>这样既能用 #main-nav 精准选中，也能用 .navbar 统一管理所有导航栏的外观。
说白了，id 是“这个”，class 是“这类”。搞清楚谁唯一、谁通用，写起代码来就顺多了。