HTML中文乱码根本原因是编码链断裂：文件实际保存编码、声明、HTTP响应头三者不一致或任一缺失；必须闭环验证文件为UTF-8无BOM、位于最开头且唯一、服务器返回Content-Type: text/html; charset=utf-8。
HTML文件本身保存为UTF-8但浏览器显示乱码
根本原因不是“没写”，而是文件实际编码与声明不一致。常见于编辑器误存为GBK/ISO-8859-1，或带BOM的UTF-8被某些环境（如WebView2、旧版IE）错误解析。
检查和修复步骤：
- 用
file -i index.html（Linux/macOS）或chcp+ 记事本另存为确认真实编码 - VS Code中右下角点击编码名 → 选“Save with Encoding” → 明确选
UTF-8（**不要选UTF-8 with BOM**） - 若已带BOM，用
sed -i '1s/^\xEF\xBB\xBF//' index.html（Linux/macOS）或PowerShell命令清除 -
必须放在最开头，且前面不能有任何字符（包括空格、换行、BOM）
Tomcat部署后404页面响应头返回ISO-8859-1
即使HTML文件是UTF-8，Tomcat默认对.html资源返回Content-Type: text/html;charset=ISO-8859-1，导致浏览器按错编码解析。
修改方式（无需改代码）：
- 打开
$CATALINA_HOME/conf/web.xml - 搜索
html - 将
text/html text/html;charset=UTF-8 - 重启Tomcat生效（注意：仅影响静态HTML，JSP需额外配置
pageEncoding）
iframe或JS跳转含中文路径时触发404并伴随乱码
这不是HTML页面本身的乱码问题，而是URL未正确编码导致服务端收到非法路径，进而可能返回错误响应体（如Nginx默认404页用ISO编码），形成二次乱码。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
关键动作：
- 所有动态拼接的URL路径段（如
location.href = '/文章/' + title + '.html'）必须用encodeURIComponent()包裹每个变量，而不是encodeURI() - 避免在
这类静态属性里写中文——浏览器虽自动编码，但服务端解码行为不统一；推荐直接改英文文件名 - 检查Network面板中请求的
Request URL是否已变成%E6%96%87%E7%AB%A0类形式，再看响应头Content-Type是否仍为text/html;charset=ISO-8859-1 - 若用Express等Node服务，需手动中间件对
req.url做decodeURIComponent()，否则express.static()无法匹配中文路径文件
静态资源（CSS/JS/JSON）加载失败导致404页样式崩溃
404页面看似“整个乱”，实际常因关联资源加载失败：比如返回404，或CSS文件本身是GBK编码但被当UTF-8读取，导致样式失效、文字重叠、布局错乱。
排查重点：
- 打开开发者工具→Network→过滤
css、js，确认是否返回404或200但内容为空/乱码 - 用
curl -I http://yoursite/css/404.css直连，看响应头Content-Type和实际内容编码是否一致 - CSS/JS文件也必须保存为UTF-8无BOM，并确保服务器返回
charset=UTF-8（Apache加AddCharset UTF-8 .css .js，Nginx加charset utf-8;） - JSON资源若含中文，必须是UTF-8纯文本，且不能有BOM，否则
JSON.parse()直接抛SyntaxError: Unexpected token \u00ef
真正卡住人的地方，往往不是单点编码设置，而是多个环节的编码假设不一致：编辑器存了UTF-8，但Tomcat发头说ISO；前端拼了encodeURIComponent，但Nginx又做了路径规范化；HTML写了UTF-8 meta，但引入的CSS却是GBK。每个环节都“看起来合理”，合起来就全崩。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
