banner区应使用语义化HTML结构，优先用<header>包裹，主标题用唯一<h1>，副标题用<p>或<h2>，按钮用<a>或<button>；CSS采用Flex布局实现垂直水平居中，配合clamp()响应式字体和<picture>按设备加载适配图片。
banner 区该用什么 HTML 结构
直接用 <header> 或 <section> 包裹，别用 <div> 堆砌语义。搜索引擎和屏幕阅读器靠标签理解页面结构，<header> 更贴合 banner 的导航+主视觉定位。
常见错误是把整个 banner 写成一个大 <div class="banner">，后续加无障碍属性（比如 role="banner"）或响应式处理都更麻烦。
- 主标题用
<h1>，且确保全站唯一（别多个<h1>） - 副标题或标语用
<p>或<h2>（如果语义上是次级标题） - 按钮统一用
<a>（跳转）或<button>（交互），别用<div onclick>
CSS 实现居中+自适应的关键写法
不是靠 margin: 0 auto 或 text-align: center 就完事——banner 高度常需视口满屏（100vh），文字又得垂直水平居中，Flex 是最稳解法。
示例核心样式：
立即学习“前端免费学习笔记（深入）”；
.banner {
height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
padding: 0 1rem;
}
.banner h1 {
font-size: clamp(1.5rem, 4vw, 3.5rem);
line-height: 1.2;
}
clamp() 比媒体查询更轻量，适配手机到 4K 屏；padding 防止小屏文字贴边；flex-direction: column 确保文字堆叠顺序可控。
- 背景图用
background-image而非<img>标签——方便覆盖、模糊、渐变叠加 - 加
background-attachment: fixed要谨慎：iOS Safari 有渲染 bug，滚动卡顿常见 - 字体颜色务必和背景图对比度 ≥ 4.5:1，可用 Chrome DevTools 的「Contrast」检查
响应式断点与图片加载优化
banner 图在手机上加载一张 2MB 的桌面图，首屏时间直接翻倍。必须按设备宽度提供不同尺寸资源。
用 <picture> + <source> 是目前最可控方案：
<picture> <source media="(max-width: 768px)" srcset="banner-sm.jpg"> <source media="(max-width: 1200px)" srcset="banner-md.jpg"> <img src="banner-lg.jpg" alt="个人主页横幅：专注前端开发与开源分享"> </picture>
-
alt文本不能留空，要描述画面+传达意图（比如“展示作者在代码编辑器前工作的场景”） - 所有 banner 图建议 WebP 格式，比 JPEG 小 30% 以上，
<img>的loading="lazy"对 banner 无效（它总在首屏），别加 - 如果用 CSS
background-image，就只能靠@media切换background-image，无法实现浏览器原生的 srcset 响应逻辑
交互反馈与可访问性补漏
hover 效果、点击反馈、键盘焦点——这些细节决定 banner 是「能用」还是「好用」。
- 按钮加
:focus-visible轮廓（别用:focus全局覆盖，会干扰鼠标用户） - 文字层加轻微
text-shadow或半透background，确保深色图上白字、浅色图上黑字都清晰 - 避免纯 CSS 动画（如
animation: float 3s ease-in-out infinite）——可能触发用户偏头痛，WCAG 2.2 明确要求可暂停 - 若 banner 含自动轮播，必须提供手动控制（
<button aria-label="暂停轮播">）、足够大的点击区域（≥ 44×44px）
真正难的不是写出 banner，而是让不同设备、不同网络、不同能力的人都能第一时间看懂你是谁、想表达什么。样式只是载体，信息优先级和加载韧性才是横幅区的底层逻辑。
