flowchart LR
N0["01 网页分工"]
N1["02 文档与表单"]
N2["03 布局与样式"]
N3["04 事件与数据"]
N4["05 Vue 入门"]
N5["06 React 入门"]
N0 --> N1 --> N2 --> N3 --> N4 --> N5
从网页基础开始
从浏览器与组件学到 Vue、React、路由、状态、渲染、安全和交付
0 子目录6 文档
CHAPTER OVERVIEW · 章节概览
先用 HTML、CSS 和 JavaScript 做出可交互页面，再认识 Vue 与 React 如何组织界面；两个框架可以先选一个学习。
本章学习路线
箭头表示建议的学习顺序；先理解问题，再逐步进入实现与实践。
按顺序学习
6HTML、CSS、JavaScript、Vue、React 到底是什么：先把关系讲清楚如果你心里有这样的问题——“已经有 HTML 和 CSS 了，为什么还需要 Vue 或 React？它们是不是另一种写网页的语言？”——这一章就从这里开始。先不安装任何东西，也不要求你认识“组件”“响应式”这些词。我们沿着一个收藏按钮，把网页怎样工作解释清楚。HTML 从文档结构到表单：亲手写出第一张网页这一章只解决一件事：你能自己建立一个 HTML 文件，知道每一部分的含义，并做出标题、文章列表、链接和搜索表单。先不用框架。看见完整的输入和输出，比先记十几个术语更重要。CSS 从选择器到响应式布局：让页面真正适合阅读上一章写出了有标题、段落和表单的网页。它已经可以使用，只是浏览器的默认排版未必适合你的内容。CSS 的任务，是把内容排成读者容易理解、在不同屏幕上都能操作的页面。本章继续用普通 HTML，不需要 Vue 或 React。JavaScript、事件、数据与 DOM：亲手做出文章搜索HTML 和 CSS 让页面有了内容和外观。现在加入一个要求：在搜索框里输入 vue，只显示相关笔记，旁边的数量也要随之变化。这需要读取输入、计算结果、更新页面。先用原生 JavaScript 做一遍，你才容易看懂 Vue 和 React 到底接手了哪些工作。Vue 从安装到第一个完整页面：把数据和界面接起来前面用原生 JavaScript 做搜索时，我们手动创建 li、替换列表、更新数量和空状态。现在仍做相同功能，换成 Vue。这样你能看见差别来自哪里，不用同时理解一个新业务和一个新框架。React 从安装到第一个完整页面：理解组件、JSX 和状态这一章继续做相同的文章搜索。你可以直接从本章开始，不必先学会 Vue；前提是能看懂 HTML、函数、数组和事件。如果函数或 filter 还陌生，先回到 JavaScript 基础课做一遍原生实现。