HTML / CSS / JAVASCRIPT

前端开发

从页面结构到交互与接口，按知识体系快速入门。

32 个知识点，6 个部分。每节直接读知识、看代码、改例子。

无需编程基础。准备电脑、浏览器和文本编辑器；零基础按顺序读，已有基础可直接查阅。

32

前端知识体系 · 01–32

知识目录

课程目录公开，登录统一账号后阅读正文。
01

网页基础

浏览器、文件与前后端分工

  1. 01浏览器、文件与前后端认识网页的三种文件，以及浏览器和服务器各自负责什么。
02

HTML · 页面结构

把内容组织成有意义的网页

  1. 02HTML 文档与基本语法写出浏览器能正确理解的文档、标签、属性和资源引用。
  2. 03标题、正文与列表按内容关系组织文字，而不是靠字号和空格凑版面。
  3. 04链接、图片与路径连接页面和资源，正确描述图片，控制图片尺寸。
  4. 05语义结构与可访问性让页面结构、键盘操作和读屏体验与视觉界面一致。
  5. 06表单、控件与提交收集有名称的数据，并理解校验与 GET、POST 的职责。
  6. 07数据表格与音视频展示有行列关系的数据，并提供可控制的媒体内容。
03

CSS · 样式与布局

排版、布局与不同屏幕适配

  1. 08CSS 规则与选择器选择正确元素，并把可复用样式写成清楚的规则。
  2. 09层叠、优先级与继承解释样式为什么生效，并建立少覆盖、好修改的样式规则。
  3. 10盒模型与尺寸理解内容、内边距、边框和外边距，避免宽度计算失控。
  4. 11单位、文字与颜色用少量可复用的尺寸、字体和颜色建立清楚的界面。
  5. 12Flex：一行或一列的布局排列菜单、工具栏和卡片，理解轴线、换行与伸缩。
  6. 13Grid：行列布局用轨道、间距和区域排列商品列表与系统面板。
  7. 14定位、溢出与层叠给徽标、吸顶工具栏和滚动区域选择正确的定位方式。
  8. 15响应式与小屏布局从可读的小屏页面开始，让内容随可用空间调整。
  9. 16交互状态与适度动画清楚表现悬停、焦点、禁用和选中状态，让动画服务于操作。
04

JavaScript · 程序基础

数据、流程、函数与模块

  1. 17变量、类型与运算把输入转换成可靠的数据，再进行运算和比较。
  2. 18条件与循环让程序选择分支，并按清楚的边界重复处理数据。
  3. 19函数与作用域把明确的输入变成输出，用局部变量控制影响范围。
  4. 20数组、对象与 JSON用数据结构描述系统里的多条记录与每条记录的属性。
  5. 21模块与错误处理按职责拆文件，显式报告无法继续的情况。
05

浏览器 · 交互与接口

DOM、事件、状态、存储与网络

  1. 22DOM：读取与更新页面把 HTML 变成可查询的节点，用数据安全地更新界面。
  2. 23事件与表单让点击、输入和提交按统一的处理过程改变数据。
  3. 24状态与渲染用一份数据驱动界面，覆盖正常、空白、加载与失败。
  4. 25浏览器存储保存非敏感偏好，并明确数据的寿命、范围与失败情况。
  5. 26异步、等待与竞态等待操作完成，同时处理失败、超时与后来发起的请求。
  6. 27HTTP 与 fetch前端通过接口交换数据，检查状态与结构，服务端负责可信结果。
  7. 28安全与可访问性安全显示输入，让键盘与辅助技术也能完成操作。
06

调试与发布

检查问题、整理文件、发布网页

  1. 29调试：从现象找到原因用元素、控制台和网络面板核对真正执行的代码与数据。
  2. 30加载与性能先减少首屏工作，再用真实操作检验优化是否有效。
  3. 31项目文件、Git 与工具把网页保存为真实项目，知道工具各自解决什么问题。
  4. 32完成一个前端并发布串起表单、数据与界面，再核对线上路径、HTTPS 和系统边界。