横批广告是首屏视觉锚点与转化入口，需兼顾加载性能、多端适配与无障碍可读；必须用语义化HTML（如/）、背景图+aspect-ratio控形、绝对定位文字层、响应式图片及合规对比度与触控尺寸。

横批广告不是“加张图就完事”，它本质是首屏视觉锚点+转化入口，必须同时扛住加载性能、多端适配、无障碍可读三重压力。

用

而不是

包裹横批区域

语义错误会直接拖累 SEO 和屏幕阅读器识别。浏览器和爬虫把

当作页面主视觉区，而

只是一堆无意义盒子。

• 主标题必须且只能有一个
  ，别在横批里塞两个

• 副文案用
  或
  （如果语义上确实是次级标题）
• 按钮统一用 （跳转）或 （交互），禁用
• 别给
  设 role="banner" —— 它本就是 banner 语义，重复声明反而干扰辅助技术

background-image + aspect-ratio 控制大图不变形

用 标签加载横批图，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，是渲染顺序未显式声明的必然结果。


HTML Text Extract
从HTML页面（URL、文件或标准输入）中提取主体内容文本，去除导航、页脚、广告和模板文本。可直接传递给readability_check或其他文本工具。
下载
• 文字容器（
  ）设 position: relative，内部所有子元素再用 absolute

• 和 CTA 按钮分别设不同 z-index（如 10 和 20），别只靠 DOM 顺序
• 加 text-shadow: 0 2px 4px rgba(0,0,0,.5) 或半透明白色蒙版层，防止浅色文案在复杂背景上不可读
• 按钮至少 min-height: 44px，font-size: 16px 起，否则 Safari 会触发自动缩放，破坏布局

响应式图片必须用 ，别只靠 srcset

一张 2MB 的桌面图扔进手机首屏，LCP 直接破 5s。WebP 在安卓省 40% 流量，但 iOS 13 以下不认，单靠 srcset 无法 fallback。

• 结构必须是
• 每个 加 media 属性，比如 media="(min-width: 768px)"，按设备能力而非分辨率数字断点
• 手机小图尺寸别超 750px 宽，Pad 中图 1200px，桌面大图 2000px —— 再大没意义，带宽和解码都浪费
• 别忘了加 loading="lazy" 到 ，但横批图建议删掉它：首屏内容不该懒加载

最常被忽略的是字体对比度和触控区域——Chrome DevTools 里点「Contrast」检查是否 ≥ 4.5:1，手指点不到的按钮等于不存在。