最可靠方式是下载源文件后用编辑器修改并本地预览；ctrl+u或右键“查看页面源代码”得原始html，elements面板复制的是js渲染后的dom；保存须用utf-8编码、.html扩展名，预览应通过live server或python http服务避免file://协议限制。
直接保存并修改网页 HTML 源码，最可靠的方式是「下载源文件 → 用编辑器打开 → 修改 → 本地预览」。浏览器开发者工具里的实时编辑（Elements 面板双击改内容）只在当前页面生效，刷新就丢，不能当真。
怎么拿到真正的原始 HTML 源码（不是渲染后 DOM）
关键区分：Ctrl+U 或右键「查看页面源代码」拿到的是服务器返回的原始 HTML；而 Elements 面板里复制的 outerHTML 是 JS 执行后动态生成的结构——两者可能完全不同。
- 需要保留服务端原始结构（比如 SEO 标签、初始 meta、未执行的模板占位符），就用
Ctrl+U→ 全选 → 复制 → 粘贴到编辑器中保存为index.html - 需要保存当前看到的完整页面（含 JS 注入的菜单、数据列表等），才进
Elements面板，右键节点 →Copy→Copy outerHTML - 某些网站禁用右键或
Ctrl+U，可临时在地址栏粘贴执行：javascript:(function(){copy(document.documentElement.outerHTML);alert('copied');})();，再粘贴使用
保存时编码和扩展名必须注意这三点
很多中文乱码、特殊符号显示异常，问题就出在这儿：
- 文件扩展名必须是
.html或.htm，不能是.txt—— 即使内容一样，浏览器不会按 HTML 解析 - 保存编码必须选
UTF-8（不是UTF-8 with BOM，也不是系统默认 ANSI/GBK），尤其含中文、emoji 或数学符号时 - VS Code / Notepad++ 等编辑器默认可能用 BOM，保存前要检查：VS Code 右下角点击编码名 → 选
Save with Encoding→UTF-8
修改完怎么确认效果？别直接双击打开
双击用系统默认浏览器打开本地 .html 文件，路径是 file:// 协议，很多现代特性（如 fetch()、Service Worker、部分 CSS 模块）会因跨域或协议限制直接失效。
- 推荐用 VS Code 安装
Live Server插件，右键文件 →Open with Live Server，自动起一个http://127.0.0.1:5500/xxx.html服务 - 命令行快速起服务（需 Python 3）：
python3 -m http.server 8000，然后访问http://localhost:8000/xxx.html - 如果只是改纯静态内容（文字、图片路径、链接），双击能看个大概，但只要涉及 JS 交互或外部资源加载，必须走 HTTP 服务
真正容易被忽略的是：改完保存后，浏览器可能缓存了旧版本。哪怕关掉重开，也建议硬刷新（Ctrl+Shift+R 或 Cmd+Shift+R），或者在 DevTools 的 Network 面板勾上 Disable cache。否则你改了十遍，看到的还是第一次的页面。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
