一个合法的最小html页面必须包含、、（含）和四个部分；缺一将导致怪异模式、解析异常或seo缺陷。
HTML 不是“样式”或“功能”，它是浏览器解析网页时最先读到的结构指令集——决定哪块是标题、哪段是正文、哪个区域该被搜索引擎识别为主内容。没它，CSS 和 JavaScript 都无处落脚。
HTML 骨架里哪些标签不能少
一个能被现代浏览器正确解析的最小合法 HTML 页面，必须包含这四个部分：
：必须在第一行，且不能带任何空格或注释前置；漏写或写成 <code>（小写）虽不报错，但可能触发怪异模式（Quirks Mode），导致盒模型、margin 合并等行为异常-
：根元素，lang属性不是可选装饰，它影响屏幕阅读器发音、SEO 语义权重，以及部分 CSS 的:lang()伪类匹配 -
<title>页面标题</title>：其中<title></title>是中唯一强制要求的子元素；缺了它，浏览器标签页显示为空白或文件名，且多数 SEO 工具直接判为结构缺陷 -
：所有可见内容的容器，即使空着也要存在；某些旧版工具链（如部分静态站点生成器）会因缺失导致构建失败
为什么 <meta charset="UTF-8">
这个声明不是“建议”，而是解码前提。浏览器在未收到明确字符编码指示时，会按默认编码（如 ISO-8859-1）尝试解析，一旦遇到中文、emoji 或特殊符号，轻则乱码，重则中断 HTML 解析（表现为后续标签不渲染）。它必须放在 最靠前的位置——在 <title></title> 之前，否则部分浏览器（尤其是移动端 WebKit 内核）可能已开始用错误编码读取 <title></title> 内容。
常见错误：
- 写成
<meta charset="utf-8">（单引号）：合法，但团队统一用双引号更稳妥，避免和属性值内引号冲突 - 漏掉
<meta name="viewport" content="width=device-width, initial-scale=1.0">：PC 端可能无感，但在手机上会导致页面被缩放成“小地图”，用户必须双指放大才能阅读
语义化标签比 <div> 多出什么实际价值<p>用 <code><header></header> 替代 <div class="header"> 不只是“看着规范”，它直接改变三件事：<ul>
<li>浏览器内置 ARIA 角色：例如 <code><nav></nav> 自动获得 role="navigation"，屏幕阅读器无需额外标注就能识别导航区
header nav ul 比 .header .nav .menu-list 更轻量，减少 class 名维护成本<main></main> 内容在索引时会被赋予更高相关性权重；而嵌套过深的 <div> 可能被降权为“装饰性区块”<li>调试时 DOM 树更干净：Chrome DevTools 中，语义标签自带折叠图标和颜色标识，一眼区分结构层级；一堆 <code><div> 则需反复点开才能确认用途<h3>
<code> 默认样式带来的布局陷阱
几乎所有浏览器都给 设了默认 margin: 8px（Chrome/Firefox）或 margin: 15px 10px（IE7–），这是页面四周总有一圈“看不见的空白”的根源。新手常以为是 CSS 写错了，其实只是没重置。
解决方式不是删 ，而是加初始化：
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
注意：box-sizing: border-box 这条不能省——它让 width: 100% 真正等于容器宽度，而不是“内容宽 + padding + border”，否则 Flex/Grid 布局极易撑破父容器。
容易被忽略的点：这个通配符重置要放在所有其他 CSS 规则之前，否则后续样式可能被覆盖；若用 CSS-in-JS 或模块化方案，需确保它注入顺序最早。
