A00 HTML 入门

本阶段目标：独立写出结构正确、浏览器能正常显示的静态页面。

所属：frontend/html / A-入门 ｜ 上一篇：无 ｜ 下一篇：A01-认识网页与HTML ｜ 返回：科目 README

路线图

九篇文档按「认知 → 工具 → 结构 → 组件 → 收口」推进，前一篇的产出是后一篇的输入。

flowchart TD
    S1["A01 认识网页与 HTML"] --> S2["A02 搭建编写环境"]
    S2 --> S3["A03 写出第一个页面"]
    S3 --> S4["A04 文本：标题与段落"]
    S4 --> S5["A05 链接与图片"]
    S5 --> S6["A06 列表与表格"]
    S6 --> S7["A07 表单与输入控件"]
    S7 --> S8["A08 语义化页面骨架"]
    S8 --> S9["A09 实战：拼一张个人主页"]

    subgraph P1["认知与工具（A01 ~ A03）"]
        S1
        S2
        S3
    end

    subgraph P2["结构与组件（A04 ~ A08）"]
        S4
        S5
        S6
        S7
        S8
    end

    subgraph P3["收口（A09）"]
        S9
    end

图 1 阶段路线图：A01 ~ A03 建立认知与工具，A04 ~ A08 逐类掌握页面构件，A09 把前八篇拼成一个完整页面

能力对照

本阶段结束时应当具备的能力如下。自检不通过，回到对应篇目重做。

能力	对应篇目	自检方式
说明一份 HTML 文件在浏览器中的解析过程	A01	不看资料，画出「地址 → 画面」的流程，并指出 HTML 输入在哪一步
独立搭好编写与预览环境	A02	新建、编辑、保存、预览四个动作全部走通，改一个字刷新可见
从空白文件写出可运行的页面	A03	十分钟内从零写出一份含标题、段落、中文正常显示的页面
正确使用文本类标签区分层级	A04	给一段新闻稿排版，标题层级不跳级，段落合并不出歧义
配置可访问的链接与图片	A05	站内跳转、新窗口打开、图片替代文本三项都能说明用途
用列表与表格表达并列与二维数据	A06	把一份课程表排成表格并合并表头；把导航排成列表
写出可提交的表单	A07	输入框、单选、多选、提交按钮齐全，必填项留空时被浏览器拦下
用语义化标签组织页面骨架	A08	任意给一张网页截图，用不超过 8 个语义标签复述其结构
独立完成一个静态页面	A09	交付一个含导航、正文、图片、页脚的单文件页面，无布局错位

阅读顺序

按编号顺序读完整阶段约需 6 ~ 8 小时（含动手）。时间紧张时按「必读 → 选读」取舍。

顺序	篇目	建议时长	必读	说明
1	A01 认识网页与 HTML	40 分钟	是	唯一一次讲清浏览器如何解释 HTML
2	A02 搭建编写环境	30 分钟	是	环境不统一，后续问题难以排查
3	A03 写出第一个页面	40 分钟	是	第一次拿到完整可见成果
4	A04 文本与段落	40 分钟	是	页面内容的主体部分
5	A05 链接与图片	40 分钟	是	页面从「死」变「通」的关键
6	A06 列表与表格	40 分钟	是	结构化数据的两种载体
7	A07 表单与输入控件	60 分钟	是	从展示走向交互
8	A08 语义化页面骨架	40 分钟	是	决定页面是否易于维护与检索
9	A09 实战拼一张个人主页	90 分钟	是	阶段收口，产出可展示的作品

跳过建议

• 已有其他语言编程经验：A02 只做环境核对，直接进入 A03。
• 只做后台管理页面、不面向公众展示：A08 可后置，按需补。
• A01 与 A03 不建议跳过：两者决定后续排错的基本判断力。

阶段出口

• 返回：科目 README
• 术语速查：Z01 术语表
• 下一篇：A01-认识网页与HTML