[非专业前端快速入门套路]任务导向-快速完成前端开发

献给所有被拉去做HTML&CSS&JS的人

本文献给前端小白，用于快速入门，并非深入学习的文章
大神勿喷~
————————————————————————————————

事情是这样的

有一个项目，负责人 “听说“ 我有web相关经验，就把我拉去做前端。
事实上，我只是玩过一丢丢web安全。所以…………………我还是接了

开始干活吧！一开始确实一头雾水，但后来慢慢摸清了门路，写下这篇文章，记录下自己的经历，顺便方便“后人”。

1.首先要了解IDE

我用的是webstorm。

一开始尝试了sublime

个人觉得sublime最大的好处在于

1. 支持多种语言（C/Py/Js……）
2. 支持多种OS
3. 完全免费
4. 有很多很棒的插件
5. …

虽然他很好，但是

1. 配置麻烦
2. 缺少成型的连接Sublime和浏览器的控件，调试麻烦

毅然选择了webstorm。
具体使用方法可以百度，网上挺多的

这里附上的教程
http://blog.csdn.net/it_talk/article/details/52448597

关于webstorm你需要知道

1. 能写前端能写后台
2. 在chrome浏览器端有可供调试的插件
   可参考 http://blog.csdn.net/sujun10/article/details/54139560
3. 能调试JS
4. 先知道这点吧~

2.了解下HTML&CSS&JS的关系

没网上说的那么复杂，对于我们这种任务导向的人来说，你只需要知道这些

1. HTML写好之后保存为XXXX.html文件，右键选择用浏览器打开就能显示
2. CSS是给HTML做美化的，能设置排版、字体及一些动画效果
3. JS是干嘛的——前端写出来的网站要被用户访问，访问的过程其实就是用户找你要数据，然后服务器把这些数据发过去。但是有个问题，HTML语言写出来的东西本身是不会动的。但发过去之后你想改变他咋办？ JavaScript是可以操纵HTML和CSS的脚本语言，可以帮助我们根据用户的操作动态修改页面的内容，给用户更好的交互体验
4. 开发流程——一般先写好HTML，这就相当于盖房子的时候打了地基；之后用JS开发核心功能，相当于把大楼盖起来；最后用CSS对整体做美化，相当于给大楼刷漆做造型

3.得看的懂基本的语法

这个很重要，我踩了坑
我一开始就去找模板了，结果啥都看不懂，强行看，结果……
一开始就要看些基本的语法，这个适用于每一门新的语言。
对于HTML&CSS&JS，就从这看吧，最权威，讲的也很好
http://www.w3school.com.cn/

4.得会用些基本的模板

（1）整体网页的模板

上bootstrap或者是直接百度搜网站模板，下载下来的东西主要包括了HTML&CSS，可能还有些JS

这个时候你应该是能大致看的懂的，如果看不懂，可以百度查查

你会发现整体网站的模板一般是这样的

我这里是从dashboard.html起始的，你的可能是index.html或其他

我们来简单分析下一个HTML页面的架构。

我们在webstorm中新建一个HTML5文件，可以看到是这样的

可以发现，主要分为两大部分： 和

里面一般放要加载的CSS文件，和定义页面标题的代码
我的dashboard里面是这样的

部分一般就是页面的主体了，会有比较多的

（就是定义了额一块区域）

在最后，一般还会有蛮多

（2）酷炫的图表模板

echarts——百度开发的开源图表模板，可以把数据很生动的展示出来
到目前为止已经迭代了2个大版本
2.0 —— http://echarts.baidu.com/echarts2/doc/example.html
3.0 —— http://echarts.baidu.com/
使用方法：在上面找合适的模板，看人家示例代码，网上搜有没有人写该模板使用的博客，一点一点模仿。如果时间多的话也可以研究下echarts的文档，你会发现可以自主设置很多细节。

d3.js——老外开发的，在github上很火，主要是志愿者自己写好放上来给大家用。d3.js本身是一个web可视化的框架，有很多底层的函数，但我们用的话直接用人家写好的例子就好了。
https://github.com/d3/d3/wiki/Gallery
使用方法：如果发现不太容易直接套用的话，建议学一下基础知识。给个链接
http://d3.decembercafe.org/
注意：d3.js的本质就是对HTML的标签及其属性做操作，请务必记住这一点！你在调试的时候，可以在浏览器中（以chrome为例），右击页面选择“检查”，就可以看到d3生成的标签和属性。
d3中有一组非常重要的概念——append/select，具体的可以在网上找，我这里谈一下我的理解

• append
  就是向页面中添加标签，添加标签的时候可以设置属性

• select
  选择页面中的标签，可以修改其属性

我的工程中主要是用到了这两个~~

（3）CSS模板-比如好看的按钮，进度条

从这下载吧，良心站
http://www.htmleaf.com/
模仿，看人家调用了哪些CSS文件，拷贝到自己文件夹下，然后调整下路径，看人家调用了哪些class类，也调用，主要是模仿~~

（4）自己修改模板

如果你已经到这个阶段了，那么恭喜你！你已经入门了
我分享下我改模板的经验

非常重要的必须先提的
你要改模板对吧？是不是位置不好看？颜色不好看？这都是CSS的属性问题。这时你需要首先找到定义该属性的文件和对应的代码。不用一点点去找了！！webstorm已经帮你找好了

选择对应的class->右键并选择goto->declaration，如图

这样就会跳转到定义此class的位置，你就可以看到CSS代码啦

改位置
经常会发现下载了一个好看的button模板，但用的时候位置摆放总不对，这个时候我们就得自己去改。
首先需要了解CSS中的几个概念：

1. location
   location：http://www.w3school.com.cn/cssref/pr_class_position.asp
   其中需要注意：location分为absolute和relative两部分，建议你在里面的“亲自试一试”中体会下两种的区别
   Z-index：可以设置图层的显示层级的，可以用这个属性把一个元素覆盖到另一个元素上面
2. padding和margin
   padding http://www.w3school.com.cn/cssref/pr_padding.asp

margin http://www.w3school.com.cn/cssref/pr_margin.asp

注意：padding是内边距 ； margin是外边距

应该够用了。

打开chrome的“检查”，看一下要调整的div间关系（只是以div为例）
如果是两个同一级别的div之间的位置调整可以通过设置location属性实现
如果是不同级别的div（大div套小div），则可以通过设置padding和margin完成调整

改颜色
你想调整某个地方的颜色，但不知道调成什么颜色好？
看看这个，人家选好的网页常用的色彩
http://tool.chinaz.com/tools/use

想把某个地方换成特定颜色A，但不知道A的颜色代码是多少？
很简单
23333333先让我笑一会

用QQ——以下来自知乎网友“潘刚”

这里是来源 https://www.zhihu.com/question/20328538

QQ给出来的是RGB，用着不方便？
用这里转换下
http://www.sioe.cn/yingyong/yanse-rgb-16/

今天先这样吧，后面再更

                                                                            2017/4/26