HTML是定义网页内容结构与语义的标记语言规范，非架构标准；DOCTYPE声明决定解析模式，head与body为强制逻辑分区，标签嵌套、属性书写等细节直接影响语义、可访问性与渲染一致性。
HTML 不是“架构标准”，而是定义网页内容结构与语义的标记语言规范。 它不规定系统级架构、模块通信或服务分层，只管“这段文字是不是标题”“这个区域是不是导航栏”“这张图缺了替代文本会怎样”。混淆这点，容易在工程设计中把语义结构和应用架构混为一谈。
DOCTYPE 声明决定浏览器用哪种规则解析 HTML
没有 <!DOCTYPE html>，或写错（比如漏空格、大小写混乱、多加斜杠），浏览器可能进入怪异模式（Quirks Mode）。这时 CSS 盒模型、getBoundingClientRect() 行为、甚至 document.body 的尺寸计算都可能和预期不一致。
-
<!DOCTYPE html>是唯一推荐写法，大小写不敏感但必须全小写以保团队统一 - 旧式声明如
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">已无必要，也不再被现代工具链支持 - 它不触发任何网络请求，也不影响 DOM 构建速度，但缺失会导致整个渲染流程降级
head 和 body 是强制存在的逻辑分区，不是可选容器
<head> 必须出现在 <html> 内且在 <body> 之前；<body> 不能为空——哪怕只放一个 <div> 或注释也算合法。W3C 验证器会直接报错 Element “body” not allowed as child of element “html” in this context 如果顺序错乱或缺失。
-
<meta charset="utf-8">必须是<head>中第一个标签（或紧随<title>后），否则中文可能乱码 -
<title>是<head>的直系子元素，不可嵌套在<div>或其他标签里 - 外部 CSS 应放在
<head>，JS 脚本建议放在</body>前——这不是“最佳实践”的客气话，而是避免阻塞 DOM 解析的实际需要
标签嵌套错误会静默破坏语义，但不一定报错
浏览器会自动修复很多嵌套错误（比如把 <p><div>xxx</div></p> 拆成 <p></p><div>xxx</div><p></p>），但修复结果不可控。屏幕阅读器、SEO 抓取、CSS 选择器作用域都会因此偏移。
立即学习“前端免费学习笔记（深入）”；
- 块级元素（如
<div>、<p>）不能直接放在<p>内部 -
<li>必须是<ul>或<ol>的直接子元素，中间插个<span>就会让列表语义断裂 - 自闭合标签如
<img>、<input>后面不加/>完全合法（HTML5），但加了也不会错；而<br>写成<br></br>反而会被当成两个换行
class 和 id 不是装饰用的，它们是 DOM 控制点
很多人把 class 当作纯 CSS 钩子，其实它是 JavaScript 操作节点最常用、最稳定的依据。一旦为了“好看”随意改 class 名，JS 功能就可能失效；id 更要小心——同一页面重复 id 不会报错，但 document.getElementById() 只返回第一个匹配项，label[for] 关联也会断掉。
-
class值应语义化（如js-modal-close、u-hidden-visually），而非描述样式（如red-text） - id 必须全局唯一，且不能以数字开头（
id="1nav"是非法的，id="nav-1"才合法） - 属性值一律用双引号包裹：
class="btn btn-primary"，单引号或不加引号在某些解析器里会出问题
真正难的不是记住这些规则，而是当多人协作、模板引擎介入、SSR 渲染、微前端加载时，这些边界条件会被层层掩盖。一个没闭合的 <header> 可能让整个后续 DOM 树的层级错位，而控制台却不会报错。
