HTML不支持自动生成目录，需手动为h2/h3添加符合规范的id（小写、连字符、非数字开头、唯一），再用href链接；JS动态生成TOC须等DOM加载、安全转义文本、避免重排；CSS :target仅能高亮目标元素，:has()支持不稳，高亮导航项仍需JS。
HTML 原生不支持自动创建文章目录（TOC），所有“自动生成”都得靠 JavaScript 或构建时处理；纯 HTML 只能手动写 <a href="#xxx"> 和 id="xxx" 配对锚点。
怎么给 h2/h3 加 id 并手动链接
浏览器识别锚点只看 id 属性，和标签名无关。但为了语义清晰、方便 JS 提取，惯例用 h2 做一级标题、h3 做二级标题，并为每个加唯一 id。
常见错误：直接复制中文标题当 id，比如 <h2 id="用户登录流程"> —— 这在部分旧浏览器或 CSS 选择器里会出问题，且空格、标点会导致链接失效。
- 用小写字母 + 连字符替换空格和标点，例如
"用户登录流程"→id="user-login-flow" - 避免数字开头，如
id="1-intro"不推荐，改用id="intro-1" - 确保每个
id全局唯一，重复会导致<a href="#xxx">总跳到第一个匹配项
示例：
立即学习“前端免费学习笔记（深入）”；
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
<h2 id="setup-env">环境配置</h2> <h3 id="install-node">安装 Node.js</h3> <nav> <a href="#setup-env">环境配置</a> <a href="#install-node">安装 Node.js</a> </nav>
用 JavaScript 动态生成 TOC 的最小可行方案
核心逻辑就三步：找所有 h2 和 h3、提取文本并生成 id、拼 DOM 插入导航栏。关键不是“多酷”，而是避开 DOM 尚未加载、重复执行、特殊字符转义这三类坑。
- 必须等 DOM 加载完再运行，否则
document.querySelectorAll('h2, h3')返回空数组 - 生成
id时要过滤掉非字母数字字符，textContent比innerText更可靠（后者受 CSS 影响） - 不要用
innerHTML +=拼接导航，会触发重排；用documentFragment或一次性innerHTML = str
简短示意（无依赖）：
const toc = document.getElementById('toc');
const headings = document.querySelectorAll('h2, h3');
let html = '';
headings.forEach(el => {
const text = el.textContent.trim();
const id = text.replace(/[^\w\s-]/g, '').replace(/\s+/g, '-').toLowerCase();
if (!el.id) el.id = id;
html += `<a href="https://www.php.cn/link/644189fdc1ec6209a67f49571c6d4a8c">${text}</a>`;
});
toc.innerHTML = html;
为什么不用 CSS :target 或 :has() 实现“高亮当前章节”
:target 能样式化当前锚点元素，但无法反向高亮左侧导航里的对应链接；:has() 理论上可以（如 nav a:has(~ h2[id='xxx'])），但目前（2024）Chrome/Firefox 对 :has() 在复杂选择器中支持不稳定，且无法跨兄弟节点精准匹配。
- 实际项目中，“当前章节高亮”几乎全靠 JS 监听
hashchange+ 手动加 class - 如果只用纯 CSS，最接近的妥协是：用
h2:target { scroll-margin-top: 60px; }控制滚动后留白，避免被固定 header 遮挡 - 别在生产环境赌
:has()跨层级匹配导航项，它现在连nav a:has(+ h2#xxx)都不一定生效
真正麻烦的从来不是生成链接，而是保持 id 和内容同步——改了标题文字却忘了更新 href 或 id，或者多人协作时命名风格不统一。这类问题静态检查工具（如 html-validate）能抓一部分，但最省心的还是从一开始就定好规则并写进 PR 检查清单。
