id 和 class 的基本定义
在写网页的时候，我们经常需要给 HTML 元素加一些“标签”，方便后面用 CSS 美化或者用 JavaScript 操作。最常见的两个属性就是 id 和 class。它们看起来差不多，但其实用途和规则差别挺大。
比如你想做一个网页上的按钮，想单独控制其中一个，或者想批量处理多个元素，这时候就得搞清楚该用哪个。
id：唯一标识符
每个 id 在一个页面里必须是唯一的。你可以把它想象成身份证号——全中国没人和你重复。同一个页面里不能有两个元素拥有相同的 id。
它适合用来标记某个特定的元素，比如页面顶部的导航栏、某个弹窗容器，或者表单里的用户名输入框。
<div id="header">这是页头</div>
<input type="text" id="username" />JavaScript 中通过 document.getElementById('username') 就能快速找到这个输入框。
class：可复用的样式标签
而 class 就像班级名称，可以有很多人同属一个班。class 可以在多个元素上重复使用，适合批量设置样式或行为。
比如你有好几个按钮，都想要一样的背景色和圆角，那就给它们都加上同一个 class。
<button class="btn primary">确认</button>
<button class="btn secondary">取消</button>
<button class="btn primary">提交</button>这里 btn 是所有按钮共有的样式基础，primary 和 secondary 则区分类型。CSS 可以分别定义这些类，灵活组合。
选择器在 CSS 中的表现
CSS 里选中它们的方式也不一样：# 代表 id，. 代表 class。
#header {
background-color: #333;
color: white;
}
.btn {
padding: 10px;
border-radius: 5px;
}
.primary {
background-color: blue;
}可以看到，写法直观，对应关系清晰。
实际开发中的使用建议
一般情况下，布局中的大块区域，比如 <header>、<footer> 或某个唯一模块，可以用 id。但更多时候推荐用 class，因为更灵活，也更容易维护。
特别是当你用前端框架（比如 Vue、React）时，id 用得越来越少，因为组件化结构下，唯一性不容易保证，反而容易出问题。
还有一个小细节：页面跳转锚点可以用 id 实现。比如点击链接滚动到某个章节，直接用 <a href="#section1">跳转</a>，然后 <div id="section1"> 就行了，简单有效。