HTML中class属性须用空格分隔多个类名，如class="btn primary large"；id用于唯一元素，class用于一类元素；类名应语义化、避免样式耦合，推荐BEM命名与data-*分离JS逻辑。
HTML 中 class 属性怎么写才有效
直接写 class="xxx" 就行，但必须注意：它只接受空格分隔的多个类名，不能用逗号、点号或引号内嵌语法。浏览器会把整个字符串按空格切开，每个片段单独当作一个类名处理。
- ✅ 正确：
<div class="btn primary large">→ 对应三个类：btn、primary、large - ❌ 错误：
<div class="btn,primary">→ 浏览器只会识别一个类：btn,primary（含逗号） - ❌ 错误：
<div class=".active">→ 点号是 CSS 选择器语法，HTML 里不需要，写了就变成类名.active（带点）
class 和 id 在实际使用中怎么选
class 是为“一类元素”设计的，可以重复；id 是为“唯一元素”设计的，页面中必须唯一。选错会导致 CSS 不生效、JS 找不到节点、甚至影响可访问性（如 aria-labelledby 依赖有效 id）。
- 用
class：按钮样式、卡片布局、主题切换（theme-dark）、状态标记（is-loading） - 用
id：页面锚点（<a href="#section2">）、表单关联（<label for="email">+<input id="email">） - ⚠️ 注意：
id值不能以数字开头（id="1item"合法但 CSS 里#1item无效），推荐用字母开头
class 名起名容易踩的坑
类名不是随便写的标签，它直接影响 CSS 可维护性、JS 操作稳定性，以及团队协作效率。很多 bug 表面是样式没生效，根子在类名本身。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 避免语义模糊：
box、left、red—— 改动颜色或位置后就失真 - 避免过度耦合样式：
font-large-bold把表现层写死，换成heading-2或title-emphasis更可持续 - 避免 JS 和 CSS 共用同一类名却不加约定：比如
btn-submit既被 CSS 用来设样式，又被 JS 用来绑定点击，结果某天 CSS 重构删了这个类，JS 直接失效 - 推荐做法：CSS 用 BEM 风格（
menu__item--active），JS 操作优先用data-*属性（data-action="submit"）分离关注点
动态添加或切换 class 的常见写法
纯 HTML 写死 class 只是起点，实际项目中基本都要用 JS 控制。关键不是“怎么加”，而是“加得干净、可预测、不冲突”。
立即学习“前端免费学习笔记（深入）”；
- 用
element.classList.add()/.remove()/.toggle()—— 安全，自动去重，支持多参数：el.classList.add("active", "visible") - 别直接拼字符串改
element.className—— 容易覆盖已有类，且大小写敏感、空格难控制 - 注意 DOM 更新时机：如果 class 变化是为了触发动画，确保 class 添加后浏览器已重排（必要时用
getComputedStyle(el).opacity强制触发） - 服务端渲染（SSR）场景下，JS 操作前先检查 class 是否已存在，避免重复添加导致样式叠加异常
