HTML中文编码设置方法详解
时间：2026-05-30 18:42:40 153浏览 收藏
HTML中文乱码问题根源往往不在代码本身，而在于文件保存时被编辑器“偷偷”加上了UTF-8 BOM或误用GBK编码，以及HTTP响应头对meta charset的优先级覆盖；本文直击VS Code/Sublime等工具的正确保存方式、meta标签的严格书写规范（位置、大小写、引号与短横）、服务器端Content-Type配置要点（Express/Apache/Nginx），以及表单和AJAX传输中的UTF-8显式声明技巧，强调“先查十六进制头、再抓包看响应头”的排查逻辑——解决乱码，关键在细节控制，而非反复修改HTML。
HTML文件保存时必须用UTF-8无BOM编码
乱码最常见原因不是HTML写法错，而是编辑器偷偷用了GBK或UTF-8+BOM保存文件。浏览器看到BOM或错误字节序，会直接解析失败，尤其在Windows记事本、VS Code未设默认编码时高频发生。
- 用VS Code打开HTML文件 → 右下角点击编码名称（如“UTF-8”或“GBK”）→ 选“Save with Encoding” → 选
UTF-8（注意不是UTF-8 with BOM） - Sublime Text：菜单栏
File → Save with Encoding → UTF-8 - 确认是否含BOM：用Hex Editor打开文件，开头三个字节不是
EF BB BF才算真正无BOM
必须放在最前面且不能写错
这个标签是浏览器解码的“第一指令”，位置和拼写出错等于没写。它不解决保存编码问题，但能帮浏览器在读取字节后正确映射为中文字符。
- 必须写成
，不是charset=UTF8（少短横）、不是charset='utf-8'（单引号虽可但易被误删）、更不是（旧写法，兼容性差且冗余） - 必须位于
内、且是中**第一个**非注释节点（前面不能有空格、换行或</code>等其他标签）</li> <li>如果用了构建工具（如Vite、Webpack），检查模板HTML是否被插件覆盖或注入了额外内容，导致<code><meta charset></code>被挤到后面</li> </ul><h3>HTTP响应头Content-Type优先级高于meta标签</h3> <p>本地双击打开HTML文件（file://协议）时，浏览器只看<code><meta charset></code>；但一旦走HTTP服务（localhost或线上），服务器返回的<code>Content-Type: text/html; charset=xxx</code>响应头会直接覆盖HTML里的meta设置——这时候改HTML毫无作用。</p> <ul><li>用浏览器开发者工具（Network → 刷新页面 → 点HTML请求 → Headers → Response Headers）确认<code>content-type</code>值是否含<code>charset=UTF-8</code></li> <li>Node.js + Express：需显式设置<code>res.set('Content-Type', 'text/html; charset=utf-8')</code>，不能只靠<code>res.sendFile()</code></li> <li>Apache：在<code>.htaccess</code>加<code>AddDefaultCharset UTF-8</code>；Nginx：在server块里加<code>charset utf-8;</code></li> <li>GitHub Pages、Vercel等静态托管平台默认用UTF-8，但若上传了带BOM的文件，仍会乱码——所以根源还是文件编码</li> </ul><h3>特殊场景：表单提交或AJAX传中文要额外处理</h3> <p>页面显示正常 ≠ 数据传输正常。用户输入中文后提交，后端收到乱码，往往是因为表单编码未声明或XHR未设请求头。</p> <ul><li>HTML表单加上<code>accept-charset="UTF-8"</code>属性：<code><form accept-charset="UTF-8"></code>（虽然现代浏览器默认UTF-8，但显式声明更稳妥）</li> <li>用<code>fetch()</code>发JSON数据时，确保<code>body</code>是字符串且已JSON.stringify()，并手动加头：<code>headers: {'Content-Type': 'application/json; charset=UTF-8'}</code></li> <li>用<code>XMLHttpRequest</code>时，调用<code>request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8')</code>，否则IE/旧Chrome可能按系统默认编码发送</li> </ul><p>真正卡住人的从来不是“该写哪行代码”，而是编辑器保存时无声无息塞进来的BOM，或者HTTP服务端悄悄覆盖了charset声明。动手前先查文件十六进制头、再抓包看响应头，比反复改<code><meta></code>有用得多。</p><p>今天关于《HTML中文编码设置方法详解》的内容就介绍到这里了，是不是学起来一目了然！想要了解更多关于的内容请关注golang学习网公众号！</p> </div> <div class="labsList"> </div> </div> <!-- 最新阅读 --> <div class="contBoxNor"> <div class="contTit"> <div class="tit">相关阅读</div> <a href="/articlelist.html" class="more">更多></a> </div> <ul class="latestReadList"> <li> <div class="info"> <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> · <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a> | 1年前 | <a href="javascript:;" class="aLightGray" title="提升">提升</a> <a href="javascript:;" class="aLightGray" title="箭头函数">箭头函数</a> <a href="javascript:;" class="aLightGray" title="函数表达式">函数表达式</a> <a href="javascript:;" class="aLightGray" title="函数声明">函数声明</a> <a href="javascript:;" class="aLightGray" title="Function构造函数">Function构造函数</a> </div> <div class="tit lineOverflow"><a href="/article/207000.html" title="JavaScript函数定义及示例详解" class="aBlack">JavaScript函数定义及示例详解</a></div> <div class="opt"> <span><i class="view"></i>502</span> <span class="collectBtn user_collection" data-id="207000" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </div> </li> <li> <div class="info"> <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> · <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a> | 2个月前 | <a href="javascript:;" class="aLightGray" title="智能体">智能体</a> </div> <div class="tit lineOverflow"><a href="/article/621422.html" title="智能体安全引领产业升级——国内AI安全产品市场深度分析" class="aBlack">智能体安全引领产业升级——国内AI安全产品市场深度分析</a></div> <div class="opt"> <span><i class="view"></i>501</span> <span class="collectBtn user_collection" data-id="621422" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </div> </li> <li> <div class="info"> <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> · <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a> | 5个月前 | </div> <div class="tit lineOverflow"><a href="/article/619053.html" title="CSS变量简化按钮悬停效果技巧" class="aBlack">CSS变量简化按钮悬停效果技巧</a></div> <div class="opt"> <span><i class="view"></i>501</span> <span class="collectBtn user_collection" data-id="619053" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </div> </li> <li> <div class="info"> <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> · <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a> | 5个月前 | </div> <div class="tit lineOverflow"><a href="/article/618916.html" title="JavaScript符号类型详解与应用" class="aBlack">JavaScript符号类型详解与应用</a></div> <div class="opt"> <span><i class="view"></i>501</span> <span class="collectBtn user_collection" data-id="618916" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </div> </li> <li> <div class="info"> <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> · <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a> | 5个月前 | </div> <div class="tit lineOverflow"><a href="/article/612539.html" title="HTML剪贴板复制粘贴怎么用" class="aBlack">HTML剪贴板复制粘贴怎么用</a></div> <div class="opt"> <span><i class="view"></i>501</span> <span class="collectBtn user_collection" data-id="612539" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </div> </li> </ul> </div> <!-- 最新阅读 --> <div class="contBoxNor"> <div class="contTit"> <div class="tit">最新阅读</div> <a href="/articlelist.html" class="more">更多></a> </div> <ul class="latestReadList"> <li> <div class="info"> <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> · <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a> | 12分钟前 | <a href="/articletag/4729_new_0_1.html" class="aLightGray" title="css">css</a> · </div> <div class="tit lineOverflow"><a href="/article/637337.html" title="CSS @starting-style 怎样为弹窗补上首次进入动画" class="aBlack">CSS @starting-style 怎样为弹窗补上首次进入动画</a></div> <div class="opt"> <span><i class="view"></i>440</span> <span class="collectBtn user_collection" data-id="637337" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </div> </li> <li> <div class="info"> <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> · <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a> | 19分钟前 | <a href="/articletag/4729_new_0_1.html" class="aLightGray" title="css">css</a> · </div> <div class="tit lineOverflow"><a href="/article/637336.html" title="CSS transition-behavior allow-discrete 的显示切换" class="aBlack">CSS transition-behavior allow-discrete 的显示切换</a></div> <div class="opt"> <span><i class="view"></i>181</span> <span class="collectBtn user_collection" data-id="637336" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </div> </li> <li> <div class="info"> <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> · <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a> | 19分钟前 | </div> <div class="tit lineOverflow"><a href="/article/637335.html" title="JavaScript RegExp.escape 怎样安全拼接用户输入" class="aBlack">JavaScript RegExp.escape 怎样安全拼接用户输入</a></div> <div class="opt"> <span><i class="view"></i>134</span> <span class="collectBtn user_collection" data-id="637335" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </div> </li> <li> <div class="info"> <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> · <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a> | 23分钟前 | </div> <div class="tit lineOverflow"><a href="/article/637334.html" title="CSS contain-intrinsic-size 怎样避免 content-visibility 布局跳动" class="aBlack">CSS contain-intrinsic-size 怎样避免 content-visibility 布局跳动</a></div> <div class="opt"> <span><i class="view"></i>351</span> <span class="collectBtn user_collection" data-id="637334" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </div> </li> <li> <div class="info"> <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> · <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a> | 26分钟前 | </div> <div class="tit lineOverflow"><a href="/article/637333.html" title="CSS content-visibility auto 怎样减少长列表首屏布局" class="aBlack">CSS content-visibility auto 怎样减少长列表首屏布局</a></div> <div class="opt"> <span><i class="view"></i>281</span> <span class="collectBtn user_collection" data-id="637333" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </div> </li> <li> <div class="info"> <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> · <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a> | 27分钟前 | <a href="/articletag/4729_new_0_1.html" class="aLightGray" title="css">css</a> · </div> <div class="tit lineOverflow"><a href="/article/637332.html" title="CSS anchor-size() 怎样让浮层尺寸跟随锚点元素" class="aBlack">CSS anchor-size() 怎样让浮层尺寸跟随锚点元素</a></div> <div class="opt"> <span><i class="view"></i>281</span> <span class="collectBtn user_collection" data-id="637332" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </div> </li> <li> <div class="info"> <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> · <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a> | 1天前 | </div> <div class="tit lineOverflow"><a href="/article/637063.html" title="SVG symbol 怎样与use组合复用图形" class="aBlack">SVG symbol 怎样与use组合复用图形</a></div> <div class="opt"> <span><i class="view"></i>397</span> <span class="collectBtn user_collection" data-id="637063" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </div> </li> <li> <div class="info"> <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> · <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a> | 1天前 | <a href="/articletag/243_new_0_1.html" class="aLightGray" title="前端">前端</a> · </div> <div class="tit lineOverflow"><a href="/article/637048.html" title="SVG meet与slice怎样决定留白或裁切" class="aBlack">SVG meet与slice怎样决定留白或裁切</a></div> <div class="opt"> <span><i class="view"></i>336</span> <span class="collectBtn user_collection" data-id="637048" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </div> </li> <li> <div class="info"> <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> · <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a> | 1天前 | <a href="/articletag/243_new_0_1.html" class="aLightGray" title="前端">前端</a> · <a href="javascript:;" class="aLightGray" title="Slice">Slice</a> <a href="javascript:;" class="aLightGray" title="SVG">SVG</a> <a href="javascript:;" class="aLightGray" title="preserveAspectRatio">preserveAspectRatio</a> <a href="javascript:;" class="aLightGray" title="viewBox">viewBox</a> <a href="javascript:;" class="aLightGray" title="meet">meet</a> </div> <div class="tit lineOverflow"><a href="/article/637024.html" title="SVG preserveAspectRatio 怎样让图形等比填满容器" class="aBlack">SVG preserveAspectRatio 怎样让图形等比填满容器</a></div> <div class="opt"> <span><i class="view"></i>347</span> <span class="collectBtn user_collection" data-id="637024" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </div> </li> <li> <div class="info"> <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> · <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a> | 1天前 | <a href="/articletag/5401_new_0_1.html" class="aLightGray" title="前端开发">前端开发</a> · <a href="javascript:;" class="aLightGray" title="前端">前端</a> <a href="javascript:;" class="aLightGray" title="透明度">透明度</a> <a href="javascript:;" class="aLightGray" title="SVG">SVG</a> <a href="javascript:;" class="aLightGray" title="mask">mask</a> <a href="javascript:;" class="aLightGray" title="clipPath">clipPath</a> </div> <div class="tit lineOverflow"><a href="/article/637000.html" title="SVG裁剪路径与mask的透明度处理有什么区别" class="aBlack">SVG裁剪路径与mask的透明度处理有什么区别</a></div> <div class="opt"> <span><i class="view"></i>114</span> <span class="collectBtn user_collection" data-id="637000" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </div> </li> <li> <div class="info"> <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> · <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a> | 1天前 | </div> <div class="tit lineOverflow"><a href="/article/636976.html" title="SVG clipPath 怎样裁剪多个图形的显示范围" class="aBlack">SVG clipPath 怎样裁剪多个图形的显示范围</a></div> <div class="opt"> <span><i class="view"></i>337</span> <span class="collectBtn user_collection" data-id="636976" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </div> </li> <li> <div class="info"> <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> · <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a> | 1天前 | </div> <div class="tit lineOverflow"><a href="/article/636954.html" title="SVG markerUnits 怎样决定标记随描边缩放" class="aBlack">SVG markerUnits 怎样决定标记随描边缩放</a></div> <div class="opt"> <span><i class="view"></i>252</span> <span class="collectBtn user_collection" data-id="636954" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </div> </li> </ul> </div> <!-- 课程推荐 --> <div class="contBoxNor"> <div class="contTit"> <div class="tit">课程推荐</div> <a href="/courselist.html" class="more">更多></a> </div> <ul class="classRecomList"> <li> <a href="/course/9.html" title="前端进阶之JavaScript设计模式" class="img_box"> <img src="/uploads/20221222/52fd0f23a454c71029c2c72d206ed815.jpg" onerror="this.onerror='';this.src='/assets/images/moren/morentu.png'" alt="前端进阶之JavaScript设计模式"> </a> <dl> <dt class="lineOverflow"> 前端进阶之JavaScript设计模式 </dt> <dd class="cont1 lineOverflow">设计模式是开发人员在软件开发过程中面临一般问题时的解决方案，代表了最佳的实践。本课程的主打内容包括JS常见设计模式以及具体应用场景，打造一站式知识长龙服务，适合有JS基础的同学学习。</dd> <dd class="cont2"> <a href="/course/9.html" title="前端进阶之JavaScript设计模式" class="toStudy">立即学习</a> <span>543次学习</span> </dd> </dl> </li> <li> <a href="/course/2.html" title="GO语言核心编程课程" class="img_box"> <img src="/uploads/20221221/634ad7404159bfefc6a54a564d437b5f.png" onerror="this.onerror='';this.src='/assets/images/moren/morentu.png'" alt="GO语言核心编程课程"> </a> <dl> <dt class="lineOverflow"> GO语言核心编程课程 </dt> <dd class="cont1 lineOverflow">本课程采用真实案例，全面具体可落地，从理论到实践，一步一步将GO核心编程技术、编程思想、底层实现融会贯通，使学习者贴近时代脉搏，做IT互联网时代的弄潮儿。</dd> <dd class="cont2"> <a href="/course/2.html" title="GO语言核心编程课程" class="toStudy">立即学习</a> <span>516次学习</span> </dd> </dl> </li> <li> <a href="/course/74.html" title="简单聊聊mysql8与网络通信" class="img_box"> <img src="/uploads/20240103/bad35fe14edbd214bee16f88343ac57c.png" onerror="this.onerror='';this.src='/assets/images/moren/morentu.png'" alt="简单聊聊mysql8与网络通信"> </a> <dl> <dt class="lineOverflow"> 简单聊聊mysql8与网络通信 </dt> <dd class="cont1 lineOverflow">如有问题加微信：Le-studyg；在课程中，我们将首先介绍MySQL8的新特性，包括性能优化、安全增强、新数据类型等，帮助学生快速熟悉MySQL8的最新功能。接着，我们将深入解析MySQL的网络通信机制，包括协议、连接管理、数据传输等，让</dd> <dd class="cont2"> <a href="/course/74.html" title="简单聊聊mysql8与网络通信" class="toStudy">立即学习</a> <span>500次学习</span> </dd> </dl> </li> <li> <a href="/course/57.html" title="JavaScript正则表达式基础与实战" class="img_box"> <img src="/uploads/20221226/bbe4083bb3cb0dd135fb02c31c3785fb.jpg" onerror="this.onerror='';this.src='/assets/images/moren/morentu.png'" alt="JavaScript正则表达式基础与实战"> </a> <dl> <dt class="lineOverflow"> JavaScript正则表达式基础与实战 </dt> <dd class="cont1 lineOverflow">在任何一门编程语言中,正则表达式,都是一项重要的知识,它提供了高效的字符串匹配与捕获机制,可以极大的简化程序设计。</dd> <dd class="cont2"> <a href="/course/57.html" title="JavaScript正则表达式基础与实战" class="toStudy">立即学习</a> <span>487次学习</span> </dd> </dl> </li> <li> <a href="/course/28.html" title="从零制作响应式网站—Grid布局" class="img_box"> <img src="/uploads/20221223/ac110f88206daeab6c0cf38ebf5fe9ed.jpg" onerror="this.onerror='';this.src='/assets/images/moren/morentu.png'" alt="从零制作响应式网站—Grid布局"> </a> <dl> <dt class="lineOverflow"> 从零制作响应式网站—Grid布局 </dt> <dd class="cont1 lineOverflow">本系列教程将展示从零制作一个假想的网络科技公司官网，分为导航，轮播，关于我们，成功案例，服务流程，团队介绍，数据部分，公司动态，底部信息等内容区块。网站整体采用CSSGrid布局，支持响应式，有流畅过渡和展现动画。</dd> <dd class="cont2"> <a href="/course/28.html" title="从零制作响应式网站—Grid布局" class="toStudy">立即学习</a> <span>485次学习</span> </dd> </dl> </li> </ul> </div> </div> <!-- footer --> <div class="footer"> <ul> <li ><a href="/" class="aLightGray"><em class="navIcon navIconHome"></em><span>首页</span></a></li> <li class="curr"><a href="/articlelist.html" class="aLightGray"><em class="navIcon navIconRead"></em><span>阅读</span></a></li> <li ><a href="/courselist.html" class="aLightGray"><em class="navIcon navIconCourse"></em><span>课程</span></a></li> <li ><a href="/ai.html" class="aLightGray"><em class="navIcon navIconAi"></em><span>AI助手</span></a></li> <li ><a href="/user.html" class="aLightGray"><em class="navIcon navIconUser"></em><span>我的</span></a></li> </ul> </div> <script src="/assets/js/frontend/common.js" defer></script> <script src="/assets/js/juejin-theme.js?v=20260613b" defer></script> <script> var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?e34c3e8ab31ba35d7e1c48ea8d77315f"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script> </body> </html>