用原生<ul>+<li>嵌套构建目录树，语义清晰、兼容性好；图标用::before伪元素，路径数据硬编码或内联JSON；CSS用counter-increment控制连线长度，margin-left+flex实现缩进，span.dir/file区分类型。
HTML里怎么用纯标签画出目录树结构
不能靠 JavaScript 动态生成，也不用第三方库，就用原生 <ul> + <li> 嵌套是最稳的方案。浏览器兼容性好、语义清晰、打印/爬虫都认得清——但很多人直接写平级 <div> 堆缩进，结果一换字体或加 CSS 就错位。
- 必须用嵌套
<ul>表达层级，不是靠margin-left硬撑 - 每个文件/文件夹用
<li>包裹，子目录塞进该<li>内部的<ul> - 文件名前加图标用
::before伪元素，别塞<img>或 Unicode 字符（后者在等宽字体下易偏移） - 如果要支持折叠，就得加
details/summary——但注意 Safari 旧版本对details的open属性响应不一致
导出 HTML 时如何让目录树保持静态可读
所谓“静态示意”，就是打开 HTML 文件不联网、不执行 JS 也能看清结构。这时候最常踩的坑是：把路径拼接逻辑写在 JS 里，或者依赖构建工具生成的 JSON 数据 —— 导出后直接空白。
- 路径数据得硬编码进 HTML（比如用
data-path属性），或内联在<script type="application/json">里 - 避免用
fetch('./tree.json')，本地双击打开时会触发 CORS 错误，连控制台都报不出来 - 如果目录层级深，别用递归模板字符串拼接，容易栈溢出；改用栈式遍历，或直接手写几层（静态示意本来就不该动态过深）
- 文件名含空格或中文？确保
<li>内容用 HTML 实体转义，比如white-space: pre下可能塌缩
CSS 控制缩进和连线时的兼容性雷区
想画出带竖线、横线的树形图，很多人直接上 border-left + border-bottom，结果在 Firefox 和 Chrome 渲染位置差 1px，连线对不齐。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 统一用
position: relative+::before/::after画线，避开 border 渲染差异 - 缩进别用
padding-left，改用margin-left配合display: flex容器，防止 IE11 下 padding 计算异常 - 连线长度随层级变长？别靠 JS 算高度，用 CSS 自增计数器
counter-increment+counter()函数控制height，更稳定 - 导出为 PDF 时（比如用 Chrome 打印），
transform: scaleY(-1)类翻转技巧会失效，连线建议只用标准盒模型控制
怎么让文件夹和文件视觉可区分
光靠文字颜色不够，用户扫一眼得立刻分清哪是目录、哪是 .html/.css 这类终端文件。但用不同标签（比如 <strong> 包文件夹）又破坏语义。
立即学习“前端免费学习笔记（深入）”；
- 统一用
<span class="dir">和<span class="file">，别用<b>或<i> - 扩展名提取逻辑写死在 HTML 里，例如
<span class="file">index.html</span>，不要靠 JS 切割.split('.')—— 文件名带点（如v1.2.0.js）就崩 - 加 hover 效果？慎用
transition，静态 HTML 在低配设备上可能卡顿，优先用outline或背景色微调 - 如果要适配暗色模式，别只靠
@media (prefers-color-scheme: dark)，手动加data-theme="dark"属性更可控
真正难的不是画出树，而是让每一层缩进、每一条线、每一个图标，在不同系统、不同缩放比例、不同打开方式（双击 vs 服务器访问 vs 打印）下都不偏不漏。细节全在 CSS 选择器的嵌套深度和伪元素的定位基准里。
