横批广告是首屏视觉锚点与转化入口，需兼顾加载性能、多端适配与无障碍可读；必须用语义化HTML（如/）、背景图+aspect-ratio控形、绝对定位文字层、响应式图片及合规对比度与触控尺寸。
横批广告不是“加张图就完事”，它本质是首屏视觉锚点+转化入口，必须同时扛住加载性能、多端适配、无障碍可读三重压力。
用 <header></header> 而不是 <div> 包裹横批区域
<p>语义错误会直接拖累 SEO 和屏幕阅读器识别。浏览器和爬虫把 <code><header></header> 当作页面主视觉区，而 <div class="banner"> 只是一堆无意义盒子。
<ul>
<li>主标题必须且只能有一个 <code><h1></h1>，别在横批里塞两个 <h1></h1>
<p></p> 或 <h2></h2>（如果语义上确实是次级标题）<a></a>（跳转）或 <button></button>（交互），禁用 <div onclick>
<li>别给 <code><header></header> 设 role="banner" —— 它本就是 banner 语义，重复声明反而干扰辅助技术
background-image + aspect-ratio 控制大图不变形
用 <img alt="HTML网页横批广告怎么做？顶部大图排版技巧" > 标签加载横批图，90% 的拉伸、裁切、文字被切问题都源于此。背景图才能自由控制缩放、定位、叠加蒙版。
- 容器设
aspect-ratio: 16 / 4（横幅常用比例）或aspect-ratio: 3 / 1，浏览器自动算高，不依赖height: 100vh - 背景图用
background-size: contain，确保“限时5折”这种边缘文案不被cover吃掉 - 加
background-position: center top，避免关键信息沉到图底部被遮挡 - 旧版 Safari 不支持
aspect-ratio？补一行padding-top: 25%（对应 4:1 宽高比）做降级
文字层必须用 position: absolute + z-index
文档流里的文字，在 iOS 微信 WebView、某些安卓定制浏览器里会被压在背景图下面——这不是 bug，是渲染顺序未显式声明的必然结果。
立即学习“前端免费学习笔记（深入）”；
- 文字容器（
<div class="text-layer">）设 <code>position: relative，内部所有子元素再用absolute -
<h1></h1>和 CTA 按钮分别设不同z-index（如 10 和 20），别只靠 DOM 顺序 - 加
text-shadow: 0 2px 4px rgba(0,0,0,.5)或半透明白色蒙版层，防止浅色文案在复杂背景上不可读 - 按钮至少
min-height: 44px，font-size: 16px起，否则 Safari 会触发自动缩放，破坏布局 - 结构必须是
<picture><source type="image/webp" srcset="..."><source type="image/jpeg" srcset="..."><img src="fallback.jpg" alt="..."></source></source></picture> - 每个
<source></source>加media属性，比如media="(min-width: 768px)"，按设备能力而非分辨率数字断点 - 手机小图尺寸别超 750px 宽，Pad 中图 1200px，桌面大图 2000px —— 再大没意义，带宽和解码都浪费
- 别忘了加
loading="lazy"到<img alt="HTML网页横批广告怎么做？顶部大图排版技巧" >，但横批图建议删掉它：首屏内容不该懒加载
响应式图片必须用 <picture></picture>，别只靠 srcset
一张 2MB 的桌面图扔进手机首屏，LCP 直接破 5s。WebP 在安卓省 40% 流量，但 iOS 13 以下不认，单靠 srcset 无法 fallback。
最常被忽略的是字体对比度和触控区域——Chrome DevTools 里点「Contrast」检查是否 ≥ 4.5:1，手指点不到的按钮等于不存在。
