零基础如何快速入门前端[转]

对于很多新入门学习前端的朋友而言，可能不知该从何入门，很多人买了一些前端入门书籍，好像也看不太明白？看了好多前端视频教程似乎也是似懂非懂？如果你现在是初学前端，入门的话，可以看看下面内容……或者有一点帮助

学习前端，前端就好比如盖房子~html 就充当了房子结构这部分，也是房子的基础。css 呢，就好比咱们房子的装修，墙面什么颜色，什么风格，什么地板…这些给房子改变风格，样式的就是 css。javascript 呢，就好比这个房子的功能，房子需要制冷吧，需要暖气吧，也需要上下水吧。这些功能性的就相当于是 javascript。

例子可能不是很恰当，只是帮助大家有个初步的认识~

前端开发概况、代码入门
页面基本结构、文档声明、编码声明、css 语法、style 属性、link 和 style 标签、id 属性、基本样式、Border 、Background、 Font、盒模型、文本设置…

常用标签集合
header、article、aside、section、footer、nav、h1-h6、p、ul、ol、li、img、dl、dt、dd…绝对路径、相对路径、标签语义化、标签嵌套规范、SEO…

常用选择器&标签类型划分
d、class、类型选择、包含选择、群组选择、通配符、选择器优先级、标签样式初始化订制方案、超链接及伪类划分、标签类型划分及特性、inline、inline-block、block..

浮动进阶
浮动的作用、浮动的特性、文档流、浮动的各种问题、clear、BFC(块级格式化上下文)、触发 BFC 的条件、Haslayout、Haslayout 的触发条件…

定位
relative 相对定位、Absolute 绝对定位、Absolute 绝对定位、Fixed 固定定位、inherit 继承、static 静态定位、默认值、zIndex 层级问题、margin 负值、透明度…

表格和表单
表格标签、表格样式重置、单元格合并、表单元素、表单相关的属性操作、表单默认样式初始…

兼容性问题处理
兼容性问题总结、浮动在 IE6，7 下的各种问题、表单在低版本 IE 的问题、处理低版本 IE 对新增标签的支持、CssHack、条件注释语句、PNG 问题、透明度的问题、固定定位在 IE 低版本的处理方式…

整站进阶
样式规划、favicon、Css Sprite、Data URI、隐藏元素、测试工具使用、滑动门、等高布局、三列布局、未知宽高图片在容器内水平垂直居中、文本水平垂直居中、多行文本水平垂直居中…

css3 入门
transition、属性选择器、nth-of-type、nth-child、backgroundSize、box-sizing、圆角，盒模型阴影、文字阴影、rgba、表单高级、H5 表单新增属性、E:not(s)、E:target、E::selection、background-clip…

移动端布局
测试环境 Emulation、viewport、window.devicePixelRatio、物理分辨率、Media Queries、rem、window.screen、移动端布局相关问题、window.deviceorientationevent、横竖屏判断…

Animation 和 Transform
浏览器前缀、keyFrames、Animation 调用、播放次数设置、动画偶数次调用顺序、Animation 的问题、无缝滚动、动画播放|暂停、rotate 旋转、deg、skew 斜切、scale 缩放、translate 位移、transform-origin、transform 的执行顺序问题…

Bootstrap 前端开发框架
Html 语法规范、CSS 语法规范、Less 和 Sass 中的嵌套、class 命名、选择器、Normalize.css、栅格系统、排版、代码、响应式工具…

PC 端的企业网站布局（例：sony 官网）
PC 端的电商类网站布局（例：京东商城）
移动端常见页面布局（例：微信活动页/商城）

学习前端书籍自然不可少，这里给大家推荐《html 5 与 css 3 权威指南》，虽然主要是讲解 html5+css3，但倒也是一本好的入门书籍。该书比较系统，覆盖面也比较广。技术新颖，所有知识点都紧跟 html 5 与 css 3 的最新发展动态（html 5 和 css 3 仍在不断完善之中）；也有比较强的实战性（包含 246 个示例页面），不仅每个知识点都配有精心设计的小案例（便于动手实践），配合案例，也比较生动有趣。该书不仅能满足你全面而系统地学习理论知识的需求，还能满足你需要充分实践的需求。

