class属性用于指定元素的样式类，实现CSS复用与JS操作；其值由多个类名组成，以空格分隔，如；CSS通过.类名选择器定义样式，如.warning{background-color:yellow}；支持多类组合，如class="btn btn-primary btn-large"实现模块化样式；JS可通过classList.add/remove/toggle动态操作类，控制元素状态；class是连接HTML、CSS与JavaScript的核心机制。
HTML元素的class属性用于为一个或多个元素指定一个或多个样式类，是实现CSS样式复用和JavaScript操作的重要手段。它不改变元素本身的功能，而是作为“标记”让样式表或脚本可以精准定位并应用效果。
class属性的基本语法
在HTML中，class属性写在标签内部，值为自定义的名称，可包含字母、数字、连字符和下划线，但不能以数字开头，也不能包含空格（多个类之间用空格分隔）。
这是一段高亮文字
上面的div同时拥有三个类：box、warning 和 large，每个类都可以对应不同的CSS规则。
CSS中如何使用class选择器
CSS通过点号（.）来选择具有特定class的元素。
立即学习“前端免费学习笔记（深入）”；
示例：
.highlight {
color: red;
font-weight: bold;
}
.warning {
background-color: yellow;
}
.large {
font-size: 20px;
}
当这些样式引入后，所有带有对应class的元素都会自动应用这些外观。同一个class可以用在多个不同标签上，实现样式统一。
class的多类组合应用优势
class最大的优势之一是支持多类共存，允许你将样式模块化，按需组合。
- 比如定义一个
.btn类表示按钮基础样式，再用.btn-primary表示主色调，.btn-large表示大尺寸。 - HTML中写成：
- 这样可以灵活控制每个按钮的外观，而不必为每种样式单独创建新类。
这种“组合式”写法是现代前端开发中的常见实践，有助于维护和扩展样式系统。
JavaScript中操作class属性
除了样式，class也常被JavaScript用来控制元素状态，比如显示/隐藏、激活/禁用等。
常用方法：-
element.classList.add('new-class')—— 添加一个类 -
element.classList.remove('old-class')—— 移除一个类 -
element.classList.toggle('active')—— 切换类（有则删，无则加）
例如点击按钮时高亮显示区域：
document.getElementById("myBtn").onclick = function() {
this.classList.toggle("active");
};
配合CSS中的.active样式，即可实现交互效果。
基本上就这些。class属性看似简单，但在网页开发中极为关键，是连接HTML、CSS与JavaScript的桥梁。合理使用class，能让页面结构更清晰，样式更易维护。
