标题栏乱码的根本原因是浏览器在解析到<meta charset>前已按错误编码解码<title>内容；必须将<meta charset="UTF-8">置于<head>最前端（首个非空、非注释标签），并确保文件编码、HTTP响应头Content-Type与之统一为UTF-8（无BOM）。
网页标题栏乱码是因为里的中文没被正确解码
根本原因不是 <title> 本身有问题，而是浏览器在解析 HTML 时，还没读到 <meta charset> 就已开始解码 <title> 内容。如果文件保存编码、HTTP 响应头、<meta> 三者不一致，<title> 就会显示为方块、问号或错乱符号。
必须把 <meta charset="UTF-8"> 放在 <title> 之前
HTML5 规范明确要求：<meta charset> 必须是 <head> 中**第一个可被解析的标签**（跳过注释和空格），否则部分浏览器（尤其是旧版 IE 或某些嵌入式 WebView）会在读取 <title> 时按默认编码（如 Windows-1252 或 ISO-8859-1）解码，导致标题栏直接乱码。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
-
<meta charset="UTF-8">要紧贴<head>开始，前面不能有<script>、<style>或其他<meta> - 写成
<meta charset="utf8">或<meta charset="utf-8 ">（末尾空格）会失效 - 不要混用：
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">和<meta charset="UTF-8">同时存在时，后者优先，但前者已被废弃，建议只留后者
检查并统一三层编码声明
浏览器最终采用的编码是「HTTP 响应头 > <meta charset> > 文件 BOM / 默认猜测」的优先级。只要其中一层错，<title> 就可能出问题。
- 用 Chrome DevTools 的
Network标签页刷新页面，点主 HTML 请求 →Response Headers→ 查看Content-Type是否含charset=utf-8（注意大小写不敏感，但值必须准确） - 用十六进制编辑器（如 HxD）打开 HTML 文件，确认开头三字节是
EF BB BF（UTF-8 BOM），否则 VS Code/Notepad++ 保存时要选 “UTF-8 with BOM” - 服务器配置需同步：Apache 加
AddDefaultCharset UTF-8；Nginx 加charset utf-8;；Node.js Express 中调用res.setHeader('Content-Type', 'text/html; charset=UTF-8')
动态生成页面时，PHP/JS 模板容易漏掉 meta 位置
PHP 拼接 HTML 或 JS 渲染单页应用（SPA）时，<meta charset> 很容易被模板逻辑推后，或者被框架默认模板覆盖。
- PHP 中避免在
echo '<title>...</title>';之后才输出<meta charset>—— 必须在echo '<head>';紧接着就输出 - Vue/React SSR 模板中，确保服务端返回的 HTML 字符串里，
<meta charset="UTF-8">是<head>下的第一个子节点 - 若用
document.write()动态注入 title，无法修复标题栏乱码 —— 浏览器标题栏只读取初始 HTML 解析结果，后续 JS 修改document.title不影响编码判定
<meta charset> 前，已经按错误规则解码了 <title>。这个窗口期极短，却不可逆。 
