每个知识点都有费曼式解释（打比方、说人话）与正式表述（规范定义），并配可运行案例：点击「▶ 运行案例」，左栏直接改代码、右栏即时看效果，控制台输出同步显示——先懂，再练，最后会。
82 个标签按 8 个功能族归位：文档骨架、文本层级、列表、链接与媒体、表格、表单、语义结构、字符实体。
89 个知识点按 9 个族归位：语法与引入、选择器、优先级与层叠、颜色单位变量、文本字体、盒模型、视觉效果、布局响应式、变换动画。
59 个知识点按 8 个族归位：语法基础、流程控制、函数、数组与对象、DOM 操作、浏览器与存储、异步与网络、调试与规范。
配《CSS 思维导图》九讲讲说稿的 17 张图：选择器权重、层叠、盒子模型四层、浮动与 BFC、定位与 z-index、Flex / Grid、变换动画。每图配一句可照念的画外音。
配《JS 思维导图》八讲的 17 张图：变量三兄弟、原始值 vs 引用值、三把循环钥匙、作用域链、闭包、this 的四个主人、原型链、事件循环、Promise 三态。
一组可逐步串联的案例：个人工作台作枢纽，挂接简历、图片展示等模块，共用一套设计系统，最终收敛为「响应式个人网站」结课实战。
《网站开发》40 课时配套课件：总览 + 六个模块独立 deck，含逐字稿与演讲者视图，供备课与课堂放映。
Web 与 Internet、工作原理与网页类型、HTML5 概述；搭建环境；第一个可打开的页面。
文档格式与标签属性；文字段落排版；图像、超链接与锚点链接。
结构标签与分组标签；页面交互标签；层次语义标签与全局属性。
样式规则与三种引入、优先级；基本选择器与复合选择器（交集／并集／后代）；链接伪类与表格样式。
盒子模型；浮动与清除；定位与 z-index；阴影渐变；过渡变形；字体图标。
表单与 input；其他表单元素；表单验证与正则表达式。
视频与音频嵌入、source 标签、媒体元素的 DOM 操作。
语言基础、函数、事件驱动、对象、BOM 与 DOM；商品精选与焦点图。
需求→结构→样式→响应式→发布答辩，交付可上线作品（含 980/680 断点）。
每节穿插自测题，两套期末模拟卷 + 智能组卷（易题加权、尽量让你过关）。