<meta charset="UTF-8">必须位于<head>最前（DOCTYPE后、任何标签前），因浏览器仅扫描前1024字节查找该声明，错位或被BOM/注释阻隔将致IE回退GBK乱码、JS报错、CSS失效，且HTTP响应头优先级虽高，但本地双击打开时<meta>是唯一编码依据。
HTML编码必须统一为UTF-8，且<meta charset="UTF-8">必须出现在<head>最前面、DOCTYPE之后、任何其他标签之前；否则IE/Edge会进怪异模式，Chrome/Firefox也可能乱码或解析失败。
为什么<meta charset>位置错一位就全崩
浏览器解析HTML时，会在读取前1024字节内查找<meta charset>。一旦它被注释、空格、BOM或PHP输出卡在后面，IE和旧Edge直接放弃识别，回退到系统默认编码（如GBK），导致中文变、CSS类名失效、JS字符串截断。Chrome虽稍宽容，但遇到BOM仍可能忽略该声明。
实操建议：
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
- 用VS Code打开HTML文件，右下角确认编码是
UTF-8 without BOM（不是UTF-8） - 删掉
<meta charset="UTF-8">之前所有字符——包括<!-- 注释 -->、空行、甚至隐藏的零宽空格 - 在DevTools的Elements面板顶部检查渲染模式：显示
Standards才算成功；若为Quirks，立刻回查开头 - 别用
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">替代——它比charset属性慢，且部分旧IE不认
HTTP响应头和<meta>谁优先
HTTP响应头中的Content-Type: text/html; charset=UTF-8优先级高于<meta charset>。但二者必须一致，否则浏览器行为不可控：Chrome可能按响应头解码却按<meta>重排DOM；Safari在某些版本里会直接报错“encoding conflict”。
立即学习“前端免费学习笔记（深入）”；
实操建议：
- Apache配置：
AddDefaultCharset UTF-8+Header set Content-Type "text/html; charset=UTF-8" - Nginx配置：
charset utf-8;放在server或location块中 - Node.js/Express中用
res.set('Content-Type', 'text/html; charset=UTF-8') - 本地双击打开HTML文件时无HTTP头，此时
<meta charset>是唯一救命稻草，务必写对位置
IE8–10下HTML5语义标签为啥不生效
IE8及以下根本不认识<main><section>这些标签，连DOM节点都不创建；IE9–10虽能创建，但默认display: inline，导致布局塌陷、CSS选择器匹配失败、querySelector('main')返回null。
实操建议：
- 在
<head>中条件加载html5shiv：<!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script><![endif]--> - 同时补CSS规则：
main, section, article, aside, nav, header, footer { display: block; } - 别依赖
@supports检测语义标签——IE全系不支持@supports语法，整段CSS会被跳过 - 现代项目若已放弃IE10及以下，可省略html5shiv，但
display: block仍建议保留以防意外
Chrome/Firefox/Safari对UTF-8的容忍度差异
Chrome和Firefox对BOM、<meta>位置错误相对宽容，常靠启发式检测自动纠错；Safari（尤其iOS 12–14）极其严格，BOM存在即触发乱码，<meta>延迟出现则整个页面渲染中断。Edge Legacy（IE内核）则完全依赖<meta>位置和BOM状态。
实操建议：
- 所有编辑器保存时强制选
UTF-8 without BOM，禁用“自动检测编码”功能 - 用
file -i your.html命令检查实际编码（Linux/macOS），Windows可用PowerShell：Get-Content your.html -Encoding Byte | Select-Object -First 3看前3字节是否为EF BB BF（BOM） - 上线前用curl验证响应头：
curl -I https://yoursite.com/index.html | grep charset - 别信“本地测试没问题”，双击打开和服务器响应是两套编码路径，必须都验证
最容易被忽略的是：BOM和空格问题在Git diff里完全不可见，合并分支时可能悄无声息引入；而IE怪异模式一旦触发，连document.body.scrollTop这种基础API都会返回错误值——不是报错，是静默错，排查成本极高。
