html标签是浏览器理解内容逻辑的指令集，决定语义、导航、seo和辅助技术角色；嵌套须符合文档流与层级规则，否则引发解析异常、dom错乱及css失效。
HTML标签不是“画框”或“装饰”，而是浏览器理解内容逻辑的指令集。它们不直接决定样式，但决定了内容在语义、导航、SEO 和辅助技术中的角色。
标签嵌套必须符合文档流和语义层级
浏览器按 → / → 子元素的顺序解析结构。违反嵌套规则（比如把 <p></p> 放进 ，或在 <ul></ul> 外写 <li>）会导致解析异常：部分标签被自动闭合、DOM树错乱、CSS选择器失效。
-
只能包含元信息类标签：<title></title>、<meta>、<link>、<script></script>（且不能有内容） -
是唯一承载可视内容的容器，所有用户可见元素必须在其内，且需遵循块级/行内上下文（例如不能把<div> 直接塞进 <code><p></p>） - 标题标签
<h1></h1>–<h6></h6>应呈逻辑降序，跳级（如<h1></h1>后跟<h3></h3>）不影响渲染，但会破坏屏幕阅读器的导航结构 - 搜索引擎靠这些标签判断页面主干内容与辅助区块，影响 SEO 权重分配
- 屏幕阅读器用它们构建导航大纲，用户可快速跳转到
<main></main>或跳过<aside></aside> - 现代 CSS（如
display: contents）和 JS（如document.querySelector('main')）更倾向依赖语义而非 class 名定位 - 不强制替换所有
<div>，但关键区块（如页眉、正文区、版权声明）应优先用语义标签 <h3>为什么 <code><title></title>必须在里，而<meta charset="UTF-8">必须靠前<title></title>的位置影响浏览器标签页显示时机，但真正关键的是字符编码声明的位置——它必须是中**前 1024 字节内**的第一个<meta>，否则浏览器可能已按默认编码（如 ISO-8859-1）解析了部分 HTML，导致中文乱码或标签误解析。- 错误写法：
<script>...</script><meta charset="UTF-8">→ 脚本执行前就可能触发乱码 - 正确顺序：
<meta charset="UTF-8">应紧贴开始，其次是<title></title>，再是其他<meta>和资源引用 -
<title></title>不影响解析，但缺失会导致浏览器标签显示“无标题页面”，对用户和 SEO 都不利
真正容易被忽略的不是“怎么写标签”，而是标签之间隐含的协作契约：浏览器靠它们推断内容关系，辅助工具靠它们生成交互路径，搜索引擎靠它们提取有效片段。写错一个
<main></main>的位置，可能比少写一个<div> class 影响更大。</div> - 错误写法：
<div> 和语义化标签（<code><header></header>、<section></section> 等）的区别
<div> 是无语义的通用容器，只提供布局能力；而 <code><header></header>、<nav></nav>、<main></main>、<article></article>、<footer></footer> 等是语义化标签，告诉浏览器“这部分内容的功能是什么”。
