方向键、翻页笔、空格或 Enter 翻页；Esc 返回本课目录。
34 学时 · 17 次课 · 课堂教学课件
Web前端技术
沿着“HTML 结构 → CSS 表现 → JavaScript 行为 → DOM 与事件”逐步学习，通过讲解、演示、练习和反馈逐步完成可运行的网页作品。
先看全局，再进入每一课
点击查看 Web 基础、HTML、CSS、JavaScript、DOM 与事件、工程质量和综合项目之间的关系。
COURSE STAGE
第一阶段 · HTML 与 Web 基础
理解 Web 工作方式，用 HTML 组织文本、表格、表单、图形和媒体。
第 01 课 · 2 学时
课程导入、Web 工作方式与开发环境
理解 Web 工作方式；使用 VS Code 完成班级个人主页，保存后用浏览器直接打开并根据结果修改；Git为选做
单元一：网页设计基础（2学时） 第 02 课 · 2 学时初识 HTML5：文本、图片、列表与链接
HTML5 文档骨架和常用标签；文字、段落和标题层级；图片、列表与链接
单元二：初识HTML5（2学时） 第 03 课 · 2 学时HTML5 表格与二维数据
table、caption、thead、tbody、tfoot；tr、th、td 与 scope；rowspan、colspan 的适用边界
单元三：HTML5中的表格（2学时） 第 04 课 · 2 学时HTML 表单、控件与基础样式
form、name、method 与数据字段；label 与控件的显式关联；input 类型、textarea、select、button
单元四：使用HTML创建表单（2学时） 第 05 课 · 2 学时Canvas：画布、基本图形、图像与文字
canvas 元素、尺寸与坐标系；getContext('2d')；矩形、路径、圆弧和填充
单元五：使用HTML5绘制图形（2学时） 第 06 课 · 2 学时HTML5 音视频与媒体事件
HTML5 多媒体与浏览器支持；audio、video、source 和 controls；媒体格式与备用说明
单元六：走进HTML5的多媒体世界（2学时）COURSE STAGE
第二阶段 · CSS 表现与视觉反馈
掌握样式、选择器、盒模型、变形、过渡和动画。
第 07 课 · 2 学时
CSS 引入、基础属性与页面风格
CSS 规则由选择器和声明块组成；外部、内部和行内样式的使用场景；颜色、背景、字体和文本属性
单元七：CSS3入门（2学时） 第 08 课 · 2 学时CSS 选择器、层叠、继承与优先级
元素、类、ID、属性和组合选择器；链接、结构和状态伪类；伪元素
单元八：CSS3中的选择器（2学时） 第 09 课 · 2 学时盒模型、尺寸计算与组件外观
content、padding、border、margin；content-box 与 border-box；宽高、min/max 尺寸和溢出
单元九：CSS盒子模型（2学时） 第 10 课 · 2 学时CSS3 变形、过渡与动画
translate、scale、rotate 等 transform；transition-property、duration、timing-function；@keyframes 与 animation
单元十：CSS3高级应用（2学时）COURSE STAGE
第三阶段 · JavaScript 语言基础
从脚本引入、数据与表达式进入流程控制和函数。
第 11 课 · 2 学时
JavaScript 概述、引入与调试
JavaScript 的起源、特点和浏览器中的作用；script 的内部与外部引入；执行顺序和 defer 基础
单元十一：JavaScript概述（2学时） 第 12 课 · 2 学时JavaScript 数据、类型、运算符与表达式
const、let 与标识符；数字、字符串、布尔、null、undefined；typeof 与显式类型转换
单元十二：JavaScript语言基础（第1次，2/4学时） 第 13 课 · 2 学时JavaScript 流程控制与函数
if/else 与 switch；for、while 和 for...of；break 与 continue
单元十二：JavaScript语言基础（第2次，4/4学时）COURSE STAGE
第四阶段 · DOM、表单与事件
让程序读取、修改页面并响应鼠标、键盘和表单操作。
第 14 课 · 2 学时
Window、Document 与 DOM 查询
window 是浏览器脚本的全局窗口对象；location、history、screen 和定时器概念；document 与 DOM 树
单元十三：JavaScript对象编程（第1次，2/4学时） 第 15 课 · 2 学时DOM 修改与 JavaScript 表单操作
value、checked、selectedOptions 等表单状态；createElement、append、remove；textContent 与 innerHTML 的安全差异
单元十三：JavaScript对象编程（第2次，4/4学时） 第 16 课 · 2 学时DOM 事件模型、鼠标与键盘事件
事件与事件处理器；addEventListener；event.target 与 currentTarget
单元十四：JavaScript中事件处理（第1次，2/4学时） 第 17 课 · 2 学时页面事件、表单事件与 Tab 菜单
DOMContentLoaded、load 与页面生命周期；submit、input、change、focus/blur；preventDefault
单元十四：JavaScript中事件处理（第2次，4/4学时）按课程阶段进入各课目录，回看知识要点、示例和课堂练习。
从页面结构、视觉样式进入脚本行为，最终完成 DOM 交互与综合应用。