<header>语义化表示页面页眉区域，应包裹顶部公告栏和用户快捷菜单两个同级区块，用<section>和<nav>分别标记，避免仅为样式滥用或无意义嵌套。
<header> 标签在 HTML5 中语义化表示页面或区块的**页眉区域**，适合包裹电商网站顶部的全局性内容，比如顶部公告栏和用户快捷菜单。关键在于：它不是“只能放 logo”，而是承载整个页面最上方的导航与信息入口。
结构上用 header 包裹两个逻辑区块
顶部公告（如促销倒计时、系统通知）和快捷菜单（如登录/注册、我的订单、客服、收藏）属于同一层级的全局服务入口，语义上同属“页面头部导引区”，应统一放在一个 <header> 内，再用更具体的语义标签区分：
- 用
<div class="announcement">或<section aria-label="网站公告">包裹公告内容 - 用
<nav aria-label="用户快捷导航">包裹快捷菜单（因含多个跳转链接，符合<nav>的语义）
避免常见语义错误
不要把 <header> 当成纯样式容器滥用：
- ❌ 不要只为“加个背景色”就套一层
<header>—— 它必须承载实际的页眉功能 - ❌ 不要在同一个页面中无意义地嵌套多个
<header>（如每个商品卡片里都放一个），主页面通常只需一个顶层<header> - ✅ 若页面有独立文章区块（如帮助中心文章页），其内部可另设
<header>，但那是文章级页眉，与站点顶部的<header>并存是合理的
一个简洁实用的 HTML 示例
以下代码兼顾语义、可访问性和基础结构清晰度：
立即学习“前端免费学习笔记（深入）”；
<header><section aria-label="今日公告">
<p>? 双11预售开启！全场满299减50，仅限48小时</p>
</section>
<nav aria-label="用户快捷菜单">
<ul>
<li><a href="/login">登录</a></li>
<li><a href="/register">注册</a></li>
<li><a href="/order">我的订单</a></li>
<li><a href="/customer-service">客服</a></li>
</ul>
</nav>
</header>
配合 CSS 实现视觉分层（简要提示）
HTML 语义到位后，CSS 可轻松实现“公告条+菜单栏”的上下或左右布局：
- 对
.announcement设置浅色背景 + 小号字体 + 水平居中，高度固定（如 32px） - 对
nav设置 flex 布局，右对齐用户菜单，与公告形成视觉节奏 - 确保焦点键盘导航顺序自然：从左到右、从上到下，与 DOM 顺序一致
