HTML必须语义化标签、收敛属性、绑定设计令牌、禁用内联样式、冻结组件结构。按钮用<button>、链接用、表单用<form>+<label>、列表用<ul>/<ol>；class须映射设计令牌如color-primary；disabled等原生属性优先，禁用aria重复声明；所有HTML结构须静态声明、可版本管控。
HTML 标签必须语义化，不能靠 class 撑样式
很多团队把 <div> 当万能容器，按钮写成 <div class="btn-primary">，表单控件套三层 <div> 再加 role="button" —— 这不是“灵活”，是给可访问性和 SEO 埋雷。
语义标签本身带行为和默认 A11y 属性：<button> 自带键盘交互、焦点管理、禁用状态；<input type="checkbox"> 天然支持 checked、indeterminate；<nav>、<main> 是屏幕阅读器的导航锚点。
- 按钮必须用
<button>，禁止用<div>+onclick - 链接跳转必须用
<a href>，非跳转操作不用<a> - 表单项必须包裹在
<form>内，且每个<input>配<label for="id">或嵌套写法 - 列表结构必须用
<ul>/<ol>，不用<div>模拟
class 命名必须绑定设计令牌，禁用描述性命名
看到 class="blue-big-round-btn" 或 class="error-tip-red" 就该警觉：这类 class 本质是硬编码视觉值，一旦主题切换、色值调整、尺寸重构，全量搜索替换+回归测试就来了。
正确做法是把 class 当作设计令牌的映射入口。比如颜色用 color-primary、color-error，间距用 spacing-md、spacing-xl，圆角用 radius-sm、radius-lg —— 这些 class 名本身不携带视觉含义，只表达设计系统的原子层级。
立即学习“前端免费学习笔记（深入）”；
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 所有 class 必须来自设计令牌文档（如
--color-primary→color-primary） - 禁止出现像素值、颜色名、尺寸描述（如
px12、red、large） - 组件级 class 如
btn、card可保留，但内部子元素 class 必须走令牌，例如btn__content、card__header - 主题切换时，仅需切换根节点
data-theme="dark"，CSS 变量自动响应，class 层无需改
属性必须收敛，避免重复或冲突的控制逻辑
同一个交互意图，被多个属性分散控制，是 HTML 层面最隐蔽的一致性漏洞。比如一个禁用按钮，同时写了 disabled、aria-disabled="true"、class="is-disabled"、style="opacity: 0.5" —— 四个地方都在表达“不可用”，但更新时只要漏掉一个，UI 和行为就不同步。
HTML 属性应按职责分层：状态交由原生属性（disabled、checked、required），视觉反馈由 class 控制，辅助技术提示由 aria- 补充，内联样式禁止出现。
-
disabled必须存在，aria-disabled可省略（浏览器自动补） -
required存在时，aria-required不必再写 -
role仅用于无法用语义标签替代的场景（如 tablist），且必须配全套aria-属性 - 所有
style属性必须删除，用 CSS 类替代
组件 HTML 结构必须冻结，禁止运行时动态拼接
有些组件库用 JS 拼 HTML 字符串注入 DOM，比如 el.innerHTML = `<button class="${cls}">${text}</button>` —— 这种写法让结构脱离版本管控，无法做静态分析，也无法被 Storybook 或 Design Token 工具识别。
真正可维护的组件，HTML 结构必须是声明式、静态、可 diff 的。哪怕用 JSX 或模板语法，也要保证最终产出的 HTML 树结构稳定、可预测。
- 所有组件的 HTML 模板必须写在独立文件（如
Button.html或 JSX 中的return块） - 禁止在 render 函数里用字符串拼接生成结构
- 条件渲染用
v-if/{condition && <div>}等语法，不拼字符串 - 结构变更必须走 PR + 视觉回归 + A11y 扫描，不能靠“看起来一样”就合入
