D00 HTML 实战

本阶段目标：把前三个阶段的能力合成三个可交付的页面类型——对外展示的作品集、面向检索的长文页、面向操作的录入页。

所属：frontend/html / D-实战 ｜ 上一篇：C05-HTML与工程化 ｜ 下一篇：D01-作品集站点 ｜ 返回：科目 README

路线图

三个实战项目按复杂度递进，每个都要求完整交付而非片段。

flowchart TD
    D1["D01 作品集站点<br/>多页面 + 导航 + 项目列表"] --> D2["D02 文章详情页<br/>长文结构 + 目录 + 结构化数据"]
    D2 --> D3["D03 后台表单页<br/>复杂表单 + 校验 + 数据列表"]
    D3 --> R["交付：目录 + 产物 + 验收记录"]

    subgraph P1["面向访客"]
        D1
        D2
    end

    subgraph P2["面向操作"]
        D3
    end

图 1 实战阶段路线图：D01 与 D02 面向访客阅读，D03 面向操作效率；三者共用同一套目录与命名规则

能力对照

能力	对应篇目	自检方式
组织多页面站点的目录与导航	D01	任意页面都能两步内到达其它页面，无死链
交付一个可展示的作品集	D01	首页、关于、项目列表三页齐全，缩略图有替代文本
组织长文页的阅读结构	D02	目录可跳转，标题层级不乱，图表有编号与图注
为长文页补齐机器可读信息	D02	源码可见 description、canonical、JSON-LD 三类信息
构建可用的录入表单	D03	六类控件齐全，错误提示可见可读，键盘可完成全部操作
记录并解释技术取舍	全部	每篇产出附「变更清单 + 决策记录」，能说明两个不选方案的理由

阅读顺序

顺序	篇目	建议时长	必读	产出
1	D01 作品集站点	100 分钟	是	三页静态站点 + 目录结构
2	D02 文章详情页	80 分钟	是	单篇长文页 + 元信息 + 目录
3	D03 后台表单页	90 分钟	是	录入页 + 列表页 + 校验

交付标准

• 三个项目共用一套目录：site/ 放页面，site/assets/ 放资源，site/assets/images/ 放图片。
• 每个项目都能在无构建、无网络的环境下打开。
• 每篇结尾的「变更清单」逐条对应实际改动，不写计划项。

阶段出口

• 返回：科目 README
• 术语速查：Z01 术语表
• 下一篇：D01-作品集站点