前端学习路径

1.WEB前端快速入门

在本阶段，我们需要掌握 HTML 与 CSS 基础，当然，也包含 H5 和 C3 的新特性。这
个部分内容非常简单，而且非常容易掌握。相信你也更愿意学习这个部分，毕竟他可以让你
最直观的感受到前端的魅力。为了锻炼大家写代码，可以根据你喜欢的站点去实现效果。
这一阶段是非常重要的基础阶段，所谓基础就是可能这个阶段我们的学习的内容，可以
让我们开发出来绚丽网站站点，但是功能丰富却暂时做不到。为了完成更绚丽的站点，我
们需要掌握常见特效的实现，利用 css3 和 h5 的新特性实现动画，布局，雪碧图，滑动门，
tab 切换等特效。并且掌握基础的站点优化内容。例如 sprite 等。虽然我们还不能完成更
多交互内容，但是我们会学习到很多的知识模型和理论，而这些知识模型和理论是我们后期
工作和学习的基石。扎实的基础有了，我们才能走的更稳更快。
注：本阶段不涉及到编程，主要是熟悉 HTML5 各种标签用法、CSS3 各种属性的用法。

2.JavaScript 基础与深入解析

JavaScript 语言非常重要，可以说学习前端本质就是学习“JavaScript”编程。后
面学的很多高级技术，全部都是基于JavaScript 的。
JavaScript 语言可以让网页元素具备动态
效果，让体验度更加流畅。这在目前流行
的 B/S 架构体系下，是极端重要的事情。这也是为什么前端工程师大行其道，被广泛需求的
根本原因。
在本阶段中，我们主要学习基础 JavaScript 语法与深入解析 JavaScript，包含 DOM 操
作同时也涵盖了面向对象和设计模式，课程也涵盖了兼容性处理和数据解析。希望大家在本
阶段可以熟练掌握这些知识点。

3.jQuery 应用与项目开发

jQuery 是一个快速、简洁的 JavaScript 框架，
jQuery 设计的宗旨是“write Less，Do More”，即倡
导写更少的代码，做更多的事情。它封装 JavaScript
常用的功能代码，提供一种简便的 JavaScript 设计模
式，优化 HTML 文档操作、事件处理、动画设计和 Ajax
交互。在本阶段，我们注重讲解如何更好的应用 jQuery 以及他的设计方式，同时也包含
jQuery 扩展内容。

4.PHP、数据库编程与设计

后端服务器工程师需要了解前端的基本知识，同样，前端工程师也必须了解服务器端编
程的基本内容。我们可以不精通，但必须知道整体的流程。
作为一名前端开发工程师，会一门后端语言是必然的。在我们的课程中，为您选择的是
PHP，因为 PHP 环境搭建简单，语言与 JavaScript 相似性比较大，并且容易上手，连接数据
库也非常方便。希望本阶段的内容能帮助你快速掌握前后端交互数据。
通过学习 PHP，前端工程师也能称为“全栈工程师”。既能做前端开发，也能做后端服
务器开发。

5. Http 服务于 Ajax 编程

Ajax 真的是一个非常古老的技术了，但是到现在为止，这门技术仍然被大量使用，可
以看出来，他是多么的优秀。在本阶段，我们将带你了解 Ajax，并且掌握它的应用。也包
含了解 Http 相关的知识。对于站点来说，除了页面效果能看到的就是数据了。所以，数据
的获取合理适配尤为重要。与 Ajax 相关的也包含跨域处理，希望大家可以掌握这些核心知
识点。

6. 做一个阶段项目

本阶段为纯项目实战，可以将前面学到的知识融会贯通，不实战就相当于没有学习；主
要练习网络请求、站点布局、网站优化等内容，同时我们需要对项目有一定的而了解。所
以，在老师的带领下，可以更快的了解项目如何搭建，如何更优雅的实现代码。老师会将整
个项目的开发流程完整的罗列出来。本阶段也锻炼 BootStrap 的应用，也包含一些常用的第
三方插件。在实战中展示具体应用。

