HTML文档结构核心是<html>、<head>、<body>三个必需容器，顺序不可乱；<html>必须为唯一根元素且直接包裹<head>和<body>；<head>中<meta charset="UTF-8">须置于最前以防乱码；任何内容出现在<body>前会被隐式归入<body>，BOM等不可见字符亦会干扰解析。
HTML 文档结构不是“先写什么再写什么”的流程，而是围绕浏览器如何解析和渲染来组织的——核心是 <html>、<head>、<body> 这三个必需容器，缺一不可，顺序不能乱。
为什么 <html> 必须是根元素，且不能嵌套
浏览器启动解析时，遇到第一个非注释、非空格的标签就必须是 <html>；如果漏掉，或把它包在别的标签里（比如 <div><html>...</html></div>），会导致 DOM 构建异常：部分样式不生效、JavaScript 获取 document.documentElement 失败、SEO 元信息被忽略。
-
<html>是整个文档的唯一根节点，document.documentElement指向它 - 它必须直接包裹
<head>和<body>，中间不能插其他标签 - 某些编辑器或 CMS 会自动补全，但手写时务必显式写出 —— 不要依赖自动修复
<head> 里哪些标签真会影响页面行为
<head> 不渲染内容，但它决定页面怎么加载、怎么被识别。很多初学者只放 <title>，结果遇到编码乱码、字体加载失败、HTTPS 资源被拦截等问题。
-
<meta charset="UTF-8">必须放在<head>最前面（越早声明越好），否则浏览器可能按默认编码（如 ISO-8859-1）解析后续 HTML，导致中文变乱码 -
<meta name="viewport" content="width=device-width, initial-scale=1">不加的话，移动端页面会以桌面宽度缩放显示，文字小到看不清 -
<link rel="stylesheet" href="style.css">的位置影响渲染阻塞：CSS 在<head>中会阻塞渲染，但这是预期行为；放在<body>底部会导致页面先闪白再样式化 -
<script>标签默认同步执行，放在<head>里会阻塞 HTML 解析 —— 如需立即执行且无依赖，可加defer或移至<body>底部
<body> 开始前能写东西吗？
严格来说，不能。任何文本、空格、注释出现在 <body> 之前（但在 <html> 内），都会被浏览器当作 <body> 的隐式子内容处理 —— 这不是 bug，是 HTML 规范定义的“纠错机制”，但后果难控。
立即学习“前端免费学习笔记（深入）”；
- 例如：
<html><head></head>Hello<body><p>World</p></body></html>中的Hello会被当成<body>的第一个文本节点，位置在<p>上方，且无法用 CSS 精确控制其样式 - 服务器返回的 BOM（字节序标记）也可能导致类似问题：UTF-8 BOM（
EF BB BF）出现在文件开头，会让浏览器误判为不可见字符，进而触发隐式<body>插入 - 验证方式：用浏览器开发者工具查看 Elements 面板，确认所有内容是否都在预期的
<body>内部
真正麻烦的不是结构本身，而是那些看不见的细节：BOM、换行符、自动补全逻辑、解析容错机制——它们让“写对”比“写出来”难得多。
