您将学到什么
- 如何描述一个用户任务，而不是笼统地说“做个网站”
- 如何分部分搭建页面：结构、样式、行为
- 如何在手机和键盘上检查页面
- 哪些内容不能放进页面代码
关键概念
- HTML
- 页面的结构：标题、文字、按钮、表单。
- CSS
- 外观样式：颜色、字体、间距、适配屏幕。
- JavaScript
- 行为：点击时发生什么、提交表单、动画。
- 自适应
- 页面在手机、平板和电脑上都同样好用。
01描述一个场景
选定一类用户和一个操作：查找资料、提交申请、打开目录。写下这个人在操作之前看到什么，之后得到什么。这就是第一个版本的任务。
示例。 “主播打开页面，10 秒内明白捐款会直接进入他的钱包，然后点击‘创建链接’。”
02分部分搭建
先只让 AI 写 HTML 结构：标题、说明、三个优势和一个按钮。然后是样式，再然后是行为。每一部分都先在浏览器里检查，再进入下一部分：这样出了错很容易找到。
小提示。 请 AI 在代码里加简短的注释：这样更便于日后维护。
03在手机和键盘上检查
在窄屏上打开页面：任何内容都不能超出边缘，按钮要能用手指点中。用 Tab 键走一遍页面：每个链接和按钮都应该有明显的焦点。
- 宽度 360 像素时没有横向滚动条
- 正文字号不小于 16 像素
- 表单字段都有标签
- 所有链接都能打开
04安全
页面代码里的一切，任何访问者都能看到。API 密钥、密码和令牌永远不要放进页面代码：它们应该保存在服务器上。
- 不要把密钥和密码写进 HTML 和 JavaScript
- 不要引用来自未知网站的脚本
05为发布做准备
添加清晰的页面标题（title）和描述（description）：搜索引擎会展示它们。确认图片有说明文字（alt），并且页面在移动网络上也能快速打开。
发布之前
- 页面解决的是一个清晰的场景
- 手机上没有横向滚动条
- 所有按钮和链接都能用，并且可以用键盘操作
- 代码里没有密钥、密码和令牌
- 有 title、description 和图片说明
常见错误与正确做法
一上来就让 AI“做出整个网站”
从一个场景开始，分部分搭建。
只在电脑上检查
大多数访问者是用手机来的。
API 密钥直接写在页面代码里
机密信息只能保存在服务器上。
没有 title 和 description 就发布
没有它们，页面在搜索中更难被找到。
动手试试
搭建您自己项目的页面：标题、说明、三项功能，以及一个能用的操作。
- 用一句话描述用户场景
- 让 AI 生成 HTML 结构，并在浏览器中检查
- 添加样式，并在 360 像素宽度下检查
- 用 Tab 键走一遍页面，记下发现的问题
结果。 一个能用的页面，以及它通过的检查清单。
自我检测
先在心里回答，再点开查看答案。
1为什么最好分部分搭建页面？答案
每一部分都可以立刻检查，出错容易找到。一大段代码整体很难调试。
2可以把 API 密钥放在页面的 JavaScript 里吗？答案
不可以。任何访问者都能看到页面代码，密钥应该保存在服务器上。
3如何快速检查页面的可访问性？答案
用 Tab 键走一遍页面：所有按钮和链接都应该有可见的焦点。
简要回顾
一个场景，分部分搭建并在浏览器里检查，兼顾手机和键盘，代码中没有任何机密，title 和 description 清晰明确。这样做出的第一个页面不只是好看，而且能用。