7. H5 新特性与移动端开发

H5 新特性在现在来说已经不再是新内容了，项目中随处可见，毕竟移动端不会存在兼
容性问题，而且这些新特性在移动端的体现也是非常好的。例如定位，语义化等。利用 Canvas实现更多的效果等。

在移动端中，我们主要注重移动端布局和资源加载，布局方向，我们主要讲解百分比、
flex、REM、栅格系统来实现。资源加载采用（SPA）单页面加载，也是目前比较火的形式。
在页面跳转时可以非常节省资源。混合开发也同样是移动端的一大特点，在我们的课程中都
会详细讲解。

8. 高级框架

随着项目的需求越来越多。传统的开发方式已经不
能满足我们的需求了，所以我们需要更多的支持。在本
阶段中，我们讲解模块化，将程序分解为模块化开发。
我们需要 Nodejs 做支撑，无论是作为构建工具中的服务
器存在，还是为我们提供数据模拟测试，都是必不可少的。
随着 ES5 开发者体会在开发中的难言之隐，ES6 的到来解决了各种头痛的问题。也是我们必须要掌握的一个重点。还有更多，例如多人协同开发（git 或者 svn），利用 Less 和
Sass 完成更好的 CSS 的编写。
接下来我们介绍一下目前前端三大框架：
Angular：Angular 是一个开发平台，他能帮我们
轻松的构建 Web 应用，我们将在这部分课程中讲解
Angular 的声明式模板，依赖注入，端到端的工具和一
些最佳实践于一身。我们通过完整项目配合实例讲解课
程，以便于大家更容易去理解 Angular 的应用。

React：作为前端三大框架之一，React 拥有声明式和组
件化两大特点，React 可以轻松创建交互式用户界面。为应
用程序中的每个状态设计简单的视图，当数据更改时，React
将高效地更新和正确的渲染组件。声明式视图使您的代码更
具可预测性，更易于调试。创建好拥有各自 State(状态) 的
组件，再将其组合构成更加复杂的 UI 界面。由于组件逻辑是用 JavaScript 而不是模板编写
的，因此可以通过应用程序轻松传递丰富的数据，并将 State(状态) 保留在 DOM 之外。

VUE：在借鉴了 Angular 和 React 两
个优秀框架的基础上，Vue 无疑是非常受
欢迎的，它使用简单，强大的生态系统，
高效的运行速度也是我们在开发中的选
择之一。Vue 是一套用于构建用户界面的
渐进式框架。与其它大型框架不同的是，
Vue
的核心库只关注视图层，不仅易于上手，
还便于与第三方库或既有项目整合。另一
方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应
用提供驱动。在学习真个 Vue 的过程中，我们会通过两个企业级项目来讲解他的使用，以便
于大家更好的掌握使用 Vue 熟练开发。

9. 微信小程序

作为微信推出的一种新的项目展示形式，微信小程序必然是非常受到人们重视的，而且，
目前为止，大部分推广为主的公司都存在了微信小程序，也催生了一个岗位，微信小程序开
发工程师。可想而知，微信小程序是非常火的。

开发环境介绍

文本编辑器

Sublime text 3(最性感的编辑器)

启动速度快(C++)
插件众多(python)
下载sublime
安装版和绿色便携版的区别

安装板支持右键菜单, 但是不方便迁移
绿色便携版方便迁移, 但是不支持右键菜单
推荐绿色便携版, 右键菜单解决方案(在subline根目录下创建sublime_addright.inf将下图代码粘贴，保存后右键安装。)

