必须放在开头，否则浏览器已用默认编码（如iso-8859-1）错误解析了前面的文本（包括、注释等），后续再声明utf-8也无法挽回，导致中文乱码或控制台报错。

为什么把 <meta charset> 放在 里会乱码

浏览器解析 HTML 是从上到下流式进行的，<meta charset="utf-8"> 的作用是告诉浏览器“接下来的文本用 UTF-8 解码”。如果它出现在 里，前面的 HTML 内容（包括 <title></title> 文本、注释、甚至 DOCTYPE 后的空白）可能已被默认编码（如 ISO-8859-1）错误解码——再改也救不回来。 - 必须放在 开头，且越靠前越好（最好紧接 后） - 不要依赖浏览器“自动修复”，旧版 Safari、某些 WebView 或 SSR 工具会直接忽略 - 常见错误现象：中文标题显示为 ，或控制台报 “Unable to decode” 类似警告

<script></script> 放在 还是 取决于是否操作 DOM

不是位置决定“能不能放”，而是执行时机决定“会不会出错”。 - 如果脚本只做计算、定义函数、加载模块（如 import），放 没问题 - 如果调用 document.getElementById、querySelector、addEventListener 等操作真实元素，必须确保 DOM 已就绪： - 推荐：加 defer 属性并留在 - 替代：放在 前（即 最底部） - 避免：放在 开头但没 defer，此时 document.body 可能为空，getElementById 返回 null

<link rel="stylesheet"> 为什么不该塞进

语法上允许，但语义和体验上不推荐。 - 浏览器发现 <link rel="stylesheet"> 会立即发起 CSS 请求，并阻塞后续 HTML 解析（直到 CSSOM 构建完成） - 如果它在 底部，HTML 已基本解析完、内容已渲染，但样式还没加载——用户先看到无样式的“白屏闪动” - 更糟的是，部分浏览器（尤其移动端）可能延迟应用该样式，导致布局跳变或 FOUC（Flash of Unstyled Content） - 正确做法：统一放在 ，必要时用 media="print" 或 onload 回调做懒加载控制

漏写 或 标签会怎样

HTML5 允许省略这两个标签，但不等于“可以随意省略”。 - 浏览器会自动补全（如把孤立的 <meta> 插入隐式 ），但补全逻辑因引擎而异 - 旧版 Safari、微信内置 WebView、某些 SSR 模板引擎（如 Hugo 的 safeHTML 渲染器）可能直接报错或输出无效文档 - W3C Validator 会标为 “Error: Element head is missing”，影响合规性检查 - 实际开发中：空的 和 也要显式写出，这是结构清晰性和工具链兼容性的底线

真正容易被忽略的，是那些“浏览器看似能修好，但修得不一致”的边界情况——比如把 <title></title> 放在 开头，Chrome 可能显示标题，Safari 却始终为空。结构不是装饰，是浏览器行为契约的书面约定。

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！