第一阶段——HTML 标签的学习
超文本标记语言(HyperText Mark-up Language 简称 HTML)，“超文本”就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。
html 是一个网页的骨架，就好比是盖房子的结构~这也是前端页面的基础。试着想一下，如果一个房子连砖头和水泥都没有，后面的步骤又有什么意义呢？所以我们必须完全掌握 HTML 的基本结构和常见的标签，属性。有了一个好的开始，距离成功已经一小半啦~

关于 HTML 怎么记忆、学习？可能一上来死记硬背，也不会有太好的预期。而且还有可能被吓到？“我去！这么多标签！怎么记得玩？”

个人感觉有两点可以尝试：
1，语义化的去记忆。比如 ul li 这个就是列表，button 就是按钮，table 就是表格。其实这也是 html5 所倡导的，语义化标签。
2，试着写一个一个小的 demo，也许就只是一个列表，一个表格，或者一个按钮。也许写着写着你就懂了呢？

学习 HTML 就是要自己不断的去写，去尝试。看着自己的代码能跑起来，有了心目中的效果，这种心情还是很开心的！给大家推荐一个网站，w3cSchool，这里面有在线的代码编辑器。可以边写边看到效果~

ok~学习完成 html 后，我们来到第二阶段——css，去给我们的房子装修一番吧~

第二阶段——CSS 的学习

CSS，层叠样式表——（Cascading Style Sheets），是能够真正做到网页表现与内容分离的一种样式设计语言。相对于传统 HTML 的表现而言，CSS 能够对网页中的对象的位置排版进行像素级的精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力，并能够进行初步交互设计，是目前基于文本展示最优秀的表现设计语言。CSS 能够根据不同使用者的理解能力，简化或者优化写法，针对各类人群，有较强的易读性。

CSS 看似比较繁杂，其实只要掌握了 CSS 中的盒子模型、定位、以及页面布局，就基本上掌握了大半啦~这时我们就以及能够对网页中各个元素进行精准的排版，做出符合我们意愿的网页啦！

关于 CSS 的各种属性，我们还是可以参考学习 HTML 那样。可以说 CSS 的属性几乎完全是语义化的。我们需要改变边框，那就是“border”，那我们需要右侧边框做一些改变，那就是“border-right”。很明显，接下来按照我们的需求还有“右边框的宽度——border-right-with”，”右边框颜色——border-right-color”等等等，诸如此类~

完全就是我们需要什么，只要凭着需求去寻找。

说完装修，我们终于要给房子打造一些功能啦~follow me~

第三阶段——JavaScript

JavaScript 一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。它的解释器被称为 JavaScript 引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在 HTML（标准通用标记语言下的一个应用）网页上使用，用来给 HTML 网页增加动态功能。

简单来说，javascript 是一个可以运行在浏览器上面的语言（当然现在基于一些库/框架已经远不只是在浏览器上了），它可以操控浏览器，让浏览器听从我们的命令。这有点像一个电视剧和遥控器，而 javascript 就是我们的遥控器。浏览器根据 javascript 的指令，做出相应的反馈。比如操作 DOM（也可以理解成为操作 HTML），可以操作 CSS。有了 javascript 就可以让我更加灵活&动态的操控 HTML,CSS.

严格来说、HTML 和 CSS 还算不上真正的“语言”，而 javascript 却是如假包换的脚本型语言，既然是语言，那就会有字符串，数组，对象等等。而我们的 javascript 可以处理这些与数据有关的工作，比如给数组排个序，去个重等等。

而我们依靠 javascript 可以做些什么呢？网页上常见的轮播图，网站的注册功能，提交我们的留言，刷新获取新闻等等。当然，我们强大的 javascript 远不止此啦~以后再为大家深入介绍~

然而因为历史原因，比如我们灰常“尊敬”的 IE 浏览器~出了一套自己的 javascript 标准，没有和主流 javascript 标准兼容啊！！作为一个前端 er 是不是应该把更多精力用在有意义的地方呢，而不是解决兼容。。。

