购物车按钮显示乱码是因HTML编码与浏览器解码不一致，需统一为UTF-8无BOM：检查文件实际编码、确保<meta charset="UTF-8">在<head>最前、服务端响应头不冲突。
购物车按钮显示乱码，基本就是 HTML 文件编码和浏览器解码不一致导致的，优先检查并统一为 UTF-8（无 BOM）。
确认 HTML 文件实际保存编码
很多编辑器（如 VS Code、Notepad++）默认保存为 UTF-8，但可能带 BOM；而部分旧版浏览器或服务器对 BOM 敏感，会干扰字符解析，导致中文按钮文字（如「加入购物车」）显示为 或方块。
- 在 VS Code 中：右下角点击编码名称（如
UTF-8），选Save with Encoding→UTF-8（注意不是UTF-8 with BOM） - 在 Notepad++ 中：菜单栏
编码→转为 UTF-8 无 BOM 格式→ 再保存 - 用命令行快速验证是否含 BOM：
head -c 3 yourfile.html | xxd，若输出含ef bb bf即存在 BOM，需清除
检查 <meta> 声明是否匹配且位置正确
<meta charset="UTF-8"> 必须出现在 <head> 内、且是前几个标签之一（最好第一行），否则浏览器可能已按默认编码（如 GBK）开始解析，后续再声明也晚了。
- ✅ 正确写法：
<head> <meta charset="UTF-8"> <title>商品页</title> </head>
- ❌ 错误写法：放在
<script>或<link>之后；或写成charset=utf8（缺短横线）、charset=gbk（与文件编码冲突） - 注意：不要同时写
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">，它已被charset属性取代，冗余还可能引发解析歧义
服务端响应头是否覆盖了 HTML 声明
即使 HTML 写对了，如果 Web 服务器（如 Nginx、Apache）或后端程序（如 PHP 的 header()）返回了 Content-Type: text/html; charset=GBK，浏览器会优先信任响应头，直接忽略 <meta>。
立即学习“前端免费学习笔记（深入）”；
- 用浏览器开发者工具（F12 → Network → 刷新 → 看 HTML 请求的 Response Headers）检查
content-type字段 - Nginx 配置中确保没有
charset gbk;这类指令；如有，删掉或改为charset utf-8; - PHP 中避免在输出 HTML 前调用
header('Content-Type: text/html; charset=GBK');
真正容易被忽略的是三者协同：文件存为 UTF-8 无 BOM + <meta charset="UTF-8"> 在 <head> 最前面 + 服务端不发送冲突的 charset 响应头。少一个环节，按钮就可能变乱码。
