必须用开发者工具Elements面板搜索并复制<main>的outerHTML，再手动补全含<meta charset="UTF-8">的最小HTML结构，保存为UTF-8编码文件，否则将出现空白、无样式、乱码或交互失效等问题。
怎样用开发者工具精准提取 <main> 标签内容
直接右键“查看页面源代码”拿到的 HTML 里，<main> 可能根本不存在——它常由 JavaScript 动态插入，或被服务端条件渲染跳过。必须用开发者工具抓取当前 DOM 状态。
操作要点：
- 按
F12打开开发者工具，切到Elements面板 - 按
Ctrl+F（Windows）或Cmd+F（Mac），搜<main，确认节点真实存在且未被display: none或hidden掩盖 - 找到最外层的
<main>元素（注意可能有多个，优先选 class 含main、content或无 class 的那个） - 右键该节点 →
Copy→Copy outerHTML（不是Copy element，后者不包含子树）
保存时为什么不能只粘贴 <main> 片段就完事
<main> 单独保存为 .html 文件后双击打开，大概率空白或样式错乱——它依赖 <head> 里的 CSS、字体、meta 设置，也常引用外部 JS 控制交互。
常见错误现象：
立即学习“前端免费学习笔记（深入）”；
- 保存后打开是纯文字，无样式：因为没带
<link rel="stylesheet">或内联<style> - 按钮点不动、轮播图不转：缺失
<script>或模块加载逻辑 - 中文显示方块：
<meta charset>缺失或编码保存为 ANSI 而非 UTF-8
实操建议：
- 复制完
<main>的outerHTML后，手动补上最小可用头信息：<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width"> <title>Main Content Snapshot</title> </head> <body> <!-- Paste your <main> outerHTML here --> </body> </html>
- 用 VS Code 或 Sublime Text 保存，编码务必选
UTF-8（记事本默认 ANSI，会乱码） - 文件名建议用
main-snapshot.html，避免覆盖原站index.html
用 curl 或 wget 抓取时 <main> 为什么经常为空
命令行工具拿到的是服务器返回的原始 HTML 响应体，不含浏览器执行 JS 后生成的 <main>。如果页面靠 React/Vue 渲染，curl https://example.com 返回的很可能只有 <div id="root"></div> 和一个 <script> 标签。
判断依据：
- 用浏览器打开源码页（
Ctrl+U），搜索<main，若无结果，说明服务端没吐出该标签 - 在 Elements 面板里能看到
<main>，但源码页里没有 → 纯前端渲染，curl无效 - 此时只能用 Puppeteer 或 Playwright 启动真实浏览器环境，等 JS 执行完再取
document.querySelector('main').outerHTML
容易被忽略的路径与资源引用问题
即使你成功保存了含 <main> 的完整 HTML，里面的图片、CSS 链接仍是相对路径，比如：<img src="../images/hero.jpg">。一旦脱离原站目录结构，这些资源全部 404。
解决方向取决于用途：
- 仅作内容存档阅读：把所有
src和href改成绝对 URL，或下载对应资源放本地同级目录 - 用于开发调试：用 VS Code 插件如
Live Server启动本地服务，避免跨域限制 - 批量处理：别手改，用
sed（Linux/macOS）或 PowerShell 的-replace批量修正路径
最简验证法：保存后右键用浏览器“打开方式” → 选 Chrome/Firefox，按 F12 看 Console 是否报 Failed to load resource —— 有则说明路径或资源缺失。
