复制中文变问号或方块，根本原因是HTML文件实际编码（含BOM）、声明位置（须为内首个标签，前无空格/注释/BOM）与服务器响应头Content-Type三者未统一；VS Code状态栏须显示“UTF-8”而非“UTF-8 with BOM”，且需用head -c 4 | xxd验证并清除BOM（ef bb bf）。
复制文本显示异常，基本不是粘贴目标的问题，而是 HTML 文件自身编码与声明、编辑器保存方式、浏览器解析三者没对齐——最常出问题的是 meta charset 声明位置错误、文件实际含 BOM、或复制时触发了不可见控制字符继承。
为什么复制后中文变问号或方块
浏览器复制文本时，会按当前页面的字符编码解析 DOM 文本节点。如果 meta charset="UTF-8" 缺失、写在 外、或文件实际是 UTF-8 with BOM，复制结果就可能带乱码或截断。常见现象包括：
- 复制“测试”变成“测试”（UTF-8 字节被当 Latin-1 解析）
- 首字符消失或末尾多出 符号（BOM 或截断）
- 部分段落正常、部分异常（局部用了不同编码的内联脚本或注释）
meta charset 必须放在
它必须是 内第一个可解析标签，前面不能有空格、注释、 以外的任何字符。否则浏览器会跳过或延迟识别。
错误写法：
<head> <!-- 页面说明 --> <meta charset="UTF-8"> </head>
正确写法：
<head> <meta charset="UTF-8"> <title>页面标题</title> </head>
- VS Code 右下角状态栏必须显示 “UTF-8”，不是 “UTF-8 with BOM”
- 用
head -c 4 index.html | xxd检查：输出含ef bb bf就是带 BOM，需另存为纯 UTF-8 - 不要用
http-equiv形式替代，它兼容性差且解析优先级低
复制时继承了不可见格式字符
富文本编辑器、Markdown 渲染器或某些 CMS 输出的 HTML，常在文本前后插入零宽空格（）、软连字符（）或 Unicode 控制符。这些字符不可见，但会被一并复制，导致粘贴后显示异常或解析失败。
立即学习“前端免费学习笔记（深入）”；
- 用浏览器开发者工具选中异常文字 → 右键 “Edit as HTML”，查看是否包裹了奇怪实体或
<span></span>标签 - 临时加 CSS 清除：
* { unicode-bidi: plaintext !important; }（仅用于诊断，勿上线） - 服务端输出前用正则清理：
text.replace(/[\u200B-\u200D\uFEFF]/g, '')
服务器响应头与 HTML 声明必须一致
即使 meta charset 正确，若服务器返回的 Content-Type 响应头指定为 charset=GBK，浏览器仍会按 GBK 解析整个文档，复制行为也受其影响。
- 用
curl -I http://localhost/index.html查看响应头中的Content-Type - Apache：在
.htaccess中加AddDefaultCharset UTF-8 - Nginx：在
server块中加charset utf-8; - 静态文件托管（如 GitHub Pages、Vercel）默认用 UTF-8，无需额外配置
真正难排查的是 BOM 和响应头冲突——一个在文件里，一个在 HTTP 层，两者不一致时，复制行为会随浏览器实现差异而浮动，务必同步验证。
