第一个页面只做一件事：讲清给谁用、解决什么，让感兴趣的人留下联系方式。
- 学习结果
- 上线一个能在手机上正常阅读的产品介绍页，表单提交能真正被你收到。
- 时长
- 2-4 小时
- 难度
- 零基础
- 核验
- 未核验
正文
第一个网页最好是一个产品介绍页，也叫落地页。它不需要登录、不需要数据库，却能完整练到写内容、排版、收集信息和部署上线，还能直接用来验证想法：有没有人愿意留下邮箱，说明有没有人真的在意这个问题。
常见的问题是一开始就想做“官网”：介绍团队、卖课、招商、放博客，什么都有，读者却看不出该做什么。一个页面只服务一个动作。候补名单页，就只让人留下联系方式。
页面只需要五块
- 首屏：一句话说清给谁用、解决什么问题，加一个按钮。“帮自由设计师按项目统计每周工时”比“提升你的效率”具体得多。按钮写清下一步，比如“申请试用”。
- 它长什么样：一张截图或示意图，配一句说明，比如“按项目汇总本周工时”。
- 怎么用、适合谁：三到五条，说明主要用法和适用条件，也写清不适合谁。
- 表单：只收必要的信息，通常一个邮箱就够。
- 常见问题和联系方式：价格、上线时间、数据怎么处理，以及怎么联系你。
写完后做个测试：把样式全部去掉，只看文字，读者能不能按顺序看懂这个产品、知道该怎么申请。如果能，内容结构就是对的。
HTML 负责内容的结构
HTML 决定每段内容“是什么”：大标题用 h1，每个区块的标题用 h2，跳转到别的页面用链接，提交表单用按钮。每个输入框都要有看得见的标签：
<label for="email">邮箱</label>
<input id="email" name="email" type="email" required>
<button type="submit">申请试用</button>
输入框里的灰色提示文字（placeholder）不能代替标签，用户一开始输入它就消失了。重要的信息也不要只放在图片里，读屏软件和搜索引擎都读不到图片里的字。
CSS 负责排版，但不能把信息藏起来
几条规则就能让页面在手机和电脑上都好读：正文限制最大宽度，图片不超过容器，窄屏时排成一列。
main { max-width: 720px; margin: 0 auto; padding: 0 16px; }
img { max-width: 100%; height: auto; }
不要给文字区块设固定高度去追求整齐，内容一长就会被截掉。按钮里的文字变长时允许换行。在 320 像素宽的手机上，读者应该不用左右滑动就能读完整个页面。
截图要诚实
截图展示的是产品现在能做的事。还没做出来的功能，可以用示意图说明，但要明确写上“设计示意”，不能让人以为已经可以用了。截图里如果有客户姓名、邮箱、金额，要先打码。
表单必须真的能收到
这是新手最容易踩的坑：纯 HTML 页面上的表单，自己不会保存任何东西。点击提交后，数据要发到某个地方。没有后端的话，最简单的办法是用现成的表单服务（比如 Tally），把它的表单嵌入页面，或者把你的表单提交到它提供的地址。
接好之后，用自己的邮箱提交一次，确认后台真的收到了。然后再测几种异常：邮箱格式不对、重复提交、网络断开。提交成功时告诉用户“已收到，会在一周内通过邮件联系你”；失败时保留用户已经填好的内容，并说明怎么重试。
隐私是页面的一部分
只需要邮箱，就不要顺手收手机号和公司名。在表单旁边写一句：收集邮箱做什么用，怎样申请删除。收到的名单不要提交到公开的代码仓库里。
上线和检查
静态页面可以免费部署到 Cloudflare Pages 或 GitHub Pages，绑定域名后就能分享。上线后换一台设备打开，检查图片、按钮和表单。
最后找五个目标用户看这个页面，不要问“好不好看”，而是请他们用自己的话说说：这是做什么的，适合谁，下一步要做什么。他们说不清楚的地方，就是要改的地方。
学习步骤
- 用一句话写下“给谁用、解决什么问题、下一步做什么”。
- 按五个区块写出全部文字内容，先不考虑样式。
- 用 HTML 搭出结构，检查标题层级和输入框标签。
- 加上几条基础 CSS，在 320 像素宽度下检查能否完整阅读。
- 接入表单服务，用自己的邮箱测试提交，并测试三种异常情况。
- 部署上线，找五个目标用户复述页面用途，记录他们卡住的地方。
场景拆解
为工时统计工具做候补名单页
小周想做一个帮自由设计师按项目统计工时的小工具，产品还没做完，想先看看有没有人感兴趣。
- 首屏：“帮自由设计师按项目统计每周工时，月底报价不再靠估。”按钮写“加入候补名单”。
- 示意图：一张标注了“设计示意”的界面图，说明“每个项目本周花了多少小时”。
- 适合谁：同时接多个项目、按小时或按项目报价的自由设计师；不适合需要团队协作的工作室。
- 表单：只收邮箱，旁边写“只用于通知上线，可随时回复邮件退出”。
- 测试：用两个邮箱各提交一次，确认都收到了；故意填错邮箱格式，确认会提示错误；断网提交，确认填好的内容还在。
一周后统计：多少人访问、多少人留下邮箱、有没有人主动回复问细节。这些数据比“朋友说页面很好看”更能说明这个想法值不值得继续做。
补充材料
思维导图、练习、清单和参考资料可按需展开。
01 思维导图和离线文件
适合读完后下载到自己的知识库里继续整理。
页面的五块内容
- 首屏：给谁、解决什么、下一步
- 它长什么样：截图或标注的示意图
- 怎么用、适合谁
- 表单：只收必要信息
- 常见问题与联系方式
让页面好读
- HTML 写清标题层级和标签
- 正文限宽，图片自适应
- 窄屏单列，不用横向滚动
- 重要信息不只放在图片里
让表单真的可用
- 接入表单服务或后端
- 用自己的邮箱测试
- 测错误输入、重复提交、断网
- 说明用途和删除方式
02 实践练习
根据文章内容记录自己的判断与依据。
上线一个能收到申请的介绍页
为你自己的一个想法（或上面的工时工具）做一个介绍页，并让表单真正能收到数据。
准备材料
- 一句话产品描述和三到五条用法说明。
- 一张截图或标注为“设计示意”的图。
- 一个表单服务账号，以及 Cloudflare Pages 或 GitHub Pages 账号。
练习步骤
01 / 先写文字
时间： 40 分钟
操作：
- 按五个区块写出全部文字。
- 把首屏那句话念给一个朋友听，看他能否复述。
产出： 一份纯文字的页面稿。
检查： 不看任何图片和样式，读者也能明白产品是什么、怎么申请。
02 / 搭页面
时间： 60 分钟
操作：
- 用 HTML 写出结构，给每个输入框配上标签。
- 加上限制宽度和图片自适应的 CSS，在手机宽度下检查。
产出： 一个本地能打开的页面。
检查： 320 像素宽度下不需要左右滑动；没有被截断的文字。
03 / 接通表单
时间： 40 分钟
操作：
- 接入表单服务，用自己的邮箱提交测试。
- 测试错误邮箱、重复提交和断网三种情况。
产出： 一份表单测试记录。
检查： 每次正确提交都能在后台看到；失败时用户的输入没有丢。
04 / 部署和收反馈
时间： 40 分钟
操作：
- 部署上线，在另一台设备上检查。
- 请五个目标用户复述页面用途。
产出： 线上链接和五条反馈。
检查： 至少四个人能准确说出产品是做什么的。
完成检查
- 页面只有一个主要动作。
- 表单提交能被你真正收到，并且测过异常情况。
- 在手机上能完整阅读。
03 清单、模板和关键词
用于项目记录和自查。
页面文案模板
首屏一句话：帮【谁】【解决什么问题】，【带来什么结果】
按钮：【下一步动作】
它长什么样：图 + 一句说明（未实现的功能标“设计示意”）
怎么用 / 适合谁：3-5 条
不适合谁：1-2 条
表单：只收【必要信息】；用途：____；删除方式：____
常见问题：价格 / 上线时间 / 数据怎么处理
联系方式：____
上线前检查
- 每个输入框都有看得见的标签
- 320 像素宽度下无需横向滚动
- 图片不超出屏幕，有替代文字
- 表单正确提交、错误提示、断网都测过
- 示意图都标了“设计示意”
- 收集的个人信息有用途说明
关键概念
- 落地页：只服务一个目标动作的页面
- HTML：定义内容的结构和含义
- CSS：控制排版和视觉
- label：输入框的可见标签
- 响应式：同一个页面适配不同屏幕宽度
- 表单服务：没有后端时接收表单数据的现成工具
- 静态部署：把页面文件放到托管平台上公开访问
容易误判
- 以为 HTML 表单自己会保存数据
- 用 placeholder 代替输入框标签
- 一个页面塞进卖课、招商、博客等多个目标
- 把未完成的功能截图当成已上线功能展示
- 收集远超需要的个人信息
- 只问朋友“好不好看”，不问“看懂了没有”
04 工具和参考资料
本篇涉及的工具和参考链接。
可参考工具
- VS Code
- Tally
- Cloudflare Pages
- GitHub Pages
- Figma