最可靠方法是用浏览器开发者工具右键复制整个<nav>节点；若含Shadow DOM需先展开shadow root；动态页面须等待渲染完成再执行document.querySelector('nav').outerHTML。
直接提取 <nav> 元素的 HTML 代码最可靠
浏览器开发者工具里右键复制整个 <nav> 节点，比手动选中再复制更准确——它能保留所有嵌套结构、属性（如 aria-label、class）、注释和空白符。如果网页用了 Web Components 或 Shadow DOM，<nav> 可能被包裹在自定义标签内，此时需先展开 shadow root 再定位。
常见错误现象：document.querySelector('nav').innerHTML 只返回子内容，丢失 <nav> 自身标签；而 outerHTML 才是完整节点代码。
- 用
document.querySelector('nav').outerHTML获取带标签的完整 HTML 字符串 - 多个导航栏时，改用
document.querySelectorAll('nav')并按索引取值（如[0].outerHTML） - 若页面有动态加载（如 React/Vue），需等导航渲染完成后再执行，否则可能取到空字符串或占位符
保存时注意 CSS 类名与外部样式依赖
单独保存的 <nav> 代码通常无法直接预览效果，因为样式来自外部 CSS 文件或 <style> 块。不处理样式依赖，粘贴到新页面里就是纯文字列表。
- 用浏览器“检查元素”面板的 Styles 标签页，逐个确认关键类名（如
navbar、menu-toggle）是否定义在内联<style>中 - 若样式来自外链 CSS（如
<link href="main.css">），需一并下载该文件，或复制对应规则到新页面的<style>中 - 响应式菜单常依赖
@media查询和 JS 交互逻辑（如点击展开），这些必须同步提取，否则在移动端无法工作
用命令行快速保存（适合批量或自动化）
如果要从多个页面提取导航，手点开发者工具效率太低。curl + grep 或 pup 更合适，但要注意：原始 HTML 中 <nav> 可能跨多行、含注释、被 JS 动态插入——静态抓取容易漏。
立即学习“前端免费学习笔记（深入）”；
- 基础命令：
curl -s URL | pup 'nav' html（需安装pup工具） - 若页面依赖 JS 渲染，改用 Puppeteer 脚本：
page.evaluate(() => document.querySelector('nav')?.outerHTML) - 避免用
grep '<nav>'，它无法匹配换行或自闭合写法（如<nav/>），且会误抓注释或字符串里的<nav>
保存后验证是否可独立运行
把提取出的 <nav> 粘贴进一个空白 HTML 文件测试时，最容易忽略的是相对路径资源（图标、SVG sprite、字体）和事件绑定。JS 函数名若未全局声明，会报 ReferenceError。
- 检查
<nav>内是否有href="#"或onclick="toggleMenu()"—— 前者需补全跳转逻辑，后者需确认toggleMenu是否已定义 - 图标用
<img src="icons/hamburger.svg">？保存时得把icons/目录一并复制，或改用 Data URL - 用
file://协议打开测试页时，部分浏览器会禁用 AJAX 或本地字体加载，建议用python3 -m http.server启个本地服务再测
