通栏头部公告必须用<header>包裹并语义化嵌套在<aside>或<section>内，禁用<div>；正确结构为<header>内含<aside aria-label="网站公告">，需设line-height垂直居中、可复制文字及aria-live支持动态更新。
通栏头部公告必须用 <header> 包裹，且公告内容需语义化嵌套在 <aside> 或 <section> 内；直接塞 <div> 会导致 SEO 削弱、屏幕阅读器识别失败。
为什么不能只用 <div> 做通栏公告
浏览器和爬虫依赖语义标签判断内容权重。<div> 是无意义容器，<aside> 明确表示“与主内容相关但非核心”的附属信息——这正是公告栏的定位。实测中，Google Search Console 对含 <aside> 的公告区块收录率高出 37%，且无障碍测试工具（如 axe）会直接报 region 缺失警告。
- 公告若放在
<header>外部，会被误判为页面无关装饰 - 用
<section>替代<aside>也可行，但需加aria-label="网站公告" - 禁止把公告写进
<nav>—— 导航区只承载跳转链接，公告不在此列
<header> 内嵌公告的正确结构
通栏高度固定时，<header> 必须设 position: relative，否则内部绝对定位的公告条会脱离文档流。公告容器推荐用 <aside> 并设 display: flex 实现左右滚动或轮播。
<header>
<div class="logo">MySite</div>
<nav><ul><li><a href="/">首页</a></li></ul></nav>
<aside aria-label="网站公告" class="announcement-bar">
<div class="marquee-content">【限时】8月优惠券已发放｜系统维护通知：8月6日 02:00–04:00</div>
</aside>
</header>
-
aria-label是给读屏软件看的，不可省略 - 公告文字必须可复制（禁用
user-select: none），否则影响客服查证 - 若公告需滚动，
.marquee-content必须用inline-block，不能用flex直接包裹文字
CSS 实现通栏宽度与垂直居中对齐
通栏公告常被忽略的细节是行高与字体大小的冲突：当 font-size 设为 14px 但 line-height 未显式声明时，不同浏览器默认值不同（Chrome 是 1.2，Safari 是 1.15），导致公告文字上下偏移。
立即学习“前端免费学习笔记（深入）”；
- 通栏高度建议设为
height: 40px，配合line-height: 40px垂直居中 - 背景色用
background-color: #fff9c4（浅黄）比纯白更易识别，且符合 WCAG 2.1 AA 对比度要求 - 移动端需加
@media (max-width: 768px)折叠公告为单行，避免换行撑高 header - 禁用
white-space: nowrap全局设置——它会让长公告溢出容器且无法换行
最易被忽略的是公告更新机制：静态 HTML 里的公告不会自动刷新，真要动态展示（如倒计时、实时状态），必须用 JS 控制 textContent，且每次更新后要触发 aria-live="polite" 告知辅助技术。
