5.6 综合实战：从零构建完整页面
5.6 综合实战：从零构建完整页面
本节摘要：一个"产品介绍页"的完整搭建过程，把全册知识总装进一份文件：语义骨架（第 2 章）、样式体系（第 3 章）、交互脚本（第 5.2 节）、性能与安全细节（第 5.3、5.4 节），最后按第 4 章的四维标准逐项验收。跟着做完，本册的每条概念都至少落地过一次。
学习目标
阅读完本节，你应当能够：
- 按需求清单独立搭出语义骨架而不是边写边想；
- 用变量与档位组织一份轻量样式体系；
- 给页面配上无障碍、渐进增强的交互脚本；
- 内嵌质量验收清单并逐项打钩；
- 把这份流程迁移到自己的下一个页面项目。
需求与骨架先行
实战做一个"课表生成器"介绍页：顶部导航、首屏主视觉（标题加主按钮）、三张特性卡片、常见问答、页脚。动笔前先写需求清单（哪怕只有自己看），再按第 2 章的骨架模板落结构——顺序不能反：结构跟着需求走，样式跟着结构走，脚本最后上。
第一步落语义骨架，只写结构与内容，不碰任何样式：
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>课表生成器：三分排出整学期课表 - 造页工具</title> <meta name="description" content="输入课程与约束，自动排出无冲突课表。支持导出与日历订阅，免费试用。"> </head> <body> <header> <h1>课表生成器</h1> <nav aria-label="主导航"> <ul> <li><a href="#features">特性</a></li> <li><a href="#faq">常见问答</a></li> <li><a href="#start">开始使用</a></li> </ul> </nav> </header> <main> <section id="hero" aria-label="主视觉"> <h2>三分排出整学期课表</h2> <p>输入课程、时间与教室约束，算法自动给出无冲突方案。</p> <p><a href="#start" class="btn-primary">免费生成</a></p> </section> <section id="features"> <h2>核心特性</h2> <ul class="cards"> <li class="card"> <h3>冲突检测</h3> <p>教师、教室、班级三维约束同时校验。</p> </li> <li class="card"> <h3>一键导出</h3> <p>导出表格文件或订阅日历，打印版式自动优化。</p> </li> <li class="card"> <h3>多人协作</h3> <p>教研室共享草稿，修改实时同步。</p> </li> </ul> </section> <section id="faq"> <h2>常见问答</h2> <details> <summary>免费版有什么限制？</summary> <p>同时一学期一门课表，导出带水印，其余功能完整。</p> </details> <details> <summary>数据存在哪里？</summary> <p>课表数据保存在你的浏览器本地，不上传服务器。</p> </details> </section> </main> <footer> <p>© 2026 造页工具 · <a href="#about">关于我们</a></p> </footer> </body> </html>
骨架里每个选择都对应一条已学规则：h1 唯一且表主题、标题不跳号、nav 带 aria-label 区分地标、卡片列表用 ul 加 li（并列关系，第 2 章的判别问题）、问答用原生 details 折叠（免脚本的原生交互，又是"平台收编"）。title 与 description 按 SEO 规范写好——地基阶段就把质量埋进去，而不是最后补。
样式：变量与档位的轻体系
第二步上样式。用第 3 章的工具：变量定义色板、弹性布局排版、媒体查询响应：
<style> :root { --brand: #2980b9; --ink: #2c3e50; --muted: #7f8c8d; --bg-soft: #eaf2fc; --gap: 16px; --radius: 10px; } *, *::before, *::after { box-sizing: border-box; } body { margin: 0; font-family: sans-serif; color: var(--ink); line-height: 1.7; } header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--gap); padding: 16px 24px; border-bottom: 1px solid #eee; } nav ul { display: flex; gap: var(--gap); list-style: none; margin: 0; padding: 0; } nav a { color: var(--ink); text-decoration: none; } nav a:hover, nav a:focus-visible { color: var(--brand); } #hero { text-align: center; padding: 64px 24px; background: var(--bg-soft); } .btn-primary { display: inline-block; background: var(--brand); color: #fff; padding: 10px 28px; border-radius: var(--radius); text-decoration: none; } .btn-primary:hover, .btn-primary:focus-visible { background: #1f6391; } .cards { display: flex; flex-wrap: wrap; gap: var(--gap); list-style: none; padding: 0 24px; margin: 0; } .card { flex: 1 1 240px; border: 1px solid #ddd; border-radius: var(--radius); padding: var(--gap); } #faq, #features { padding: 16px 24px; } details { border-bottom: 1px solid #eee; padding: 8px 0; } footer { padding: 24px; color: var(--muted); font-size: 14px; border-top: 1px solid #eee; } @media (max-width: 640px) { header { flex-direction: column; align-items: flex-start; } } </style>
样式里埋着各章的纪律：通配 box-sizing 重置起手、变量集中色板（换肤只动 :root）、悬停与聚焦成对、间距档位收敛到变量、断点唯一且服务内容。注意样式没有新增任何结构性类名——骨架里的 card 与 btn-primary 都是既定角色，样式只是给角色穿衣服。
脚本：渐进增强的一小块
第三步加脚本。这个页面本身几乎不需要脚本（details 原生折叠），加一个"回到顶部"演示交互与状态播报，按第 5.2 节的纪律写：
<button id="to-top" hidden>回到顶部</button> <p id="live-region" aria-live="polite" class="visually-hidden"></p> <script src="app.js" defer></script>
// app.js（独立文件，defer 加载） const btn = document.getElementById('to-top'); const live = document.getElementById('live-region'); // 滚动出现返回按钮：行为增强，无脚本时页面功能完整 window.addEventListener('scroll', () => { btn.hidden = window.scrollY < 400; }, { passive: true }); btn.addEventListener('click', () => { window.scrollTo({ top: 0, behavior: 'smooth' }); live.textContent = '已回到页面顶部'; // 状态变化配播报，第4章的线 });
三处细节各对应一条已学规则：按钮初始 hidden、脚本可用才显形（渐进增强的微观版）；滚动监听配 passive 提示（高频事件优化）；操作后 aria-live 播报（无障碍状态）。样式层补一条把提示文本视觉隐藏但读屏可见的规则，四层知识在一行样式里合流。
性能与安全清单
发布前过第 5.3、5.4 节的清单：脚本 defer、样式前置；未来加图片时 loading 懒加宽高声明；本页无用户内容渲染，一旦加评论区，textContent 铁律立即生效；外链如换成动态生成，协议白名单先上。页面此刻没有第三方依赖——保持这个克制，每引入一个外部脚本都问一句值不值。
四维验收总表
最后按第 4 章验收，这张表也可以直接用于你自己的任何页面：
| 维度 | 检查点 | 本页状态 |
|---|---|---|
| 规范 | 类名述角色、格式统一、无尸体代码 | 通过 |
| 可访问性 | 地标齐全、标题不跳号、焦点可见、details 原生可达 | 通过 |
| SEO | title 唯一前置、description 概括、h2 大纲、真实 a 导航 | 通过 |
| 验证 | 无 id 重复、内容模型合法、编码声明在前 | 通过 |
验收不是终点而是回归项：每次改版后重跑一遍。项目做大后，把这张表交给工具（格式化、检查器、验证器、无障碍扫描）自动执行，人只看机器查不了的部分——第 4.1 节"工具管机械的、人管意义的"在这里完成闭环。
骨架阶段的决策复盘
代码看完，把骨架阶段值得停下来的决策逐个复盘——这些决策点才是实战的可迁移资产。
导航用了页内锚点而不是路由链接。介绍页是单页文档，锚点跳转（href 加井号）让浏览器原生处理滚动，无脚本、零成本、可被读屏与键盘使用。若日后拆成多页，锚点换成站内路径即可，结构不变。
特性卡片用 ul 而不是三个 article 或三个 div。三张卡片是并列的"要点清单"，不是独立作品（第 2 章的判别问题：单独转发一张卡片没有意义），也不是无语义分组（它们有明确主题"核心特性"）。列表容器天然适配弹性布局的换行排列，结构与样式在此互相成全。
问答用 details 而不是脚本折叠。原生元素自带展开收起、键盘可达、无障碍语义，零脚本零样式就能工作。这是"平台收编"（第 5.5 节）在标记层的日常应用：每用一个自带行为的原生元素，就少写一段要自己维护可访问性的脚本。
主按钮是带类名的 a 而不是 button。它的行为是跳转（到开始使用区），不是触发动作——链接语义正确，且原生支持中键新开、右键复制。按钮与链接的分界在语义不在长相，长成按钮样的链接就给它链接的语义再配按钮的样式。
每个决策都能追溯到一个已学的判别问题，这正是"概念筑基"学法的兑现时刻：遇到选择时不是查"最佳实践怎么说"，而是问"这个内容的本质是什么"。
验收实操：把表跑一遍的十五分钟
光有表不跑等于没有。验收的实操流程十五分钟：第一步，鼠标放一边，纯键盘从地址栏开始走完"导航到特性区、展开一个问答、跳到开始使用"三件事，任何一步卡住就是可访问性问题（第 4.2 节的走查法）。第二步，开发者工具的问题面板扫一遍，机器可查的项目（对比度、缺失标签、控制台报错）一次看全。第三步，把整份文件送进验证器（第 4.4 节），报告应零错误。第四步，对照 SEO 清单人工看三样：title 是否唯一且概括、描述是否真实、禁用脚本后正文是否完整（渐进增强的终检）。四步做完，表上每一格都有依据地打钩——验收的价值不在表格本身，在于每个钩背后有一次真实的检查动作。
值得把这套流程在改版时重复跑：页面会演化，验收是回归项不是里程碑。团队协作时把四步写进发布前检查单，新人也能按单执行——这又是第 4.1 节"规范写进项目而非文档"的一次落地。
常见扩展场景的接法
真实项目很少停在介绍页，三个最常见的扩展方向各给一条接法，都基于已有知识：加评论区（用户内容）——插入一律 textContent、评论区整体用第 2 章的评论结构（列表 section 加条目 article）、提交表单接 FormData 序列化，第 5.2 与 5.4 节的纪律全套上岗。加首屏大图——picture 多源加 img 兜底、宽高声明防跳动、首图不懒加载、配描述性 alt，第 5.3 节图片三板斧。加数据图表——canvas 绘制配数据表格的文本替代表述（第 2.4 节的双表达方案），图表库引入前先问一句自绘够不够。三个方向的共同点：扩展不需要新概念，只需要把对应章节的既有纪律搬到对应位置——这就是体系化知识的复利。
迁移到你的项目
把本节流程抽象成五步，任何页面项目通用：一需求清单（写下来，哪怕三行）；二语义骨架（结构先行，质量埋进地基）；三样式体系（变量色板、档位间距、弹性布局、断点服务内容）；四交互增强（能力检测、状态播报、事件委托）；五四维验收（规范、可访问、SEO、验证）。五步各自引用的章节知识，就是全册的目录——这份实战是期末考试，也是你以后的开工清单。
💡 关键直觉：从零构建时最有价值的习惯是"别跳步"。样式没定就写脚本、骨架没稳就调细节，返工成本都会翻倍——五步顺序的本质是让每一步建立在不晃的地基上，这与本册"概念筑基"的主调首尾呼应：自底向上，逐层搭建，每一层都稳。
与前几章的衔接自查
这一节内容量大，建议先动手把页面完整搭一遍，再回来看文字复盘，体感最好——顺序对了，每段复盘都对应你刚踩过的路。
合上书之前，用这份实战页做一次全册自查：看到 header 与 nav 能想起第 2 章的地标与判别问题吗；看到通配 box-sizing 与弹性布局能复述第 3 章的轴模型吗；看到 aria-live 与锚点导航能说出第 4 章的哪两条纪律吗；看到 defer 与 textContent 能定位到第 5 章的哪两节吗。每个"能"都是一块地基，每个"不能"都是回去复习的路标——这份页面本身，就是全册的索引。
本节要点回顾
- 五步流程：需求、骨架、样式、增强、验收——顺序即效率。
- 每个决策可复盘：卡片为何是列表、按钮为何是链接、问答为何用原生折叠——判别问题先于代码。
- 骨架阶段埋质量：语义、title、description 在第一行就写对，比最后补便宜十倍。
- 决策复盘是可迁移资产：本页的每个选择都对应一个判别问题，把这个习惯带走，下一个项目从第一行就写对。
- 轻量样式体系：变量色板加档位间距加弹性布局，小项目也不该裸奔。
- 脚本是增强不是依赖：能力检测、播报状态、委托事件，无脚本页面仍完整。
- 四维验收是回归项：清单变工具、工具进门禁，人只审机器管不了的部分。
- 扩展不需新概念：评论区、首图、图表各接对应章节的既有纪律，体系化知识的复利正在于此。
全册至此收官。回头看导读那张概念栈：语法层、结构层、表现层、质量层、工程层——你已经从标准与语义出发，逐层搭完了 HTML 的完整知识体系，剩余的路是写、验、复盘、再写的循环。接下来去写页面吧，判断力在你手上了。