这门课解决什么工作场景
很多前端初学者在学完基础标签和样式后，写出来的页面在电脑浏览器里看着没问题，一拿到手机上就出现各种排版错乱、点击穿透或者控件失效。这门课针对的就是这种“从能写页面到能在真实移动端环境跑通”的断层。它不讲基础的段落排版，而是聚焦在 HTML5 新增特性以及 PC 与移动端的兼容差异。学完后，你能解决工作中常见的移动端表单交互、多媒体嵌入以及本地数据存储等具体场景问题，并且能在面试中被问到移动端适配时，给出基于真机调试经验的实际反馈，而不是背概念。
适合什么基础与建议先看哪几块
这套资料适合已经掌握基本 HTML 标签和 CSS 盒模型，能独立写出静态页面的上班族或转行者。如果你连块级元素和行内元素都还没分清，建议先补基础再看。对于符合基础要求的读者，建议直接从环境搭建和真机调试这一块看起。很多教程只教代码不教环境，但这门课里关于不同操作系统下如何连接 iOS 和安卓设备进行真机测试的内容，是日常开发中最实用的前置环节。看完调试环境，接着去学新增的 input 属性和移动端表单交互，这块能直接复用到实际项目的登录注册页开发中。
学完能独立做什么与资料怎么配合练习
学完这套资料，你能独立完成移动端常见表单组件的开发，包括调用不同类型的键盘、处理表单验证，以及实现音视频在页面中的原生嵌入。此外，通过本地存储的学习，你能独立做出类似 App 中“最近搜索记录”这种需要数据持久化的功能模块。在配合资料练习时，不要只用电脑浏览器看效果。必须按教程里的步骤，把数据线连上自己的手机，一边看视频一边在真机上测试新增属性的表现差异。每看完一个特性，就在本地建一个测试页，分别在不同系统的手机上点一遍，把兼容差异记录下来。这种基于真机的验证过程，比单纯跟着视频敲代码更能形成肌肉记忆。
在以后工作中可以直接真机测试以及面试过程中可以聊很多移动端兼容问题
课程目录
* 01 HTML5/
* 01 什么是HTML5.mp4 11:21
* 02 新增标签和标签兼容.mp4 14:16
* 03 新增input type属性值-pc端.mp4 14:52
* 02 环境搭建-真机调试/
* 01 【mac操作系统】真机调试.mp4 10:53
* 02 【windows操作系统】ios手机真机测试.mp4 09:18
* 03 【windows操作系统】安卓手机真机测试.mp4 08:10
* 03 HTML5/
* 01 新增input type属性值-移动端.mp4 13:45
* 02 新增常用属性-pc和移动调试.mp4 12:09
* 03 视频和音频.mp4 23:16
* 04 本地存储.mp4 18:30
* 05 【案例】-App最近搜索记录.mp4 15:46
* 04 CSS3/
* 01 reset和Normalize.mp4 07:39
* 02 CSS预处理器.mp4 13:50
* 03 less语法.mp4 11:43
* 04 sass语法.mp4 12:36
* 05 CSS3选择器和兼容.mp4 08:57
* 05 弹性盒布局/
* 01 flex-direction.mp4 11:10
* 02 flex-wrap.mp4 04:04
* 03 flex-flow.mp4 02:31
* 04 justify-content.mp4 04:48
* 05 align-items.mp4 03:47
* 06 flex-grow.mp4 04:44
* 07 flex-shrink.mp4 02:50
* 08 flex-basis.mp4 02:45
* 09 flex.mp4 06:15
* 06 自适应布局/
* 01 布局单位.mp4 12:48
* 02 自适应布局.mp4 15:36
* 03 字体图标的使用.mp4 11:51
* 04 网页规划和头部.mp4 15:37
* 05 底部布局.mp4 10:09
* 06 中间区块.mp4 18:30
* 07 作业.mp4 01:39
* 07 transform/
* 01 transform-2D.mp4 20:46
* 02 transform-3D.mp4 13:54
* 08 CSS3-动画/
* 01 animation-基础使用.mp4 23:39
* 02 animation-加载中动画.mp4 09:51
* 03 animation-球形加载中.mp4 04:57
* 04 animate动画库.mp4 18:42
* 05 transition.mp4 23:47
* 06 transition-翻转菜单.mp4 09:26
* 07 【面试题】无宽高如何居中.mp4 06:05
* 08 动起来的input.mp4 16:37
* 09 响应式布局/
* 01 响应式布局.mp4 22:55
* 02 响应式图片.mp4 15:06
* 03 改造一个响应式网站.mp4 37:36
* 04 项目响应式和自适应.mp4 15:27
* 10 移动端插件/
* 01 iScroll插件.mp4 14:02
* 02 移动端click - 300ms延迟.mp4 10:38
* 03 touch事件与穿透问题.mp4 13:09
* 04 zepto.mp4 10:21
* 05 懒加载以及原理.mp4 29:57
* 06 下拉刷新-上拉加载.mp4 19:07
* 11 小鹿线移动端项目/
* 01 项目目录结构搭建.mp4 21:08
* 02 【首页】底部布局.mp4 08:07
* 03 【首页】内容区块布局.mp4 21:52
* 04 【首页】数据渲染.mp4 19:11
* 05 懒加载问题修正.mp4 03:03
* 06 【在线课程】页面布局.mp4 20:17
* 07 【课程搜索】页面布局.mp4 31:22
* 08 对应展示不同数据.mp4 13:05
* 09 【搜索页】懒加载-触底加载.mp4 13:09
* 10 【搜索页】实现搜索功能.mp4 22:00
* 11 键盘收起问题和半透明遮罩.mp4 07:05
* 12 禁止长按的某些操作.mp4 06:55
* 13 作业.mp4 02:49
* 14 学习路线页面.mp4 18:45
* 15 关于我们.mp4 07:10
* 16 师资力量.mp4 20:07
* 17 【师资详情】路径传值问题.mp4 23:52
* 18 【学员页面】条件筛选.mp4 23:13
* 19 激活代码助手px自动转换rem.mp4 03:14
* 20 PC+移动端上线前准备.mp4 14:07
