首屏3秒内必须完成价值确认，否则用户直接划走；需复现广告核心词、展示可信标识（如人社部备案编号）、设置单点动词型cta；禁止堆砌无关内容，html须语义化、lang="zh-cn"、viewport精准声明、flex父容器设display: flex。

一步步用html搭建推广单页营销页

首屏3秒内必须完成价值确认，否则用户直接划走

用户点开广告后，前3秒没看到“这说的就是我”，就划走了。不是页面美不美，而是

是否复现广告核心词，比如广告写“社保代缴”，

就得原样出现；可信标识（如“人社部备案编号：XXXXX”）必须在首屏直接可见；CTA按钮只能有一个，且必须是动词开头——`立即测算`、`免费领取`，禁用`了解更多`。

常见错误：把客户证言、服务流程、公司简介全堆在首屏顶部；或者把备案号藏在右上角小图标里。这些都得挪到 CTA 按钮下方或第二屏。

<header></header>里至少含一个可识别品牌标识（logo 或带字号的品牌文字），不能只靠颜色或字体暗示
首屏禁止出现二级导航、社交媒体图标、无关链接
所有图片必须带alt属性，空图用alt=""，描述性图用alt="上个月用它补缴了5年断缴"

HTML结构必须语义化，但
只能有一个

多个<main></main>会让屏幕阅读器和搜索引擎无法判断主内容，SEO直接打折。浏览器可能降权处理，不是警告，是事实性影响。

正确结构是：<main></main>只包裹真正核心内容（比如价值主张+表单），轮播图、客户案例、服务流程这些都该用<section></section>包裹，并各自配<h2></h2>。整个标签必须带lang="zh-CN"，否则读屏软件可能切不成中文语音。

anything-to-html

将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。

下载

<nav></nav>只用于主导航菜单，别塞进“友情链接”或“合作伙伴”
<section></section>之间不要嵌套，每个<section></section>应有独立语义（如“服务流程”“客户案例”）
<img>标签必须有src和alt，缺一不可；width/height建议写上，防布局抖动

viewport和meta标签写错，移动端首屏就废

很多落地页在手机上文字缩成一团、按钮点不中，根本不是 CSS 问题，是<meta name="viewport">漏了或写错了。iOS Safari 看到缺失initial-scale=1.0会自动缩放，安卓某些浏览器遇到user-scalable=no直接拒渲染。

必须写全这一行：<meta name="viewport" content="width=device-width, initial-scale=1.0">，一个字符都不能少。同时，<meta charset="UTF-8">必须放在最前面，否则中文标题可能乱码。

禁止写user-scalable=no——无障碍合规和基础渲染都过不了
如果页面要适配 iPad Pro 等大屏，width=device-width已足够，不用额外加maximum-scale
检查方法：Chrome DevTools → 切换设备模拟 → 看地址栏是否显示“缩放已禁用”或页面被强制缩小

Flex布局必须设父容器，否则子项flex属性全失效

很多人给子元素写flex: 1，结果样式完全不生效——因为父容器没加display: flex。这不是 bug，是 Flex 的规则：子项的flex属性只有在父容器声明了display: flex或display: inline-flex时才起作用。

推荐写法：<header></header>、<main></main>、<footer></footer>这类主区块统一用display: flex; flex-direction: column;；需要水平居中 logo + 标题时，给<header></header>加justify-content: center; align-items: center;，而不是给 logo 加position: absolute。

侧边栏固定宽、内容区自适应？侧边栏设flex: 0 0 240px，内容区设flex: 1，再加min-width: 0防长 URL 撑破
绝对定位只用于悬浮按钮、加载遮罩等脱离文档流的元素，且父容器必须有position: relative
避免用float或position: absolute做响应式布局，它们在移动端兼容性和可维护性上远不如 Flex