HTML文档结构必须严格遵循标准：<!DOCTYPE html>须顶格首行，<html lang="zh-CN">不可省略且语言值要准确，<meta charset="UTF-8">和<meta name="viewport">为<head>内硬性刚需，所有内容必须包裹于<body>内，否则将导致渲染异常、JS失效、SEO受损及无障碍访问失败。
HTML 文档结构不是“写完标签就完事”，而是浏览器解析、SEO 索引、无障碍访问和后续 JS 操作的基础。没写对 <html>、<head>、<body> 的位置或嵌套，轻则样式错乱，重则脚本失效、搜索引擎不收录。
为什么 <!DOCTYPE html> 必须放在第一行？
它不是 HTML 标签，而是告诉浏览器：“用标准模式渲染，别退回怪异模式（Quirks Mode）”。一旦前面有空格、注释或 BOM 字符，浏览器就会降级处理——box-sizing 行为异常、document.body 可能为 null、Flex 布局塌陷都可能由此引发。
- 必须顶格写，前面不能有任何字符（包括 UTF-8 BOM）
- 大小写不敏感，但惯例全小写：
<!doctype html>也合法，但统一用<!DOCTYPE html> - HTML5 中只接受这一种写法；
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">已淘汰
<html> 的 lang 属性到底要不要加？
要加，而且必须准确。不加或写错（如 lang="en" 却放中文内容），会影响屏幕阅读器断句、拼音输入法联想、甚至 Google 搜索结果的语言匹配权重。
- 中文站点固定用
<html lang="zh-CN">（不是zh或zh-cn） - 多语言子页面需动态切换，比如英文页用
lang="en-US" - 若页面含大量外语词（如代码术语、拉丁学名），可用
<span lang="la">局部覆盖
<head> 里哪些 <meta> 是硬性刚需？
只有两个真正不可省：<meta charset="UTF-8"> 和 <meta name="viewport" content="width=device-width, initial-scale=1.0">。其他如 description、keywords 对现代 SEO 影响极小，纯属可选。
立即学习“前端免费学习笔记（深入）”；
-
charset必须在<head>最前几行，否则早期字节被误读，中文变乱码（尤其服务端未声明 Content-Type 时） -
viewport缺失 → 移动端页面默认按 980px 渲染，文字小到无法阅读 -
<title>虽非技术刚需，但缺失会导致浏览器标签页显示 “无标题文档”，影响用户识别和书签管理
<body> 外还能写内容吗？
不能。所有可见内容、脚本、内联样式都必须包裹在 <body> 内。把 <script> 放在 <html> 闭合前但 </body> 外，属于语法错误——浏览器会自动纠错（通常移到 <body> 底部），但 DOM 就绪时机不可控，document.getElementById 很可能返回 null。
- 验证方式：用浏览器 DevTools 的 Elements 面板看结构，确认所有节点都在
<body>下 - 常见陷阱：JS 模板字符串拼接 HTML 时漏写
<body>开头，或 CMS 输出时意外截断了</body> - 注意：
<noscript>可以出现在<head>或<body>，但内容仍属页面逻辑范畴，不是“体外”
真正容易被忽略的，是 <html> 根元素上缺失 lang 导致的语音合成错误，以及 <meta charset> 位置靠后引发的局部乱码——它们不会报错，却让一部分用户完全无法使用你的页面。
