HTML5中文乱码主因是charset声明缺失或文件编码不一致，须在head首行写，文件保存为UTF-8无BOM，服务器响应头不可覆盖该声明，CSS/JS文件也需同为UTF-8无BOM。

HTML5 静态网页出现中文乱码，90% 是因为 charset 声明缺失或与文件实际编码不一致，不是浏览器问题，也不是“字体没装好”。

HTML 文件里必须显式声明 UTF-8 编码

HTML5 不再支持老式的 meta http-equiv="Content-Type" 写法（虽然部分浏览器仍兼容），必须用简短、标准的 meta charset，且要放在 最开头（在任何 CSS/JS 引入之前）：

  
  


  
你好，世界

注意：charset 值必须是 UTF-8（大小写不敏感，但惯例全大写），不能写成 utf8、utf-8（带短横）、UTF8（无短横但非标准写法）——某些旧版 IE 或工具链可能识别不稳定。

编辑器保存文件时必须选 UTF-8 without BOM

即使 HTML 里写了 ，如果文件本身是以 GBK、ISO-8859-1 或带 BOM 的 UTF-8 保存的，浏览器仍会按错误编码解析中文，导致乱码或页面顶部出现  等不可见字符。

• VS Code：右下角点击编码名称 → 选择 Save with Encoding → 选 UTF-8（默认即无 BOM）
• Sublime Text：菜单 File → Save with Encoding → UTF-8
• Notepad++：菜单 编码 → 转为 UTF-8 无 BOM 格式

验证方法：用命令行执行 file -i your-page.html（Linux/macOS）或用 VS Code 打开后看右下角是否显示 UTF-8 且无 BOM 提示。

服务器响应头不能覆盖 meta charset

本地双击打开 HTML 文件（file:// 协议）时，浏览器只依赖 meta 声明；但一旦通过 HTTP 服务访问（如 http://localhost:8080），服务器返回的 Content-Type 响应头优先级高于 meta 标签。如果服务器返回：

Content-Type: text/html; charset=GBK

那无论你 HTML 里怎么写 meta，浏览器都会用 GBK 解析，中文必然乱码。

• 用 Python 快速起服务测试：python3 -m http.server 8000 --bind 127.0.0.1 默认发 UTF-8 头，安全
• 用 Nginx/Apache：确认配置中未手动设置 charset GBK 或类似指令
• Chrome 开发者工具 → Network → 刷新页面 → 点开 HTML 请求 → 查看 Response Headers 中的 Content-Type

外部资源（CSS/JS）也要保持编码一致

如果 CSS 文件里写了中文注释或内容（如 content: "删除";），或 JS 文件里有中文字符串，它们同样需要自身是 UTF-8 without BOM 编码，并在 或 标签中显式声明：

不过现代浏览器对 CSS/JS 默认也按页面编码解析，只要 HTML 主文档编码正确、外部文件也是 UTF-8，一般无需额外加 charset 属性；但加了更稳妥，尤其面对老旧环境。

真正容易被忽略的是：用文本编辑器新建一个 .css 文件，直接输入中文保存——很多编辑器默认用系统区域编码（如 Windows 简体中文版默认 GBK），这个文件单独打开就是乱码，嵌入 HTML 后也会污染渲染。

# css  # linux  # python  # html  # sublime  # js  # html5  # windows  # apache  # nginx 

相关栏目： 【 网站优化151355 】 【 网络推广146373 】 【 网络技术251813 】 【 AI营销90571 】

相关推荐： 使用Dockerfile构建java web环境  香港服务器建站指南：外贸独立站搭建与跨境电商配置流程  高防服务器：AI智能防御DDoS攻击与数据安全保障  如何在阿里云部署织梦网站？  如何注册花生壳免费域名并搭建个人网站？  国美网站制作流程,国美电器蒸汽鍋怎么用官方网站？  googleplay官方入口在哪里_Google Play官方商店快速入口指南  javascript基于原型链的继承及call和apply函数用法分析  如何用搬瓦工VPS快速搭建个人网站？  大连 网站制作,大连天途有线官网？  佛山网站制作系统,佛山企业变更地址网上办理步骤？  html5如何实现懒加载图片_ intersectionobserver api用法【教程】  phpredis提高消息队列的实时性方法(推荐)  rsync同步时出现rsync: failed to set times on “xxxx”: Operation not permitted  什么是javascript作用域_全局和局部作用域有什么区别？  HTML5打空格有哪些误区_新手常犯的空格使用错误【技巧】  Python文件流缓冲机制_IO性能解析【教程】  香港服务器网站推广：SEO优化与外贸独立站搭建策略  如何用ChatGPT准备面试 模拟面试问答与职场话术练习教程  专业商城网站制作公司有哪些,pi商城官网是哪个？  ,网页ppt怎么弄成自己的ppt？  Laravel怎么集成Vue.js_Laravel Mix配置Vue开发环境  如何挑选最适合建站的高性能VPS主机？  公司网站制作价格怎么算,公司办个官网需要多少钱？  如何用已有域名快速搭建网站？  香港服务器选型指南：免备案配置与高效建站方案解析  如何在阿里云域名上完成建站全流程？  Laravel怎么生成URL_Laravel路由命名与URL生成函数详解  标准网站视频模板制作软件,现在有哪个网站的视频编辑素材最齐全的，背景音乐、音效等？  微信小程序 input输入框控件详解及实例（多种示例）  php结合redis实现高并发下的抢购、秒杀功能的实例  网站图片在线制作软件,怎么在图片上做链接？  韩国服务器如何优化跨境访问实现高效连接？  悟空识字如何进行跟读录音_悟空识字开启麦克风权限与录音  Laravel如何使用Service Container和依赖注入？（代码示例）  Laravel如何使用Sanctum进行API认证？（SPA实战）  头像制作网站在线观看,除了站酷，还有哪些比较好的设计网站？  HTML透明颜色代码怎么让图片透明_给img元素加透明色的技巧【方法】  Python面向对象测试方法_mock解析【教程】  C++时间戳转换成日期时间的步骤和示例代码  再谈Python中的字符串与字符编码（推荐）  如何用狗爹虚拟主机快速搭建网站？  Laravel如何处理文件上传_Laravel Storage门面实现文件存储与管理  网页制作模板网站推荐,网页设计海报之类的素材哪里好？  Laravel如何生成URL和重定向？（路由助手函数）  Edge浏览器如何截图和滚动截图_微软Edge网页捕获功能使用教程【技巧】  如何快速搭建高效可靠的建站解决方案？  Laravel如何使用.env文件管理环境变量？（最佳实践）  C#如何调用原生C++ COM对象详解  Laravel的.env文件有什么用_Laravel环境变量配置与管理详解