【入门教程】HTML5独立开发书城Web App - 带源码课件

如果你已经能写单个页面，却一提到"做一个能点、能翻、能返回的完整应用"就卡壳，这门课针对的正是这个缺口。它不讲泛泛的 HTML 标签百科，而是拿一个书城 Web App 当靶子，把页面结构、样式、交互和一点点服务端串成一条线。学之前先问自己：我能不能独立拆解一个移动端页面？能不能让顶部栏、内容区、底部操作栏在同一屏内各就各位、互不挤压？如果答案是"能写但要想很久"，那说明缺的不是语法，是工程拆解的套路。

先确认你缺的是哪一块

书城类应用看着简单，实际上把前端几个常见难点都踩了一遍。书架的列表与网格切换、书籍详情的图文混排、阅读器的翻页与沉浸式布局、仿原生底部弹出面板的层级控制——这些都不是靠记住某个属性就能解决的。很多人卡在两步：一是拿到设计稿不知道从哪一层 DOM 切进去，二是样式写完后端一接、数据一换就崩。这门课的价值在于，它把"怎么想"和"怎么写"放在同一个项目里推进，而不是先讲三小时理论再让你自己悟。

另外要提醒的是，阅读器里那种"仿 native 下边栏操作面板"是很典型的移动端交互模式：面板从底部滑出、遮罩层盖住正文、点击遮罩收起。它的结构开发和主体结构开发是分开推进的，这意味着你需要理解层级和定位的关系，而不是把所有东西堆在一个 div 里。如果你之前写过弹窗但总是层叠错乱，这部分正好补课。

配套源码该怎么用

资料包里带了完整源码，但源码不是拿来"抄一遍就完事"的。比较有效的用法是：先跟着做一遍页面结构，做完之后把源码关掉，自己从一个空白文件开始复原主体结构，卡住的地方再回去对照。阅读器这类交互密集的页面尤其如此，抄的时候顺风顺水，自己写的时候才发现底部栏和内容区的滚动关系、以及面板弹出时 body 该不该锁滚动，全是没注意过的细节。

• 第一遍：跟着走，重点看页面是怎么被分解成几块的。
• 第二遍：遮住源码，只留设计目标，自己把结构搭出来。
• 第三遍：改动数据或布局，看样式会不会塌，练的是健壮性。

看完应该能回答的问题

检验是否真的学到，不看视频进度，看这几个问题你能不能答上来：一个书城 App 的首页，从视口划分到 DOM 分层，你打算怎么切？底部操作面板弹出时，遮罩和面板分别用什么定位、谁的层级在上？书架的列表和网格两种排布，是换 DOM 还是换样式类更合适？服务端那一层在这个项目里到底承担了什么、前端需要约定哪些数据结构？这些问题如果张口就能说思路，说明你已经从"会写页面"跨到了"会做应用"。

适合谁，不适合谁

适合已经掌握 HTML 和 CSS 基础、能看懂简单 JavaScript、但缺少完整项目经验的人，也适合转岗前端、想拿一个能说清楚的项目补简历空白的同学。不太适合完全零基础、连选择器和盒模型都没弄明白的人，那样会在阅读器的定位和交互部分反复受挫，建议先把基础布局练熟再回来。课程定位是入门，所以别指望它覆盖性能优化、工程化构建这些进阶内容，它的任务是把"一个 App 从结构到交互怎么落地"讲清楚。

学完之后的合理状态是：你手里有一个自己能讲明白来龙去脉的项目，知道每一块为什么这么写，也知道哪里写得还不够好、下一步该补什么。这就够了。