<meta charset="UTF-8">必须置于<head>内首个位置，因其是浏览器Tokenizer解码字节流的前置开关，须在前1024字节内生效，否则导致乱码且不可回退。
浏览器在解析 HTML 时，charset 声明不是“可选配置”，而是决定整个文档能否被正确解码的前置开关——一旦错位或缺失，后续所有 Token 都可能乱码，且无法回退修复。
Tokenizer 怎么拿到第一个字符？靠字节流 + 编码声明双保险
HTML 解析器的 Tokenizer 阶段不直接读文件内容，而是先接收网络传输来的原始二进制字节流。它必须立刻决定“怎么把这堆字节转成字符”，而这个决策依据只有两个：
- HTTP 响应头中的
Content-Type字段（如text/html; charset=utf-8），优先级最高 - HTML 文档内首个有效的
<meta charset="...">标签，必须出现在前 1024 字节内，且不能被注释或 JS 干扰 - 若两者都缺失或冲突，浏览器按自身默认编码（如 IE 用 GBK，Chrome 用 UTF-8）硬猜，结果不可控
注意：<meta http-equiv="Content-Type" content="text/html; charset=gbk"> 这种旧写法已被现代解析器降级处理，不触发早期编码判定，等同于无效。
<meta charset> 必须放在 <head> 开头，且不能跨行嵌套
这个标签不是“越早写越好”，而是有硬性位置约束：它必须是 <head> 内前几个标签之一，且其完整字符串（包括引号和值）必须落在前 1024 字节范围内。常见踩坑点：
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
- 开头有 BOM（如 UTF-8-BOM）会占用字节，挤占有效空间 → 把
<meta charset>往前挪，甚至删掉 BOM - 写成
<meta charset='UTF-8'>（单引号）没问题，但若中间换行或空格过多（如<meta\n charset="utf-8">），某些老解析器会跳过整行 - 放在
<title>后面、或被<script>标签隔开，可能导致部分浏览器忽略该声明
DOCTYPE 和 lang 不参与编码识别，但影响解析模式
<!DOCTYPE html> 和 lang 属性完全不参与字符解码流程，它们的作用是另一层：
-
<!DOCTYPE html>触发 HTML5 渲染模式，影响标签闭合规则、自闭合行为（如<img>是否需要/）、以及对非法嵌套的容错策略 -
lang="zh-CN"只用于辅助技术（读屏器、搜索引擎语义分析），不影响任何字符解码或 DOM 构建逻辑 - 但二者共同决定了浏览器是否启用“严格解析”——比如在 quirks mode 下，某些编码错误会被静默容忍，反而掩盖真实问题
真正决定一个汉字显示为“你”还是“浣”的，从来不是 CSS 或 JS，而是 Tokenizer 拿到字节后第一轮解码的结果。这个环节没有重试，没有 fallback，错了就是错了——所以检查 charset 声明的位置、有效性、与传输头的一致性，永远比调样式更优先。
