📑 HTML目录生成器

免费在线HTML目录生成器,自动解析h1-h6标题生成结构化嵌套目录树。支持自动编号、层级缩进、锚点链接、Markdown输出,一键复制HTML代码。

零依赖·可离线使用

📝 输入HTML内容

✅ 生成结果

预览 HTML代码 Markdown

使用说明

在输入框中粘贴包含h1-h6标题标签的HTML代码,点击"生成目录"自动解析标题并生成嵌套目录树。

支持自动编号(1.1.1格式)、锚点链接生成、嵌套/扁平列表切换。输出格式支持HTML代码和Markdown两种。

快捷键:Ctrl+Enter 生成目录,Ctrl+Shift+C 复制HTML结果。

HTML目录生成器能做什么?

HTML目录生成器是一款免费在线工具,能够自动解析HTML代码中的h1-h6标题标签,生成结构化的嵌套目录树。无论你是在编写技术文档、博客文章还是产品手册,只需粘贴HTML代码,即可一键生成带编号、锚点链接的目录,大幅提升文档导航体验。

核心功能

自动标题解析:识别h1-h6所有标题级别,支持自定义解析范围(如只解析h2-h4)

自动编号:生成1.1.1格式的层级编号,清晰标识标题层级关系

锚点链接:自动为标题生成id属性和目录链接,点击即可跳转到对应位置

嵌套目录树:按标题层级生成嵌套ul/ol列表,结构清晰一目了然

Markdown输出:支持生成Markdown格式的目录,适合README和文档站点使用

一键复制/下载:复制HTML或Markdown代码到剪贴板,或下载为HTML文件

使用教程

1. 在输入框中粘贴包含标题标签的HTML代码,或点击"加载示例"快速体验

2. 配置选项:选择标题级别范围、是否自动编号、是否生成锚点链接、嵌套或扁平列表

3. 点击"生成目录"按钮或按Ctrl+Enter,工具自动解析并生成目录

4. 在结果区切换预览/HTML代码/Markdown三种视图,点击复制或下载按钮获取结果

应用场景

场景1:技术文档编写

开发者在编写API文档、技术规范时,使用本工具快速生成目录导航,提升文档可读性和用户体验。

场景2:博客文章优化

博主为长篇文章添加目录导航,读者可快速跳转到感兴趣的章节,降低跳出率提升阅读体验。

场景3:Markdown文档转换

将HTML文档的标题结构转换为Markdown格式目录,方便在GitHub README、文档站点等场景中使用。

扩展知识

HTML目录(Table of Contents)是长文档的标准导航组件。良好的目录结构应遵循标题层级规范:h1作为页面主标题(每页仅一个),h2作为章节标题,h3-h6逐级细分。自动编号采用"章.节.小节"格式(如2.3.1),锚点链接使用id属性实现页内跳转。嵌套列表(nested ul/ol)是最常见的目录HTML结构,符合语义化标准且对SEO友好。

❓ 常见问题

这个工具免费吗?

完全免费,无需注册,无需下载。所有功能在浏览器本地运行,数据不会上传到任何服务器。

数据会经过服务器吗?

不会。本工具是纯前端应用,所有操作都在您的浏览器中本地完成,数据绝不离开您的设备。

支持哪些标题级别?

支持h1到h6所有标题级别,可自由选择解析范围(如只解析h2-h4)。自动识别标题层级并生成嵌套目录树。

生成的目录可以自定义吗?

可以。支持自动编号(1.1.1格式)、锚点链接生成、层级缩进控制、嵌套/扁平列表切换。输出格式支持HTML和Markdown两种。

如何将目录插入到我的网页中?

点击"复制HTML"按钮,将生成的目录HTML代码粘贴到你的网页中即可。目录中的锚点链接会自动跳转到对应标题位置。

支持Markdown格式的目录输出吗?

支持。切换输出格式为Markdown,即可生成带缩进和链接的Markdown格式目录,适合用于README、文档站点等场景。