HTML无法直接生成真实目录树结构图，最稳妥方式是用<pre><code>展示静态文本缩进；交互式结构需后端API提供JSON数据并由JS渲染，纯前端无法读取文件系统。
HTML里没法直接画目录树图形
浏览器渲染HTML时只认语义标签和CSS样式，<ul>、<ol>这些能模拟层级但不是“结构图”；所谓“缩进示意图形”，本质是用空格/符号+CSS控制视觉缩进，不是导出文件系统的真实结构。
- HTML本身不读取磁盘路径，
index.html无法自动列出./css/main.css或../images/logo.png - 想展示真实目录结构，必须手动写、服务端生成，或用JS读取（需后端配合，纯前端做不到）
- 常见错误：把
<pre>里粘贴的终端tree命令输出当“可交互结构图”，其实只是静态文本快照
用 <pre> + <code> 模拟目录树最稳妥
这是唯一不依赖JS、兼容所有浏览器、且语义清晰的做法——把目录结构当纯文本呈现，靠等宽字体和缩进维持可读性。
- 别用
<div>套<span>手动加margin-left：缩进错位风险高，打印/复制时易崩 - 用
<pre><code>包裹，保留原始换行和空格：tree命令输出可直接粘贴 - 注意
<pre>默认有外边距，加style="margin: 0;"更干净
project/
├── index.html
├── css/
│ └── style.css
└── js/
└── main.js
用CSS实现带折叠功能的目录树要谨慎
纯CSS实现（比如用:checked + <input type="checkbox">）看着像，但实际体验差，且无法反映真实文件状态。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 每个子目录都要手动写
<input>和<label>，node_modules/这种深度结构根本没法手写 - 折叠状态不保存，刷新就重置；也无法判断某个路径是否存在或是否可访问
- 如果真需要交互式结构图，应该用JS加载JSON格式的目录数据（由后端API提供），而不是在HTML里硬编码
导出真实文件结构只能靠构建工具或服务端
所谓“导出”，意味着从操作系统读取路径并生成HTML。浏览器环境做不到，必须借助外部能力。
立即学习“前端免费学习笔记（深入）”；
- 本地开发时，用Node.js脚本跑
tree -J生成JSON，再用模板引擎注入到HTML中 - 部署时，Nginx/Apache开启
autoindex on，但只列文件名，无层级缩进，也不支持自定义样式 - CI/CD流程中，在构建阶段执行
tree -o structure.html，把结果作为静态资源发布
最容易被忽略的是权限问题：服务端生成结构时，若路径含敏感目录（如../config/），没做路径校验会直接暴露整个服务器结构。
