中文显示乱码需依次检查：一、在head内首行添加；二、确保文件物理保存为UTF-8无bom；三、确认http响应头Content-Type含charset=utf-8；四、删除旧式meta声明，仅保留一个charset声明；五、验证css中字体支持中文。
编码防页面乱码【解决】”>
如果您在html5页面中看到中文显示为方块、问号或乱码字符，则很可能是文档未正确声明字符编码。以下是解决此问题的步骤：
一、在中正确添加charset声明
html5规范要求使用语法指定文档编码，该声明必须位于
内且尽可能靠前，以确保浏览器在解析后续内容前已获知编码方式。
1、打开HTML文件，在
标签内部第一行（或紧随
之后）插入<meta>标签。 </p><p>2、输入准确的语法：<meta charset="utf-8">，注意不能写成<meta http-equiv="Content-Type" content="text/<a style=" color: text-decoration:underline title="html" href="https://www.php.cn/zt/15763.html" target="_blank" rel="nofollow" >html; charset=utf-8″>或闭合为<meta charset="utf-8">。</p><p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p><p>3、保存文件后，用浏览器重新加载页面，检查中文是否正常显示。</p><h2>二、确认文件实际保存编码为UTF-8无BOM</h2><p>即使<meta>声明为UTF-8，若文件本身以其他编码（如GBK、ISO-8859-1）或UTF-8 with BOM格式保存，仍会导致乱码。编辑器需将源文件物理存储为UTF-8无BOM格式。</p><p>1、在VS Code中，点击右下角编码显示区域（如“UTF-8”或“GBK”），选择“Save with Encoding”。 </p><p>2、在弹出菜单中选择<strong><font color="green">UTF-8</font></strong>（非“UTF-8 with BOM”）。</p><p>3、在<a href="https://seo.sqjnqi.com/tag/sublime/"><b>sublime</b></a> Text中，依次点击File → Save with Encoding → UTF-8。</p><p>4、在Notepad++中，点击编码 → 转为UTF-8无BOM格式 → 保存。</p><h2>三、检查服务器HTTP响应头中的Content-Type</h2><p>当Web服务器通过HTTP响应头发送了与<meta>冲突的charset（例如charset=gbk），浏览器会优先采用响应头中的编码，导致<meta>失效。</p><p>1、在浏览器开发者工具（F12）中切换到Network选项卡，刷新页面。</p><p>2、点击主HTML资源，查看Response Headers中的Content-Type字段。</p><p>3、确认其值为<strong><font color="green">text/html; charset=utf-8</font></strong>，而非其他编码。</p><p>4、若不匹配，需修改服务器配置：<a href="https://seo.sqjnqi.com/tag/apache/"><b>apache</b></a>中添加AddDefaultCharset UTF-8；<a href="https://seo.sqjnqi.com/tag/nginx/"><b>nginx</b></a>中设置charset utf-8；<a href="https://seo.sqjnqi.com/tag/node/"><b>node</b></a>.<a >js</a>中设置res.setHeader(‘Content-Type’, ‘text/html; charset=utf-8’)。</p><h2>四、避免在HTML中混用多种编码声明</h2><p>同一页面中同时存在旧式声明（如http-equiv）和HTML5新式声明，可能引发浏览器解析歧义，尤其在部分老旧浏览器中。</p><p>1、删除所有形如<meta http-equiv="Content-Type" content="text/html; charset=xxx">的标签。</p><p>2、确保整个文档中仅存在一个且唯一一个<meta charset="utf-8">声明。</p><p>3、检查引入的外部HTML片段、模板引擎输出或<a href="https://seo.sqjnqi.com/tag/cms/"><b>cms</b></a>生成内容，防止其注入额外的charset声明。</p><h2>五、验证字体支持与CSS编码影响</h2><p>某些CSS规则（如@font-face引用非Unicode字体、font-family列表缺失中文字体）虽不直接导致解码乱码，但会使已正确解码的中文无法渲染，呈现为空白或方块。</p><p>1、在开发者工具中选中乱码文本元素，查看Computed面板下的font-family值。</p><p>2、确保font-family声明末尾包含<strong><font color="green">sans-serif</font></strong>或明确列出系统中文字体（如”<a href="https://seo.sqjnqi.com/tag/microsoft/"><b>microsoft</b></a> YaHei”, “PingFang SC”, “Noto Sans CJK SC”）。</p><p>3、检查是否有CSS规则设置了unicode-range限制，意外排除了中文Unicode区间（U+4E00–U+9FFF等）。</p><p>