html不是编程语言，而是结构说明书；必须首行小写声明标准模式，含（元信息）和（可见内容）两部分，嵌套错误会触发浏览器自动修复导致dom变形。
HTML 不是编程语言，它是一份结构说明书——浏览器照着它把内容“摆”出来，不计算、不判断、不响应。你写的每一行，只要语法合法，浏览器就原样执行。所以理解它的组成，关键不是记标签，而是看清「谁管什么、谁嵌在谁里面、谁必须出现、谁容易漏掉」。
为什么 必须写在第一行
它不是 HTML 标签，而是一个“声明”，告诉浏览器：“请用 HTML5 标准来解析接下来的内容”。不写或写错（比如大小写混用、空格缺失、写成 ），浏览器可能退回到怪异模式（Quirks Mode），导致 <code>width、padding 等行为和预期严重不符，尤其是老版 IE 或某些嵌入式 WebView 中更明显。
- 必须全小写，且中间不能有空格：
✔️；<code> ✔️（HTML5 允许，但统一小写最稳）；<code> ❌（部分环境会忽略） - 必须独占第一行，前面不能有任何字符（包括空格、BOM、注释）
- 它不闭合，也不属于
内部，是独立于整个文档树的前置指令
是给浏览器和搜索引擎看的“元信息区”，用户完全看不见； 才是用户真正看到的内容容器。混淆两者会导致功能失效或语义错误：
-
<title></title>放在里：浏览器标签页不会显示标题，SEO 完全丢失 -
<meta charset="UTF-8">放错位置（比如放在开头）：中文可能乱码，尤其在页面加载早期就输出内容时 -
<script></script>或<link rel="stylesheet">写在外面：浏览器无法加载 JS/CSS，页面白屏或无样式 -
的lang属性影响屏幕阅读器发音、拼写检查、CSS 的:lang()选择器，但它只作用于整个文档，不属于或任一者内部
新手常以为 里随便写点就行，其实只有少数几项是强依赖的，其余多数是“可选但推荐”：
- 必须存在且位置正确：
<meta charset="UTF-8">（防乱码）、<title></title>（页面标识） - 现代网页强烈建议加：
<meta name="viewport" content="width=device-width, initial-scale=1.0">（否则手机端默认缩放为桌面宽度，文字小到看不清） -
<meta name="description">不影响渲染，但影响搜索结果摘要；不写不会报错，但 SEO 友好性归零 -
<link rel="icon">缺失只会让地址栏/标签页缺图标，不影响功能 - 多个
<meta>标签顺序无关紧要，但<meta charset>必须在<title></title>之前（因标题可能含中文）
为什么
HTML 对嵌套错误容忍度高，但隐性代价大：浏览器会自动修复（如补闭合标签、移除非法子元素），结果往往和你写的不一致。典型表现是结构“看起来对”，实则 DOM 树已变形：
-
<p></p> <div>文本</div>：HTML 规范禁止<div> 作为 <code><p></p>的子元素，浏览器会自动拆成<p></p> <div>文本</div> <p></p>，导致意外换行和 margin -
<h1></h1> <p>标题</p>：标题标签只能包含短语级内容，<p></p>是块级容器，浏览器会中断<h1></h1>并重开，最终 DOM 中出现两个独立节点 - 忘记闭合
<ul></ul>或<table>：后续所有内容可能被吞进该标签内，导致样式错乱、JS 查询不到目标元素 <li>用开发者工具（F12 → Elements）看真实 DOM，比肉眼读源码更能暴露这类问题</li> <p>真正卡住人的，从来不是某个标签怎么写，而是 <code>和的职责边界、<meta charset>的生效时机、以及浏览器自动纠错带来的“看似运行成功实则结构歪斜”。这些地方不出错，后面加 CSS 和 JS 才有可靠基础。