所以，似乎我们还需要一个利器，来让我们更快速的开发~没有错，这就是我们的——jQuery！

第四个阶段——jQuery

jQuery 是一个兼容多浏览器的 javascript 库，核心理念是 write less,do more(写得更少,做得更多)。jQuery 在 2006 年 1 月由美国人 John Resig 在纽约的 barcamp 发布，吸引了来自世界各地的众多 JavaScript 高手加入，由 Dave Methvin 率领团队进行开发。如今，jQuery 已经成为最流行的 javascript 库，在世界前 10000 个访问最多的网站中，有超过 55%在使用 jQuery。

如果继续用盖房子做例子，jQuery 更像是一个装修队。我们只需要关注我们的房子设计本身，把我的想法，理念告知这个装修队，让它来给我们处理那些杂七杂八的事情。比如会不会吵到邻居？怎么协调物业？干活总得有人手的，对吧…

jQuery 的优点我就不挨个说啦，一句话，jQuery 是你更上一层楼的利器，也是我们前端 er 一大利器！

Web 前端学习小建议

这里跟大家扯一扯学习前端的小方法，是我自己的学习方法，大家凑合看看，倒也不一定对~

在写 css 前，其实 html 的结构要是比较合理的，这样写 css 也会比较顺手。在写一个网页之前，建议先琢磨几分钟，不要上来就写。多去看看别人是怎么写的，然后结合自己的项目，心中有一个大致规划。可以先把最外层轮廓写好，先不着急去写某一个具体的部分。

这里给大家分享一些 css 小技巧：

1、使用 reset.css
火狐和 IE 这两种不同的浏览器，在绘制 CSS 样式方法上截然不同。这种情况下，使用 reset.css 重置所有的基本样式会让你得到一个全新的空样式表。（可以去网上找一下，很多的）

2、CSS 缩写
CSS 缩写简化了你的 CSS 代码，更重要的是，它让你的代码更加整洁易懂。
不是像这样创建 CSS

.header {
  background-color: #fff;
  background-image: url(image.gif);
  background-repeat: no-repeat;
  background-position: top left;
 
}

而是像这样创建 CSS

.header {
  background: #fff url(image.gif) no-repeat top left 
}

3、理解 class 和 id
这两个选择器总是让初学者感到迷惑。在 CSS 中，Class 和 ID 分别用点“.”和井号“#”来标识。简单来说 id 就是用来标识那些单独不重复的样式，而 class 是可以重复使用的。

4、实用的<li>
<li>也叫链接列表，在与<ol>或<ul>正确搭配的时候非常好用，尤其是用在导航菜单样式上。

5、少用<table>多用<div>
CSS 最大的优势之一是使用<div>达到样式上的灵活多变。不同于<table>，<div>里的内容不会 被锁在单元格<td>中。可以说几乎所有的表格布局都可以在<div>和样式的正确使用下完成。当然，有大量表格内容时，还是用 <table>吧。

6、CSS 调试工具
在设计 CSS 时，能够得到页面布局的预览对于优化 CSS 样式和纠错是很有帮助的。这里有一些免费的 CSS 调试工具推荐给你，你可以把它装在浏览器上：比如 FireFox Web Developer、DOM Inspector、Firebug 等

7、!Important
所有被!important 标记的样式，即使它后来被重写，浏览器也只会采用被标记的那条。

.page {
  background-color:blue !important;
  background-color:red;
}

比如上面的例子，因为 background-color:blue 被标记为!important ，即使后来有把背景改成红色的语句，也只采用被标记的那条。!important 用来强制使一个样式避免在之后的编码中被修改，遗憾的是 IE 不支持。

牢记以上小技巧，也许你的 css 技能突然就起飞了呢？关于 javascript 的一些小技巧，下次我再整理给大家~一次性看太多，大家是不是也有点晕？

学习前端需要方法，更需要一颗平常心，不要把前端想的多难，需要吃什么苦。。。既然学习这么痛苦，为什么不快乐一点学呢？anyway~希望大家可以成为一个优秀的前端 er！