落地页首屏须3秒内完成价值确认，需含可信标识、需求匹配文案、单点动词型CTA；HTML须语义化（唯一<main>、正确<section><aside><nav>）、lang="zh-CN"、viewport精准声明；Flex布局需父容器设display: flex。
落地页首屏必须3秒内完成价值确认，否则用户直接划走
不是“页面做得漂亮就行”，而是用户滑动到你页面的瞬间，就要确认“这说的就是我”。首屏没做到三点：可信标识（比如人社部备案编号XXXXX）、需求匹配文案（广告语里写“社保代缴”，<h1>就得原样复现）、单点动词型CTA（立即测算，不是了解更多），跳出率立刻翻倍。
常见错误是把客户证言、服务流程、公司简介全堆在首屏——这些该放在CTA按钮下方或第二屏。首屏空间只留给最硬的信任锚点，比如真实客户头像+一句话：“上个月用它补缴了5年断缴”。
HTML结构必须严格语义化，<main>只能有一个
多个<main>会让屏幕阅读器和搜索引擎懵掉，就像餐厅服务员同时指两个“主菜区”。浏览器会降权处理，SEO直接打折。
正确结构要点：
立即学习“前端免费学习笔记（深入）”；
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
-
<main>只包裹真正核心内容，比如价值主张+表单，轮播图、推荐区别塞进去 -
<section>用于逻辑分组（如“服务流程”“客户案例”），每个<section>建议配<h2> -
<aside>放侧边栏或相关链接，<nav>只用于主导航菜单 - 整个
<html>必须带lang="zh-CN"，否则部分读屏软件无法切换中文语音
viewport写错，移动端首屏就废
很多落地页在手机上文字缩成一团、按钮小得点不中，根本不是CSS问题，是<meta name="viewport">漏了或写错了。iOS Safari看到缺失initial-scale=1.0会自动缩放，安卓某些浏览器遇到user-scalable=no直接拒渲染。
必须写全且精准：
-
<meta name="viewport" content="width=device-width, initial-scale=1.0">——一个字符都不能少 - 禁止出现
user-scalable=no，无障碍合规和基础渲染都过不了 - 如果页面要适配iPad Pro等大屏，
width=device-width已足够，不用额外加maximum-scale
Flex布局是目前最稳的响应式方案，但父容器常被忽略
很多人给子元素写了flex: 1，结果样式完全不生效——因为父容器没加display: flex。这不是bug，是Flex的规则：子项的flex属性只有在父容器声明了display: flex或display: inline-flex时才起作用。
几个高频场景写法：
- 首屏垂直居中logo+标题：
<header>加display: flex; justify-content: center; align-items: center; - 侧边栏固定240px、内容区自适应：
flex: 0 0 240px+flex: 1，再给内容区加min-width: 0防长URL撑破 - 绝对定位元素（如悬浮CTA按钮）必须套在
position: relative的父容器里，否则定位基准错乱
真正难的不是写对某一行代码，而是所有环节环环相扣：语义结构错一点，SEO和可访问性就掉一截；viewport漏一个参数，首屏体验直接归零；flex父容器忘设，整个响应式布局就瘫痪。落地页不是切图交付，是用HTML/CSS做一次精准的用户意图对齐。
