首屏3秒内必须完成价值确认，否则用户直接划走；<header>须含带alt的<img>或语义化<h1>（复现广告核心词），CTA按钮须置于<main>首屏可视区、用动词开头并具真实跳转，viewport需完整声明。
首屏必须在3秒内完成价值确认，否则用户直接划走——这不是设计问题，是HTML结构没锚定关键节点。
为什么 <header> 里必须有可识别品牌标识
广告点击进来的用户不记得你叫什么，只记得“社保代缴”“免费测算”这类关键词。如果 <header> 里只有个灰色小图标或靠字体粗细暗示品牌，screen reader 读不出、爬虫抓不到、用户扫一眼也忽略。
-
<header>中至少包含一个带alt的<img>或带语义的<h1>文本（如<h1>人社部备案社保代缴服务</h1>） - 禁止用
background-image渲染 logo：CSS 加载失败时整个可信标识消失 - 若用 SVG，必须内联且带
aria-label，不能只靠title元素
<h1> 必须复现广告语中的核心诉求词
用户从信息流点进来，大脑还停留在“3步搞定社保代缴”这个短语上。<h1> 如果写成“专业人事合规服务平台”，等于主动切断认知衔接，跳出率立刻上升。
- 广告文案是“立即测算公积金断缴影响”，
<h1>就得是<h1>立即测算公积金断缴影响</h1>，一字不差 - 避免在
<h1>里塞修饰词：“权威”“领先”“一站式”——它们不参与搜索匹配，也不触发用户确认感 - 移动端
<h1>字号建议设为clamp(1.5rem, 4vw, 2.5rem)，防止 iPhone SE 上文字过小、iPad Pro 上溢出
单点 CTA 按钮为什么必须放在 <main> 首屏且禁用 href="#"
按钮不是装饰，是转化漏斗的物理终点。放错位置、用错标签，等于把门焊死再挂个“推我”的纸条。
立即学习“前端免费学习笔记（深入）”；
- CTA 必须是
<button type="submit">或带真实跳转的<a href="/lead">，严禁href="#"或javascript:void(0) - 它得在
<main>内、<h1>下方 1–2 行内可见（viewport 高度内），不能靠 JS 动态插入 - 按钮文字必须是动词开头：
立即测算、免费领取、马上试用；了解更多这类表达在 A/B 测试中平均降低 37% 点击率 - 给按钮加
aria-label，例如aria-label="提交手机号获取社保测算报告"，辅助设备用户和部分安卓浏览器依赖它理解意图
<meta name="viewport"> 写错等于整页白做
很多落地页在手机上首屏只显示半行字、按钮缩成针尖，根本不是 CSS 问题，是浏览器压根没按真实视口渲染——起点就偏了。
- 必须写全：
<meta name="viewport" content="width=device-width, initial-scale=1.0"> - 漏掉
initial-scale=1.0：iOS Safari 会自动缩放，导致字体模糊、按钮难点 - 写
user-scalable=no：部分安卓浏览器和所有屏幕阅读器会拒绝加载页面 - 不要用
maximum-scale或minimum-scale：干扰用户双指缩放，W3C 明确列为可访问性障碍
最常被忽略的其实是语义顺序：<header> → <main> → <footer> 不只是布局容器，而是 DOM 焦点流和屏幕阅读器遍历路径。把 CTA 塞进 <footer> 或用 position: absolute 提前，等于在无障碍通道里砌墙。
