必须置于内且为首个编码声明标签，值严格小写、双引号、无空格；文件保存编码、HTTP响应头与之三者须完全一致，否则仍会乱码。
meta charset 放错位置会导致乱码
浏览器解析 HTML 时，如果
出现在
</code></div>
之后，或被 JavaScript、CSS 阻塞，就可能错过早期字节流的
编码
声明，直接按默认编码（如 ISO-8859-1）解码，导致中文变问号或方块。这不是“没写”，而是“写晚了”。
必须放在
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto"><head></code></div>
内，且是
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto"><head></code></div>
中**第一个**有实际编码作用的标签（最好在
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto"><title></code></div>
前）
不能放在
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto"><body></code></div>
里，也不能用 JS 动态插入——此时解析早已开始
如果用了 HTTP 头
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">Content-Type: text/html; charset=utf-8</code></div>
，
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto"><meta charset></code></div>
仍需保留，因为部分离线场景或本地文件（
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">file://</code></div>
）不走 HTTP 头
charset 值只能写 utf-8，别用 UTF-8 或 utf8
HTML 标准明确要求
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">charset</code></div>
属性值**大小写敏感且只认
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">utf-8</code></div>
**。写成
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">UTF-8</code></div>
、
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">utf8</code></div>
、
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">UTF8</code></div>
或
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">unicode</code></div>
，浏览器虽多数能容错识别，但属于非标准写法，W3C 验证会报错，某些老旧工具链（如某些构建插件或代理网关）可能直接忽略。
正确写法只有：
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto"><meta charset="utf-8"></code></div>
不要加空格、引号类型混用（单引号在某些模板引擎里可能出问题，统一用双引号）
不用写
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">utf-8bom</code></div>
或
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">utf-8-no-bom</code></div>
——这些不是 charset 值，是文件保存选项
HTML 文件本身编码必须和 meta charset 一致
写了
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto"><meta charset="utf-8"></code></div>
却用 GBK 编码保存 HTML 文件，浏览器会按 utf-8 解码一堆乱码字节，结果还是乱码。这是最常被忽略的“两层不匹配”问题。
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
下载
编辑器保存文件时，务必选
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">UTF-8</code></div>
（不含 BOM 更稳妥，尤其对 PHP/Node.js 后端输出）
VS Code 默认是 UTF-8，但右下角编码显示可能被误点成 GBK；Sublime Text 新建文件默认不是 UTF-8，需手动设
用命令行检查：Linux/macOS 下运行
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">file -i your-page.html</code></div>
，看输出中的
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">charset=</code></div>
是否为
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">utf-8</code></div>
服务端响应头优先级高于 meta charset
当服务器返回 HTTP 响应头
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">Content-Type: text/html; charset=gbk</code></div>
，哪怕 HTML 里写了
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto"><meta charset="utf-8"></code></div>
，浏览器也以响应头为准。这时候改前端没用，得调后端或 Web 服务器配置。
立即学习
“
前端免费学习笔记（深入）
”；
Apache：在
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">.htaccess</code></div>
或虚拟主机配置中加
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">AddDefaultCharset utf-8</code></div>
Nginx：在
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">server</code></div>
或
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">location</code></div>
块中加
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">charset utf-8;</code></div>
Node.js（Express）：
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">res.set('Content-Type', 'text/html; charset=utf-8')</code></div>
PHP：在输出 HTML 前调用
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">header('Content-Type: text/html; charset=utf-8');</code></div>
实际乱码往往卡在“文件存的是 utf-8，但服务器发成了 gbk”，或者“meta 写对了，可它躲在 script 标签后面”。查的时候先看网络面板的 Response Headers，再看页面源码里 meta 的位置和拼写，最后用 file 命令确认文件真实编码。
</div>
<!-- 文章导航 -->
<nav class="xjpbg-article-nav" aria-label="文章导航">
<a href="http://www.xjpbg.com/bg/18973.html" class="xjpbg-article-nav-link xjpbg-article-nav-prev">
<span>‹</span>
<div>
<div class="xjpbg-article-nav-label">上一篇</div>
<div class="xjpbg-article-nav-title">使用CSS :has() 彻底自定义无原生单选按钮的表单元素</div>
</div>
</a>
<a href="http://www.xjpbg.com/bg/18976.html" class="xjpbg-article-nav-link xjpbg-article-nav-next">
<div>
<div class="xjpbg-article-nav-label">下一篇</div>
<div class="xjpbg-article-nav-title">移动端单屏滚动网页怎么实现，网页里有CSS3动画效果？</div>
</div>
<span>›</span>
</a>
</nav>
</div>
</article>
<!-- 相关文章列表 -->
<section class="xjpbg-content-section" style="margin-top: 20px;">
<h2 class="xjpbg-widget-title" style="margin-bottom: 20px;">相关文章</h2>
<ul class="xjpbg-article-list">
<li class="xjpbg-article-item">
<a href="http://www.xjpbg.com/bg/18973.html" class="xjpbg-article-link">使用CSS :has() 彻底自定义无原生单选按钮的表单元素</a>
<div class="xjpbg-article-meta">2026-10-06</div>
</li>
<li class="xjpbg-article-item">
<a href="http://www.xjpbg.com/bg/18968.html" class="xjpbg-article-link">8个值得了解的CSS性能优化小技巧</a>
<div class="xjpbg-article-meta">2026-10-06</div>
</li>
<li class="xjpbg-article-item">
<a href="http://www.xjpbg.com/bg/18966.html" class="xjpbg-article-link">将扁平对象数组转换为多层嵌套对象：JavaScript 高效实践</a>
<div class="xjpbg-article-meta">2026-10-06</div>
</li>
<li class="xjpbg-article-item">
<a href="http://www.xjpbg.com/bg/18965.html" class="xjpbg-article-link">了解辅助功能：第 5 部分</a>
<div class="xjpbg-article-meta">2026-10-06</div>
</li>
<li class="xjpbg-article-item">
<a href="http://www.xjpbg.com/bg/18956.html" class="xjpbg-article-link">如何实现固定表头的 HTML 表格并为数据行添加无跳动、全包围的悬停边框</a>
<div class="xjpbg-article-meta">2026-10-06</div>
</li>
<li class="xjpbg-article-item">
<a href="http://www.xjpbg.com/bg/18976.html" class="xjpbg-article-link">移动端单屏滚动网页怎么实现，网页里有CSS3动画效果？</a>
<div class="xjpbg-article-meta">2026-10-06</div>
</li>
<li class="xjpbg-article-item">
<a href="http://www.xjpbg.com/bg/18982.html" class="xjpbg-article-link">vue整合百度地图显示指定地点信息</a>
<div class="xjpbg-article-meta">2026-10-06</div>
</li>
<li class="xjpbg-article-item">
<a href="http://www.xjpbg.com/bg/19035.html" class="xjpbg-article-link">HTML视频封面如何优化首帧截取_首帧截取对HTML视频封面限制【进阶】</a>
<div class="xjpbg-article-meta">2026-10-06</div>
</li>
<li class="xjpbg-article-item">
<a href="http://www.xjpbg.com/bg/19051.html" class="xjpbg-article-link">HTML怎么标注文章分类_HTML标签云或分类列表【指南】</a>
<div class="xjpbg-article-meta">2026-10-06</div>
</li>
<li class="xjpbg-article-item">
<a href="http://www.xjpbg.com/bg/19152.html" class="xjpbg-article-link">CSS高度过渡与小数计算行高导致文本抖动问题解析</a>
<div class="xjpbg-article-meta">2026-10-06</div>
</li>
</ul>
</section>
</div>
<!-- 右侧边栏 -->
<aside class="xjpbg-sidebar xjpbg-sidebar-right" aria-label="侧边栏">
<!-- 推荐阅读 -->
<div class="xjpbg-widget">
<h3 class="xjpbg-widget-title">推荐阅读</h3>
<div class="xjpbg-recommend-grid">
<a href="http://www.xjpbg.com/bg/33550.html" class="xjpbg-recommend-item">
<div class="xjpbg-recommend-thumb">
<img src="http://www.xjpbg.com/static/v6/images/article-6.jpg" alt="为什么Bootstrap 5移除了jQuery对性能有何提升_探讨原生JS与CSS变量的结合应用">
</div>
<div class="xjpbg-recommend-title">为什么Bootstrap 5移除了jQuery对性能有何提升_探讨原生JS与CSS变量的结合应用</div>
</a>
<a href="http://www.xjpbg.com/bg/33546.html" class="xjpbg-recommend-item">
<div class="xjpbg-recommend-thumb">
<img src="http://www.xjpbg.com/static/v6/images/article-6.jpg" alt="jQuery统计指定子元素数量的方法_jquery">
</div>
<div class="xjpbg-recommend-title">jQuery统计指定子元素数量的方法_jquery</div>
</a>
<a href="http://www.xjpbg.com/bg/33525.html" class="xjpbg-recommend-item">
<div class="xjpbg-recommend-thumb">
<img src="http://www.xjpbg.com/static/v6/images/article-6.jpg" alt="如何利用Vue表单处理实现表单的数据筛选与过滤">
</div>
<div class="xjpbg-recommend-title">如何利用Vue表单处理实现表单的数据筛选与过滤</div>
</a>
<a href="http://www.xjpbg.com/bg/33512.html" class="xjpbg-recommend-item">
<div class="xjpbg-recommend-thumb">
<img src="http://www.xjpbg.com/static/v6/images/article-6.jpg" alt="javascript一点特殊用法_javascript技巧">
</div>
<div class="xjpbg-recommend-title">javascript一点特殊用法_javascript技巧</div>
</a>
</div>
</div>
<!-- 最新文章 -->
<div class="xjpbg-widget">
<h3 class="xjpbg-widget-title">最新文章</h3>
<ul class="xjpbg-article-list">
<li class="xjpbg-article-item">
<a href="http://www.xjpbg.com/bg/33550.html" class="xjpbg-article-link">为什么Bootstrap 5移除了jQuery对性能有何提升_探讨原生JS与CSS变量的结合应用</a>
<div class="xjpbg-article-meta">2026-10-30</div>
</li>
<li class="xjpbg-article-item">
<a href="http://www.xjpbg.com/bg/33546.html" class="xjpbg-article-link">jQuery统计指定子元素数量的方法_jquery</a>
<div class="xjpbg-article-meta">2026-10-30</div>
</li>
<li class="xjpbg-article-item">
<a href="http://www.xjpbg.com/bg/33525.html" class="xjpbg-article-link">如何利用Vue表单处理实现表单的数据筛选与过滤</a>
<div class="xjpbg-article-meta">2026-10-30</div>
</li>
<li class="xjpbg-article-item">
<a href="http://www.xjpbg.com/bg/33512.html" class="xjpbg-article-link">javascript一点特殊用法_javascript技巧</a>
<div class="xjpbg-article-meta">2026-10-30</div>
</li>
<li class="xjpbg-article-item">
<a href="http://www.xjpbg.com/bg/33471.html" class="xjpbg-article-link">js中toString方法3个作用</a>
<div class="xjpbg-article-meta">2026-10-30</div>
</li>
<li class="xjpbg-article-item">
<a href="http://www.xjpbg.com/bg/33456.html" class="xjpbg-article-link">CSS focus伪类在表单中的应用_提升输入框的视觉焦点</a>
<div class="xjpbg-article-meta">2026-10-30</div>
</li>
</ul>
</div>
<!-- 热门标签 -->
<div class="xjpbg-widget">
<h3 class="xjpbg-widget-title">热门标签</h3>
<div class="xjpbg-article-tag-list">
<a href="http://www.xjpbg.com/tag/1657" class="xjpbg-article-tag-item">编码</a>
<a href="http://www.xjpbg.com/tag/1653" class="xjpbg-article-tag-item">html</a>
</div>
</div>
</aside>
</div>
</div>
</main>
<!-- 页脚 -->
<footer class="xjpbg-footer">
<div class="xjpbg-container">
<div class="xjpbg-footer-links" style="justify-content: center;">
<a href="http://www.xjpbg.com/22.html" class="xjpbg-footer-link">免责声明</a>
<a href="http://www.xjpbg.com/23.html" class="xjpbg-footer-link">关于我们</a>
<a href="http://www.xjpbg.com/24.html" class="xjpbg-footer-link">联系我们</a>
<a href="http://www.xjpbg.com/25.html" class="xjpbg-footer-link">投诉删除</a>
<a href="http://www.xjpbg.com/26.html" class="xjpbg-footer-link">投稿须知</a>
</div>
<div class="xjpbg-footer-copyright" style="text-align: center; margin-top: 20px;">
Copyright 2026
新派编程网
版权所有
<a href="https://beian.miit.gov.cn/" rel="nofollow" target="_blank" style="color: inherit;">黔ICP备2025064387号</a>
</div>
<div style="text-align: center; margin-top: 10px; font-size: 12px; color: #999;">免责声明：本站信息来源于网络，仅供学习使用，版权归原作者所有，如有不愿意被转载的情况，请联系QQ：182111886，通知我们删除已转载的信息。</div>
</div>
</footer>
<!-- 返回顶部按钮 -->
<button class="xjpbg-back-to-top" id="backToTop" aria-label="返回顶部">⇧</button>
<!-- 公共脚本 -->
<script src="http://www.xjpbg.com/static/v6/js/common.js"></script>
<div class="hide">
</div>
</body>
</html>