传统html学习路线---2个月从小白变菜鸟

第一阶段——HTML的学习

HTML的中文全称为超文本标记语言，它是一个网页的骨架，无论是静态网页还是动态网页最终返回到浏览器端的都是HTML代码。浏览器将HTML代码解释渲染后呈现给用户，因此我们必须掌握HTML的基本结构和常用标记及属性。

HTML的学习实际就是一个记忆和理解的过程，在学习的过程中我们可以借助开发工具的“边看边练”视图来辅助学习，然后在“设计”视图中看效果，最后，在“代码”视图中学本质，将各种视图的优势发挥到极致。利用这种对照学习的方法可以在很大程度上弥补单纯识记HTML标签和属性的枯燥乏味。

知识点: Html标签和属性

1. 段落标签
2. 文字标签
3. 图片标签
4. 超链接标签
5. 列表标签
6. 表格标签
7. 表单标签
8. 框架标签
9. Canvas标签
10. 媒体标签

案例练习。。。。

第一阶段——CSS的学习

其实整个web前端的学习路线就像是盖楼房一样，以上HTML的学习只是掌握了原材料的制作，我们接下来还需要对楼房进行修缮与装修。这就涉及到CSS的学习了。

CSS的中文名称为层叠样式表，是能够真正做到网页表现与内容分离的一种样式设计语言，相对于传统的HTML表现而言其样式是可以复用的，这样就可以极大的提高我们的开发速度，降低我们的维护成本。另外，CSS中的盒子模式、相对布局、绝对布局等能够实现对网页中各对象的位置排版进行像素级的精确控制。

知识点:

1. CSS语法

2. CSS选择器
   ID选择器
   类选择器
   复合选择器

3. CSS样式
   背景
   文本
   字体
   链接
   列表
   表格

4. 盒子模型
   边框
   外边距
   内边距

5. CSS定位

   相对定位
   绝对定位
   浮动

6. CSS3新增属性

7. CSS3布局实例练习

第二阶段——JavaScript的学习

JavaScript是一种在客户端广泛使用的脚本语言，在JavaScript当中为我们提供了一些内置函数、对象和DOM操作，借助这些内容我们可以来实现一些客户端的特效、验证、交互等。是我们的页面看起来不再那么呆板。

知识点:

1. 基本语法

2. 变量

3. 数据类型

4. 函数

5. 运算符

6. 流程控制

7. JS对象
   String 对象
   Array对象
   Date对象
   Window对象
   Document对象

8. DOM操作

9. JS与CSS综合操作

第二阶段——jQuery的学习

jQuery是一个免费、开源的轻量级JavaScript库，并且兼容各种浏览器(jQuery2.0及后续版本放弃了对IE6/7/8浏览器的支持)，同时现在有很多基于jQuery的插件可供选择，这样我们在实现一些丰富的动态效果时更加的方便快捷，在一定程度上可以大大的节省我们的开发时间，提高我们的开发速度。

知识点:

1. 基础语法

2. 选择器
   基本选择器
   层次选择器
   过滤选择器
   表单选择器

3. DOM选择器
   查找节点
   创建节点
   插入节点
   删除节点
   复制节点
   替换节点
   包裹节点
   属性操作
   样式操作
   遍历节点

4. 事件
   事件绑定
   合成事件
   事件冒泡
   移除事件

5. 动画
   Show() hide()
   Fadeln() fadeout()
   slideUp() slideDown()
   自定义动画animate()
   动画回调函数
   停止动画

6. 表单,表格操作

7. 常用jQuery插件

8. jQuery UI

综合案例

第三阶段-H5+移动端开发（手机app，手机端网站）

mui最接近原生APP体验的高性能前端框架，追求性能体验，是我们开始启动MUI项目的首要目标，轻量必然是重要特征；

MUI不依赖任何第三方JS库，MUI以iOS平台UI为基础，补充部分Android平台特有的UI控件流畅体验

应用工具（HBuilder）
MUI框架学习（近原生APP体验的高性能前端框架）

1. UI组件
   *折叠面板accordion
   actionsheet（操作表）
   badge（数字角标）
   button（按钮）
   cardview（卡片视图）
   checkbox（复选框）
   dialog（对话框）
   图片轮播
   grid（栅格）
   icon(图标)
   ipnut (表单)
   list（列表）
   遮罩蒙版
   numbox(数字输入框)
   侧滑导航
   弹出菜单
   picker（选择器）
   progressbar（滚动条）
   transparentBar（透明标题栏）
   radio（单选框）
   range（滑块）
   scroll(区域滚动)
   slide（轮播组件）
   switch(开关)

2. 窗口管理
   页面初始化
   创建子页面
   打开新页面
   打开带原生导航栏的新页面
   关闭页面
   预加载

3. 极简的JS函数
   事件绑定
   事件取消
   事件触发
   手势事件
   自定义事件

4. mui框架Ajax

5. 5+Runtime（重要、app开发必备，调用各种原生功能，原生40万API随意调用）

6. Native.js（重要、app开发必备，不是js库）

第三阶段-BootStrap（手机app，手机端网站）

简洁、直观、强悍的前端开发框架，让web开发更迅速、简单。
自学网站

w3school http://www.w3school.com.cn
菜鸟教程 http://www.runoob.com/
Mui框架官网 http://dev.dcloud.net.cn/mui/
BootStrap框架 https://v3.bootcss.com/

以上仅代表个人观点，不喜勿喷------我学习的年代！