保存网页HTML源码需要注意的编码格式问题-html教程-PHP中文网

必须选 utf-8，不要选 utf-8 with bom；bom（ef bb bf）会干扰 js/css 解析并导致 header 发送失败，且若被其阻挡将失效。

保存网页html源码需要注意的编码格式问题

保存 HTML 文件时编码选 UTF-8 还是 UTF-8 with BOM？

必须选 UTF-8，不要选 UTF-8 with BOM。BOM（EF BB BF）是三个字节的文件头，浏览器虽能识别，但会干扰 JS/CSS 解析：比如 <script></script> 标签前若有 BOM，Chrome 可能报 Uncaught SyntaxError: Invalid or unexpected token；Node.js 或 PHP 输出 HTML 时，BOM 还会提前触发 HTTP header 发送，导致 header() 或 res.set() 失败。

验证是否含 BOM：
– Linux/macOS 下运行 file -i index.html，若输出含 with BOM 就要处理
– Notepad++ 点「编码」菜单，看当前状态是否为「UTF-8-BOM」
– VS Code 右下角编码显示若为 UTF-8 with BOM，点它 → 「Save with Encoding」→ 选 UTF-8

记事本另存为时为什么中文变乱码？

Windows 记事本默认用 ANSI 编码（实际常为 GBK），一保存就丢中文。关键操作只有两步：
– 打开记事本 → 「文件」→ 「打开」→ 找到文件 → 下方「编码」下拉框**手动选 UTF-8**（不能依赖“自动检测”）
– 修改完 → 「文件」→ 「另存为」→ 在「文件名」框里**手输 "index.html"（带英文双引号）**，再确认「编码」是 UTF-8，且「保存类型」不是 文本文件 (*.txt)

常见失败现象：
– 双击打开弹出“选择打开方式” → 实际保存成了 index.html.txt（扩展名被覆盖）
– 页面空白或全是方块 → 编码选了 ANSI 或 Unicode（即 UTF-16）
– 右键「查看页面源代码」看到乱码 → 文件本身编码和 <meta charset="UTF-8"> 不一致

`<meta charset="UTF-8">` 放错位置会导致失效

这个标签必须出现在的最前面，且**必须在前 1024 字节内**，否则 Chrome、Firefox 会忽略它。如果前面有空行、注释、<script></script> 或 <style></style>，就可能失效。

Doc To HTML

使用 MinerU 文档处理引擎将 Word 文档（.doc、.docx）转换为保留结构和格式的干净 HTML。

下载

正确顺序示例：

<br><br><br><meta charset="UTF-8"><br><title>我的网页</title><br><br><br>

错误写法：
–

<title>标题</title>
<meta charset="UTF-8">

（<meta> 在 <title></title> 后）
– <meta charset="UTF-8">（注释占了前 1024 字节空间）
– 文件开头有 BOM，又加了空行，再加 <meta>，总长度超限

离线保存网页时 CSS/JS 路径容易断

从浏览器开发者工具的 Elements 面板复制 HTML 并保存为本地文件，只是“快照”，不会自动下载外部资源。常见问题：
– 页面样式全无 → link 中的 href 是相对路径（如 css/style.css），但本地没建 css/ 文件夹
– 控制台报 404 → script 引用 CDN（如 https://cdn.jsdelivr.net/npm/vue@3）仍可访问，但若引用的是站内路径（如 /js/app.js）就 404
– 图片不显示 → img src 是绝对路径（https://example.com/logo.png）还行，但若是 /images/logo.png 就找不到

临时解决办法：
– 把所有外部 link 和 script 标签改成内联（把 CSS 写进 <style></style>，JS 写进 <script></script>）
– 图片用开发者工具的 Network 面板逐个右键「Open in new tab」，再另存为本地文件，然后改 src 为相对路径
– 更稳妥的做法：用插件如 SingleFile 直接保存完整网页（含资源）

最易被忽略的一点：HTTP 响应头里的 Content-Type 和文件本地编码、<meta> 三者必须一致。离线打开（file:// 协议）时没有响应头，浏览器只认 <meta charset>；但一旦放到服务器上，如果 Nginx/Apache 没配 charset utf-8，或者后端没设 Content-Type: text/html; charset=utf-8，那 <meta> 就会被无视——这时候乱码就不是你文件的问题了。