[Version]
    Signature="$Windows NT$"[DefaultInstall]	AddReg=SublimeText3
    [SublimeText3]
    hkcr,"*\\shell\\SublimeText3",,,"用 SublimeText3 打开"
    hkcr,"*\\shell\\SublimeText3\\command",,,"""%1%\sublime_text.exe"" ""%%1"" %%*"
    hkcr,"Directory\shell\SublimeText3",,,"用 SublimeText3 打开"
    hkcr,"*\\shell\\SublimeText3","Icon",0x20000,"%1%\sublime_text.exe, 0"
    hkcr,"Directory\shell\SublimeText3\command",,,"""%1%\sublime_text.exe"" ""%%1"""

notpad++

IDE(集成开发环境)

IDE	介绍
WebStorm
HBuilder
Dreamweaver	不推荐使用，更适合前端设计人员

浏览器

谷歌和火狐都是非常优秀的浏览器，它们比其他浏览器优先之处在于：

(1)速度快，不是指打开的速度，而是指解析页面CSS、JS的速度

(2)支持更多新功能，比如最新的标准html5、css3的一下新特性

(3)插件化开发，Chrome和Firefox提供了应用商店，你可以安装自己喜欢的插件，定制自己的浏览器
　　所谓的浏览器内核也就是浏览器所采用的渲染引擎，渲染引擎决定了浏览器如何显示网页的内容以及页面的格式信息。不同的浏览器内核对网页编写语法的解释也有不同，因此同一网页在不同的内核的浏览器里的渲染（显示）效果也可能不同，这也是网页编写者需要在不同内核的浏览器中测试网页显示效果的原因

Trident内核代表产品InternetExplorer，又称其为IE内核。Trident（又称为MSHTML），是微软开发的一种排版引擎。使用Trident渲染引擎的浏览器包括：IE、傲游、世界之窗浏览器、Avant、腾讯TT、Netscape 8、NetCaptor、Sleipnir、GOSURF、GreenBrowser和KKman等
Gecko内核代表作品Mozilla FirefoxGecko是一套开放源代码的、以C++编写的网页排版引擎。Gecko是最流行的排版引擎之一，仅次于Trident。使用它的最著名浏览器有Firefox、Netscape6至9。
WebKit内核代表作品Safari、Chromewebkit 是一个开源项目，包含了来自KDE项目和苹果公司的一些组件，主要用于Mac OS系统，它的特点在于源码结构清晰、渲染速度极快。缺点是对网页代码的兼容性不高，导致一些编写不标准的网页无法正常显示。主要代表作品有Safari和Google的浏览器Chrome。
Presto内核代表作品OperaPresto是由Opera Software开发的浏览器排版引擎，供Opera 7.0及以上使用。它取代了旧版Opera 4至6版本使用的Elektra排版引擎，包括加入动态功能，例如网页或其部分可随着DOM及Script语法的事件而重新排版。

调试工具

HTML文档结构

<!DOCTYPE html>                 //文档类型声明
 <html lang="en">               //表示html开始
 <head>
     <meta charset="UTF-8" />   //声明字符编码
     <title>Document</title>    //设置文档标题
 </head>                        //包含文档元数据结束
 <body>                         //表示 HTML 文档内容
     
 </body>
 </html>                        //表示 HTML 文档结束

表格

表单

表单（Form）在网页中用来给访问者填写信息，从而获得用户信息，使网页具有交互功能。一般将表单设计在一个HTML文档中，当用户填写完信息做提交操作后，表单的内容就从客户端的浏览器传送至服务器上，经过服务器上的ASP.NET或PHP等处理程序后，再将用户所需信息传送回客户端的浏览器上，这样网页就具有了交互性。

几乎所有的商业网站都离不开表单。利用表单处理程序可以收集、分析用户的反馈意见，做出科学、合理的决策。有了表单，网站不仅使“信息提供者”，同时也是“信息收集者”。表单通常用作调查表、注册登录界面、搜索界面等。

表单使用的标记是成对出现的，在开始标记和介绍标记之间的部分就是一个表单。

表单元素总汇

在 HTML5 的表单中，提供了各种可供用户输入的表单控件。

元素名称	说明
form	表示 HTML 表单
input	表示用来收集用户输入数据的控件
textarea	表示可以输入多行文本的控件
select	表示用来提供一组固定的选项
option	表示提供提供一个选项
optgroup	表示一组相关的 option 元素
button	表示可用来提交或重置的表单按钮（或一般按钮）
datalist	定义一组提供给用户的建议值
fieldset	表示一组表单元素
legend	表示 fieldset 元素的说明性标签
label	表示表单元素的说明标签
output	表示计算结果

基本语法：

<form action="" name="" method=""></form>

添加按钮

<button type="submit"></button>

解释：元素添加一个按钮，type 属性有如下几个值：

值名称	说明
submit	表示按钮的作用是提交表单，默认
reset	表示按钮的作用是重置表单
button	表示按钮为一般性按钮，没有任何作用

//提交表单

<button type="submit">提交</button>

//重置表单

<button type="reset">重置</button>

//普通按钮

<button type="button">按钮</button>

<input name="user">

解释：元素默认情况会出现一个单行文本框，有五个属性。

属性名称	说明
autofocus	让光标聚焦在某个 input 元素上，让用户直接输入
disabled	禁用 input 元素
autocomplete	单独设置 input 元素的自动完成功能
form	让表单外的元素和指定的表单挂钩提交
type	input 元素的类型，内容较多，将在下节课展开讲解
name	定义 input 元素的名称，以便接收到相应的值

type

input 元素可以用来生成一个供用户输入数据的简单文本框。在默认的情况下，什么样的数据均可以输入。而通过不同的属性值，可以限制输入的内容。

属性名称	说明
text	一个单行文本框，默认行为
password	隐藏字符的密码框
search	搜索框，在某些浏览器键入内容会出现叉标记取消
submit、reset、button	生成一个提交按钮、重置按钮、普通按钮
number、range	只能输入数值的框；只能输入在一个数值范围的框
checkbox、radio	复选框，用户勾选框；单选框，只能在几个中选一个
image、color	生成一个图片按钮，颜色代码按钮
email、tel、url	生成一个检测电子邮件、号码、网址的文本框
date、month、time、week、datetime、datetime-local	获取日期和时间
hidden	生成一个隐藏控件
file	生成一个上传控件

type值为text时

//设置文本框长度

<input type="text" size="50">

//设置文本框输入字符长度

<input type="text" maxlength="10">

//设置文本框的初始值

<input type="text" value="初始值">

//设置文本框输入提示

<input type="text" placeholder="请输入内容">

//设置文本提供的建议值

<input list="footlist">
<datalist id="footlist">
    <option value="苹果">苹果</option>
    <option value="桔子">桔子</option>
    <option value="香蕉" label="香蕉">
    <option value="梨子">
</datalist>

//设置文本框内容为只读，可以提交数据

<input type="text" readonly>

//设置文本框内容不可用，不可以提交数据

<input type="text" disabled>

type 为password值时

<input type="password">

解释：当 type 值为 password 时，一般用于密码框的输入，所有的字符都会显示星号。密码框也有一些额外属性。

type 为search时

<input type="search">

解释：和文本框一致，在除 Firefox 浏览器的其他现代浏览器，会显示一个叉来取消搜索内容。额外属性也和 text 一致。

生成下拉列表

<select name="fruit">
　　<option value="1">苹果</option>

　　<option value="2">橘子</option>

　<option value="3">香蕉</option>
</select>

解释：下拉列表元素至少包含一个子元素，才能形成有效的选项列表。元素包含两个子元素项目元素和分组元素，还包含了一些额外属性。

多行文本框

<textarea name="content">请留下您的建议！ </textarea>

//设置行高和列宽，设置插入换行符

<textarea name="content" rows="20" cols="30" wrap="hard"></textarea>

输入验证

HTML5 对表单提供了输入验证检查方式，但这种验证还是比较简陋的，并且不同的浏览器支持的成熟度还不同。在大部分情况下，可能还是要借助 jQuery 等前端库来实现丰富的验证功能和显示效果。

//必须填写一个值

<input type="text" required>

//限定在某一个范围内

<input type="number" min="10" max="100">

//使用正则表达式

<input type="text" placeholder="请输入区号+座机" required pattern="^[\d]{2,4}\-[\d]{6,8}$">

//禁止表单验证

<form action="http://li.cc" novalidate>

CSS

三种方式

元素内嵌样式

<p style="color:red;font-size:50px;">这是一段文本</p>

文档内嵌样式

<style type="text/css"> 
p { 　　color: blue; font-size: 40px;
}

外部引用样式

<link rel="stylesheet" type="text/css" href="style.css">

//style.css

@charset "utf-8";
p { 　　color: green; 　　font-size: 30px;
}

解释：很多时候，大量的 HTML 页面使用了同一个组 CSS。那么就可以将这些 CSS 样式保存在一个单独的.css 文件中，然后通过元素去引入它即可。@charset “utf-8” 表明设置 CSS 的字符编码，如果不写默认就是 utf-8。如果有多个.css 文件，可以使用 @import 导入方式引入.css 文件。只不过，性能不如多个链接。

层叠和继承

所谓的样式表层叠：指的是同一个元素通过不同方式设置样式表产生的样式重叠。样式表继承：指的是某一个被嵌套的元素得到它父元素样式。还有一种样式叫浏览器样式，是这个元素在这个浏览器运行时默认附加的样式。
1.浏览器样式

<b>这个元素隐含加粗样式</b>

<span style="font-weight:bold;">这个元素通过 style 加粗</span>

解释：b元素就是具有加粗的隐含样式，而span元素没有任何隐含样式，通过 style 属性设置样式。

2.样式表层叠

样式表层叠通过五种方式进行，如果样式相同，那么比如会产生冲突替换。这时，它的优先级顺序就显的比较重要。以下优先级从低到高：

浏览器样式（元素自身携带的样式）；
外部引入样式（使用引入的样式）；
文档内嵌样式（使用

//元素内嵌

<p style="color:red;font-size:30px;">我将被三种方式叠加样式</p>

//文档内嵌

<style type="text/css">

p { 　　color:blue; font-weight: bold;
}
</style>

//外部引入

@charset "utf-8";
p { 　　
    color: green; 　　
    font-style: italic;
  }

如果某一个样式被优先级高的给替换掉了，却又想执行这个样式方案，可以将这个方案标记成重要样式（important）。
//强行设置最高优先级

color: green !important;

3.样式继承

如果某一个元素并没有设置父元素相关的样式，那么就会使用继承机制将父元素的样式集成下来。

<p style="color:red;">这是<b>HTML5</b></p>  //<b>元素继承了<p>元素的样式

样式继承只适用于元素的外观（文字、颜色、字体等），而元素在页面上的布局样式则不会被继承。如果继承这种样式，就必须使用强制继承：inherit。

//强制继承布局样式

<p>这是<b>HTML5</b></p>

<style type="text/css">

p { 　　border: 1px solid red;
} 
b { 　　border : inherit;
}
</style>

CSS盒模型

所有页面中的元素都可以看成是一个盒子，占据着一定的页面空间。一般来说这些被站酷的空间往往都是比单纯的内容要大。换句话说，可以通过调整盒子的边距和距离等参数，来调节盒子的位置。

一个盒子模型由content（内容）、border（边框）、padding（内边距）和margin（外边距）这四个部分组成。如下图所示。

相对路径绝对路径

在学习CSS中，我们容易遇到一个极容易忽略的问题。
我们一般会创建如图所示的文件类型：

在css中我们会定义这样一个选择器

  .style{
             background:url(/images/1.jpg);
             }

但调试时，会出现图片无法显示。这是因为相对路径错误。

首先，我们先了解什么是相对路径与绝对路径。
绝对路径是指目录下的绝对位置，直接到达目标位置，通常是从盘符开始的路径。形如C:\windows\system32\cmd.exe
相对路径则是相对当前文件位置而言。例如上图css文件中，存在一个style.css的文件，那么当我们需要调用图片时，
是以style.css文件所处位置为起点，或者向下访问子文件，如/file1/file2；
或者向上往其根文件访问，如…/images/1.jpg。
在上面问题中，由于我们在index.html中调用style.css文件，习惯性思维会导致我们认为style.css与index.css在同一目录。
解决方案应为：

style{
     backgound:url(../images/1.jpg);
     }

web前端开发入门