这是一套围绕 JavaScript 最常用网页应用场景 整理的静态学习包，适合上传到 GitHub 收藏，也适合开启 GitHub Pages 后在线浏览。
- 共 30 个 HTML 学习页面。
- 每个页面包含：场景说明、可运行演示、完整 JS 示例、知识点提醒、练习建议。
- 每个页面对应一个独立 JS 文件，便于后期单独复制、修改和扩展。
- 不依赖第三方库，全部使用原生 HTML / CSS / JavaScript。
- 代码包含中文注释，适合边看边改。
| 编号 | 页面 | 重点 |
|---|---|---|
| 01 | 基础语法：变量、类型、运算与模板字符串 | let / const, 数据类型, 模板字符串 |
| 02 | DOM 操作：选择元素、修改内容与样式 | querySelector, textContent, classList |
| 03 | 事件处理：点击、输入、键盘与事件委托 | click, input, keydown |
| 04 | 表单校验：必填、邮箱、手机号与错误提示 | 表单提交, preventDefault, 校验规则 |
| 05 | 数组渲染：列表、map、filter 与 reduce | 数组对象, map, filter |
| 06 | 对象与 JSON：配置、深拷贝、接口数据 | 对象读写, 解构赋值, JSON.stringify |
| 07 | 函数、作用域、闭包与回调 | 函数声明, 箭头函数, 参数默认值 |
| 08 | 条件判断与循环：状态驱动界面 | if / else, switch, for |
| 09 | 定时器：倒计时、轮询、节流与防抖 | setTimeout, setInterval, clearInterval |
| 10 | 异步请求：Promise、async/await 与请求状态 | Promise, async/await, try/catch |
| 11 | 本地存储：localStorage 与 sessionStorage | localStorage, sessionStorage, JSON序列化 |
| 12 | 模块化思维：拆分工具函数与页面逻辑 | 模块化思想, 职责拆分, 工具函数 |
| 13 | 错误处理与调试：console、try/catch、边界判断 | console.log, console.table, try/catch |
| 14 | 常见 UI：Tabs、Modal、Accordion | Tabs, Modal, Accordion |
| 15 | 轮播与图片画廊：索引、边界和自动播放 | 当前索引, 数组图片, 上一张下一张 |
| 16 | 搜索、筛选、排序与分页 | 搜索, 筛选, 排序 |
| 17 | CRUD 实战：Todo / 任务管理 | 新增, 删除, 修改状态 |
| 18 | 滚动效果：IntersectionObserver 滚动淡入 | IntersectionObserver, 滚动监听, 进入视口 |
| 19 | 响应式菜单：移动端导航与展开收起 | 移动端菜单, aria-expanded, class切换 |
| 20 | 安全与性能：XSS、innerHTML、批量渲染 | XSS意识, textContent, DocumentFragment |
| 21 | 拖拽排序：Drag & Drop API | dragstart, dragover, drop |
| 22 | 文件上传预览：图片、大小与类型校验 | File API, 文件类型, 文件大小 |
| 23 | URL 参数与 History：筛选状态可分享 | URLSearchParams, history.pushState, 读取参数 |
| 24 | 模板渲染与 data-* 属性 | template字符串, data-id, 事件委托 |
| 25 | 自定义事件与发布订阅：组件通信 | CustomEvent, dispatchEvent, addEventListener |
| 26 | 日期时间与 Intl：格式化、倒计时、时区意识 | Date, Intl.DateTimeFormat, 时间差 |
| 27 | 正则表达式与文本处理 | RegExp, test, match |
| 28 | Canvas 基础：绘制简单柱状图 | canvas, 绘图上下文, 坐标系 |
| 29 | Web Components：自定义元素入门 | customElements, HTMLElement, connectedCallback |
| 30 | 购物车 / 询盘计算器综合练习 | 综合项目, 购物车, 数量增减 |
- 先学习 01–08，打好 JS 基础、DOM、事件、表单、数组对象基础。
- 再学习 09–17，掌握定时器、异步、本地存储、UI 组件和 CRUD。
- 最后学习 18–30，补充真实项目常见能力：滚动效果、菜单、拖拽、文件预览、URL 状态、Canvas、Web Components 和购物车综合练习。
直接打开 index.html 即可浏览。
如果希望使用本地服务器，可以执行：
python -m http.server 8080然后访问浏览器中的本地地址。