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