🎨 HTML 的 11 种设计之美
"左侧是 Markdown，右侧是 HTML——差距一眼可见。"
Markdown 用三个列表；HTML 用并排卡片。
📄 Markdown
## 方案对比
### 方案 A：客户端渲染
优点：导航快、交互丰富
缺点：首屏慢、SEO 差
### 方案 B：静态生成（推荐）
优点：加载快、SEO 好、成本低
缺点：构建时间长
💡 关键差异：读者无需在脑子中"对齐"方案——并排卡片 + 推荐标签，一眼锁定最佳选项。
Markdown 仅显示 +/-；HTML 用颜色 + 标签使变更更有层次。
📄 Markdown
- const token = jwt.sign(payload, secret)
+ const token = jwt.sign(payload, secret, { expiresIn: '1h' })
🎨 HTML
10- const token = jwt.sign(payload, secret)
10+ const token = jwt.sign(payload, secret, { expiresIn: '1h' })
CRITICAL缺少 TTL，安全风险
💡 关键差异：红色 = 删除，绿色 = 新增，红色药丸 = 严重问题。只看颜色就知道改了什么、风险多大。
一行文字描述的依赖关系，HTML 用 SVG 画出完整架构。
📄 Markdown
AuthService 依赖 UserService 和 TokenManager，TokenManager 依赖 UserDB。
🎨 HTML
💡 关键差异：SVG 架构方框 + 箭头 + 颜色编码，让依赖关系一目了然。
颜色文本列表 → 可视化色卡 + 组件状态预览。
📄 Markdown
- Primary: #D97757
- Success: #788C5D
- Warning: #B04A3F
- Text: #141413
🎨 HTML
Primary
Default
Disabled
💡 关键差异：色卡比十六进制列表的信息密度高出数倍——颜色需要被看到，而非读到。
标题列表 → 全屏沉浸 + 翻页导航的 PPT 体验。
📄 Markdown
## 幻灯片
1. Q3 技术回顾
- 可用性: 99.95%
- 部署次数: 47
- 性能提升: 40%
🎨 HTML
SLIDE 1/4
Q3 Tech Retrospective
💡 关键差异：深色背景 + 大号数字 + 进度指示器，让 HTML 页面拥有 PPT 级别的舞台感。
Markdown 只能铺开讲；HTML 用 details 折叠 + range 滑块让读者自主探索。
📄 Markdown
## TTL 概念
TTL 是缓存过期时间。设为 60 秒时命中率约 85%。增大 TTL 可提高命中率但会导致数据过时。
🎨 HTML
什么是 TTL？
TTL（Time To Live）是缓存条目在过期前保持有效的时长。增大 TTL 可提高命中率，但会增加数据过时风险。
💡 关键差异：折叠面板让读者自行控制节奏，滑块的实时反馈让抽象概念变得可感知。
文字描述状态 → 彩色药丸 + 迷你柱状图。
📄 Markdown
- API: 可用 (99.9%)
- 数据库: 黄色预警 (连接池85%)
- 缓存: 不可用
💡 关键差异：绿色 = 正常，黄色 = 有风险，红色 = 阻塞。只看药丸颜色就知健康状况。
步骤列表 → SVG 流程图流程直观可视。
📄 Markdown
部署流程：
1. Build
2. Test
3. Deploy
🎨 HTML
💡 关键差异：箭头 + 节点位置本身就是信息。失败分支也能一目了然。
文字描述图标 → 内联 SVG，零依赖。
📄 Markdown
可用图标：搜索、设置、用户、主页
💡 关键差异：内联 SVG 零依赖、无限缩放、可着色。每个图标可直接复制复用。
静态配置列表 → 可操作的开关面板。
📄 Markdown
功能开关：
- 黑暗模式: 开启
- 自动保存: 关闭
- 通知推送: 开启
- Beta 功能: 关闭
💡 关键差异：开关按钮让用户感受到控制力——滑杆在 On/Off 间的动效本身就是反馈。
表格中的数字 → 大号指标卡 + 迷你趋势线。
📄 Markdown
| 指标 | 当前值 | 趋势 |
|----------|--------|------|
| 可用率 | 99.9% | ↑0.2%|
| 响应时间 | 145ms | ↓12ms|
| 错误率 | 0.03% | ↓0.01%
💡 关键差异：大号数字 + 颜色编码 + 迷你趋势线——极短时间内即可掌握数据状态。
Loading / Empty / Error / Populated / Edge — 组件必须处理的五种 UI 状态。
💡 关键差异：每个组件覆盖 Loading/Empty/Error/Populated/Edge 五种状态，用户不会看到空白页或未处理异常。
v3.0 验证时序规则：聚焦不验证、失焦验证、输入清除错误、500ms debounce。
💡 关键差异：四步验证时序消除早期报错体验——用户不被打断，错误只在适当时机出现。
VARIANCE / MOTION / DENSITY 三旋钮实时调节输出风格。
💡 关键差异：三个旋钮让用户微调输出风格——字体对比度（Variance）、动画速度（Motion）、留白密度（Density）。