HTML vs Markdown

8 项能力 · 左边 Markdown 能做到的极限 · 右边 HTML 的真实表达力

01 · Tabular data — 复杂表格

Markdown 表格不支持合并单元格 / 跨行跨列 / 嵌套

Markdown
| 季度 | 产品 | 收入 |
|------|------|------|
| Q1   | A    | 100  |
| Q1   | B    | 80   |
| Q2   | A    | 120  |

→ 想合并 Q1 / Q2 的两行？做不到

HTML
季度产品收入占比
Q1A10036%
B80
Q2A12064%
B200

02 · Design with CSS — 样式控制

Markdown 没有样式语法，字体 / 颜色 / 阴影 / 渐变 / 旋转全靠渲染器默认

Markdown

**重要标题**

这是一段普通文字。

→ 加渐变背景 / 投影 / 旋转？做不到

HTML + CSS

重要标题

渐变背景 + 阴影 + 微旋转 + 圆角

DESIGNED

03 · Illustrations with SVG — 矢量插图

Markdown 只能嵌位图，缩放糊；SVG 任意分辨率 + 可编程

Markdown

![图](url.png)

→ 只能给位图链接，放大模糊；想动态改颜色？做不到

SVG

04 · Code with script tags — 可执行

Markdown 代码块只能"展示"代码；HTML <script> 能"执行"

Markdown
```js
let count = 0;
count++;
```

→ 代码就是字符串，不会跑

JavaScript 实时运行
0
--:--:--

05 · Interactions — 交互响应

Markdown 是静态文档；HTML 可点击 / hover / 状态切换

Markdown

- 折叠面板

- 悬停高亮

- 点击展开

→ 列出来了, 但不能点

HTML — 点试试
折叠面板 · 点击展开›
点击 / hover / 动画过渡 / 状态切换全部走 CSS + JS, Markdown 只能描述"应该有这功能"
第二个面板›
每一个都独立状态

06 · Workflows — 流程图

SVG + HTML + CSS 组合, 表达力比 Mermaid 上限更高（自定义视觉 / 嵌入交互）

Markdown
原始 → 拆片 → 成文

→ 文字描述顺序, 没有视觉

HTML + SVG
原始
拆片
成文
发布

高亮当前阶段 / 可点击 / 可动画过渡

07 · Spatial data — 空间布局

Markdown 是顺序流式, 没有"二维定位"概念; HTML position: absolute + Canvas 像素级控制

Markdown

北京 - 116.4, 39.9

上海 - 121.5, 31.2

广州 - 113.3, 23.1

→ 数据列出来了, 但画不出"地图"

绝对定位 — 模拟地图

08 · Images with image tags — 图片增强

<img> 比 Markdown ![]() 多支持 srcset / lazy load / 响应式 / alt-fallback

Markdown

![alt](url.jpg)

→ 单 url + alt, 没了; 想根据屏幕换图? 想懒加载? 做不到

HTML img
srcset · 多分辨率自动适配
loading="lazy" · 滚到视口才加载
sizes · 视口宽度选图
alt · 失败回退 / a11y
onerror · 加载失败兜底