header嵌套不影响语义权重，权重取决于标题元素而非嵌套层数；其作用域由最近的节元素（如section、article）决定，非嵌套深度；id选择器#header权重远高于header标签；dom顺序错乱会破坏可访问性，标题须为header内首个有意义内容。

html结构层面的header标签在多级嵌套布局中的权重识别逻辑

header嵌套是否影响语义权重？

本身不带层级权重，它不参与大纲（outline）生成，也不像

–

那样有固有级别。浏览器和读屏器只看它包裹了什么——尤其是有没有标题元素。嵌套多层

，但内部没

或

，那最内层的

就等于没说清楚“这是哪一节的头”。语义权重来自标题，不是标签层数。

如何判断某个header属于哪一级作用域？作用域由最近的**节元素（sectioning content）**决定，不是由嵌套深度决定。浏览器会向上查找最近的、

、

或

，那个父容器就是当前

的服务范围。

注意：

不能作为

的父容器——它必须是节元素的直接子元素，否则语义失效。

html-deploy

使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。

下载

ID选择器#header和

标签在CSS中的权重冲突#header是ID选择器，权重为(0,1,0,0)；而header标签选择器权重只有(0,0,0,1)。哪怕你写header header header，权重仍是(0,0,0,3)，远低于一个ID。

#header nav能轻松覆盖header nav，因为前者权重(0,1,0,1)，后者仅(0,0,0,2)
如果用header做样式锚点，别混用ID：要么全用header，要么用header.site-header这类类名组合，避免被#header意外压制
:where(header)权重为0，纯靠源码顺序生效，不适合用于覆盖ID规则

header嵌套时DOM顺序与可访问性风险屏幕阅读器按DOM顺序播报，如果嵌套

导致导航块出现在标题之前（比如

<header><nav>...</nav><h2>正文</h2></header>），它就会先读菜单再读标题——逻辑颠倒。

建议紧跟标题之后，不要前置；搜索框<form></form>可放在标题右侧，但DOM位置仍应在之后

移动端折叠导航时，nav不能从DOM中移除，只能用aria-hidden="true" + inert控制可访问状态

嵌套本身不难，难的是每层都得配得上它的位置——缺一个

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索前端的入门与实战技巧！