最可靠做法是用浏览器开发者工具复制已渲染的h2–h6 outerhtml；若用python需注意编码、js渲染和标签边界问题，并按语义上下文决定是否保留父容器。
直接保存整个网页的 HTML 源码，再手动提取 <h2></h2> 到 <h6></h6> 标签内容，是最可靠的做法；用正则或 BeautifulSoup 等工具“在线抓取”容易漏掉动态渲染、JS 注入或 Shadow DOM 中的标题。
用浏览器开发者工具精准复制 h2–h6 的 outerHTML
这是最稳、零依赖、不写代码的实操路径，适合一次性提取当前页面已渲染完成的多级标题结构。
- 按
F12打开开发者工具 → 切换到Elements面板 - 按
Ctrl+F（Windows）或Cmd+F（macOS），输入<h> —— 多数现代浏览器支持正则搜索，能高亮所有 <code><h2></h2>至<h6></h6>元素 - 逐个右键点击匹配项 → 选择
Copy→Copy outerHTML，粘贴到文本编辑器中 - 若页面标题嵌套在
<section></section>或<article></article>内，建议连同父容器一起复制，保留语义上下文
用 Python + BeautifulSoup 提取并保存 h2–h6 的常见坑
看似简单，但实际运行时经常只拿到空列表或漏掉部分标题，根本原因不是代码写错，而是没处理好三件事：编码、渲染状态、标签边界。
-
requests.get(url)返回的response.text可能被误判为ISO-8859-1编码，导致中文标题乱码或解析失败；务必显式设置response.encoding = 'utf-8'，或改用response.content+BeautifulSoup(..., 'html.parser', from_encoding='utf-8') - 如果目标标题由 JavaScript 动态插入（比如 React/Vue 渲染的文档目录），
requests拿不到，必须换selenium或playwright加载完整 DOM -
soup.find_all(['h2','h3','h4','h5','h6'])是正确写法；写成soup.select('h2,h3,h4,h5,h6')也行，但别用soup.find_all('h[2-6]')—— 这不是合法 CSS 选择器，BeautifulSoup 不识别 - 提取后建议按原始 DOM 顺序写入文件，并保留缩进层级，方便后续人工核对结构是否跳级（如
<h2></h2>后直接出现<h4></h4>）
保存时要不要保留父容器？取决于你下一步怎么用
如果你只是归档标题文字用于阅读或导入笔记软件，纯文本就够了；但如果是做无障碍审计、结构分析或生成目录树，必须保留包裹它的语义容器（比如 <section></section>、<article></article>、<nav></nav>）。
- 只存标题标签本身：
<h3>实时同步</h3>→ 丢失了它属于哪个<section><h2>核心功能</h2>...</section>的上下文 - 推荐做法：用
element.find_parent(['section', 'article', 'main'])向上找最近的语义块，连同该块一起序列化（注意避免重复捕获同一父容器多次） - 若页面含多个独立区域（如侧边栏有
<h2>相关文章</h2>），不加区分地全量提取会混淆主次；应先用<main></main>定位主体内容区，再在其内部查h2–h6
真正难的不是“怎么拿到 h2–h6”，而是判断哪些该拿、哪些该过滤、哪些必须连带上下文一起拿——尤其当页面用了自定义 heading 组件（比如 <div role="heading" aria-level="3">）时，纯靠标签名会漏掉关键节点。</div>
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
