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