title中文显示为方块或问号的直接原因是html文件未以utf-8 without bom编码保存，导致浏览器解析时字节错乱；即使位置正确，若文件物理编码为gbk或含bom，title仍会乱码，且js动态设置、css伪元素content等环节也须同步采用utf-8 without bom编码。
title 属性中文显示为方块或问号
直接原因是 HTML 文件本身没用 UTF-8 编码保存，title 属性里的中文被当成了乱字节读取。浏览器不会单独为 title 做编码转换，它完全依赖整个 HTML 文档的字符集解析逻辑。哪怕 <meta charset="UTF-8"> 写对了，只要文件物理存储不是 UTF-8（比如存成了 GBK），title 依然会崩。
常见错误现象：
- 本地双击打开
file://路径时乱码，但放到 Nginx 里就正常 —— 因为 HTTP 响应头没生效，全靠文件自身编码 +meta - VS Code 右下角显示 “UTF-8”，但实际保存时选了 “UTF-8 with BOM” —— BOM 会干扰前 1024 字节扫描，导致
meta被跳过 - 复制粘贴中文到
title里，编辑器自动转成 HTML 实体（如你好），但实体解码失败时仍显示为乱码
HTML 文件保存编码必须是 UTF-8 without BOM
这是最常被忽略的硬性前提。BOM（EF BB BF）不是“多加个标记”，而是真实字节，会挤占 HTML 开头空间，让浏览器在扫描前 1024 字节找 meta charset 时错过它。
实操建议：
- VS Code：右下角点击编码名称 → 选 Save with Encoding → 选
UTF-8（注意不是UTF-8 with BOM） - Sublime Text：菜单
File → Save with Encoding → UTF-8 - 验证是否干净：Linux/macOS 执行
head -c 4 index.html | xxd，输出不应含ef bb bf；Windows PowerShell 用Get-Content index.html -Encoding Byte | Select -First 3，前三字节不能是239, 187, 191
title 中文被 JS 动态写入时乱码
如果 title 是通过 JavaScript 设置的（比如 element.title = "编辑用户"），问题往往出在 JS 文件自身编码不对，或者字符串来源（如 API 返回、localStorage）没指定 UTF-8。
关键点：
-
<script src="app.js"></script>加载的 JS 文件也必须是 UTF-8 without BOM，否则脚本里写的中文字符串直接解析失败 - 若从接口取中文：
fetch("/api/user").then(r => r.json())，确保响应头含Content-Type: application/json; charset=utf-8，否则r.text()可能按 ISO-8859-1 解码 - 避免手动拼接：
el.title = "姓名：" + data.name比el.title = "姓名：叽"更可靠，后者依赖 HTML 实体正确转义
伪元素 content 的中文也乱码？检查 CSS 文件编码
很多人只盯 HTML 和 JS，忘了 ::before { content: "保存" } 这种写法依赖 CSS 文件自身的编码。CSS 不读 HTML 的 meta，它独立解析。
必须同步确认：
- CSS 文件用 VS Code 以
UTF-8（not with BOM）保存 - HTTP 响应头中 CSS 的
Content-Type应为text/css; charset=utf-8（Nginx 默认不带 charset，需显式配置add_header Content-Type "text/css; charset=utf-8";） - 避免在 CSS 里写
content: "\4FDD\5B58";这类 Unicode 转义——易出错且难维护，直接写明文中文更稳
真正卡住人的从来不是 title 属性本身，而是它像一面镜子，照出 HTML、JS、CSS 三端编码是否真正统一。少一个环节是 UTF-8 without BOM，中文就会在某个地方突然塌方。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
