HTML 能力演示（列表 / 表格 / 折叠 / 画图）

这篇文章演示 HTML 相对 Markdown 多出来的能力在博客上是否可用。以下每节都是实测项。

一、原生列表（比 markdown 的嵌套更自由）

1. 一级
   • 二级 a
     • 三级 i
     • 三级 ii
   • 二级 b
2. 自定义起始值：
   10. 从 10 开始
   11. 11

定义列表（markdown 没有）

可以用 dt/dd 写术语释义，主题已配好排版。

二、表格（可控制宽度、换行、合并）

能力	markdown	html
单元格换行	✗	<br> 随意
行列合并	✗	colspan / rowspan ✓
单元格内元素	✗	<img> <input> <details> 任意

三、原声折叠 / 交互（无需插件的收放）

点击展开：这不是 JS 短代码，是原生 details 元素

原生折叠面板，搜索无障碍性好，任何 md 文章做不到。

四、画图 1：内联 SVG（矢量图，可手绘）

纯手写 SVG，随主题深浅色自动适配

五、画图 2：Mermaid（文字描述自动出图）

正文里写 <pre class="mermaid">，主题加载的 mermaid.js 在浏览器里渲染成图：

flowchart TD
    A[知识输入] --> B{内容类型}
    B -->|工程| C[engineering]
    B -->|产品| D[product]
    B -->|未分类| E[todo]
    C --> F[(思维宫殿 index.html)]
    D --> F
    E --> F
  

六、画图 3：Canvas（可交互图表）

甚至可以在文章里内联一段小脚本自绘图表：

原生 canvas 手绘柱状图