在正式学习前端之前，看了一些关于此方面的简书文章，受益匪浅
这些都是宏观讲解
从宏观上，讲解了前端的知识。如作用、误区、学习方向、经验等等。www.jianshu.com/p/59decd1877c7
JavaScript 的导论与历史 www.jianshu.com/p/1397c469576d
基于NodeJS的前后端分离 http://www.jianshu.com/p/ea2a3efc680f
前端的基础、广度与深度 www.jianshu.com/p/3a263aac9f9b
淘宝前端工程师：国内WEB前端开发十日谈 www.jianshu.com/p/8cf2df3fdbf2
再说一下具体的讲解
系统学习前端之CSS网页布局方式--浮动流、定位流 www.jianshu.com/p/cd4fe64d3c6e
系统学习CSS之基础 http://www.jianshu.com/p/7d201bc01f24
自我总结
1.前端开发的大致顺序是 ：
1.确定用户需求~~
2..列一份详细设计清单、前期原型设计（Axure RP设计），给客户看，看看有无修改
3.前后端协商好数据接口，列一份详细清单（一般是后端完成）
4.设计好大致的主题风格（背景、布局等等）
5.分模块设计好具体的界面（从大到小，先布局、再具体细节）
6.用mock进行模拟测试，以及兼容性测试
7..前后端协同进行调试，有问题，则返回步骤3，再次按步骤来完成。
2.前端学习的知识
基础知识包括 HTML、CSS、JavaScript
深入学习 jQuery、bootstrap
更加深入则可以学习node.js react.js 等等
还需要了解一些后端知识如 PHP、SQL、Python 等等
3. 前端技术需要的工具
原型开发工具 Axure RP
图片工具 Photoshop
网站开发工具 Dreamweaver
网站调试工具 谷歌浏览器 就可以了
代码托管工具 GitHub
学习过程
1.首先，去图书馆借了几本前端方面的书籍，讲的比较具体，不过有很多错误点，和许多不需要的知识
2.看了Head First HTML+CSS 这本书，这本书讲的风趣幽默，实例性强，不过过于讲解重点而忽略了大量的知识点
3.不过以上的1和2可以相互补充，就这样将HTML和CSS大致学习完毕了。在此期间边学边做，渐渐的对这些语言熟悉了
4.又去图书馆借了5本 HTML5、CSS3 方面的书籍，学习了一些最新的技术，受益匪浅
5.去图书馆借了JavaScript、jQuery等方面的书籍，这个时候，也大致完成了我自己的前端设计，不过就是缺少交互性设计
6.借了一本书籍《web前端开发》，此书在前端方面讲解的非常全面,但是全而不细、不精
6.去w3cschool 下载了客户端，又学习了一下jQuery和bootstrap 方面的知识
至此，大致学习完毕了前端的知识。但是对于JavaScript方面的知识几乎只知道一点皮毛，ajax、json技术几乎不会用，更加基本的知识就只是一知半解。
而前端技术的核心就是交互性设计，也就是JavaScript、jQuery等等，看来以后要在此方面多下苦工了。
项目实践总结
刚刚开始项目的时候，总是东弄西弄，没有规划，没有设计，没有分块。搞得一头雾水，茫然无序，最后终于是摸索出来了一些经验。
1.一定要弄清楚项目需求，确定确定再确定，不然后面又要大改小改
2.一定要和后端先商量好数据接口，弄个详细清单，还要时不时的和后端进行沟通，沟通、沟通、沟通，不然后面改死你
3.确定好主题背景颜色、大致布局框架再具体写代码. 由大入小、由表及里、由浅入深
4.布局时，先用w3cschool的在线系统布局工具，先将大致的框架搭起来（使用bootstrap）。
之前布局一直使用标准布局和浮动流布局（可参考前面的 系统学习前端之CSS网页布局方式--浮动流、定位流www.jianshu.com/p/cd4fe64d3c6e），发现这样布局很麻烦，你要他2行，他偏偏1行，你要他1行，他偏偏2行，还有margin、padding真是要人命，要不断的进行调试，让人快要崩溃了；后来学习了CSS3里面的弹性盒布局，觉得好多了，但是弹性盒布局还是比较麻烦；最后学习了bootstrap框架后，才开始变得容易多了。将布局问题解决之后，一些细节也就不是那么麻烦了。
5.一定要学习好JavaScript，表单就是最好的实践方法，比如登录、注册界面，这样可以锻炼前后端数据传输，以及表单验证功能，需要写大量的JavaScript代码，不过有了jQuery、jQuery-UI、bootstrap就好多了，代码可以变得很简洁。
还有专门表单验证的工具插件、交互性插件等等。可以满足各种需求。具体插件可以看w3cschool的离线教程
6.完成网站的设计后，还要进行调试，兼容性测试是最让人烦的。特别是IE6，真是让人崩溃，我现在还是没有解决这个问题。
具体知识
HTML
他是网页的结构，具体的内容可以分为文字、图片、视频、链接、HTML5又新增了画布、更改了视频的标准等等方面
主要的标签有<p> 、<ul> <li> <table> <a> <img> <video> <q> <blockquote> <tr> <input> <button> <form>
大致的模式是 声明~~~头文件~~~内容~~~结尾
<!doctype html>
<html>
<head>
<title>.............................</title>
<mata charset="utf-8">
<meta ....................................................>
<meta .......................................................>
..................................................................
.................................................................
<link href="......................." type="text/css" rel="stylesheet">
......................................................................................................
<scrippt href="....................." type="text/javascript" rel="stylesheet">
......................................................................................................
</head>
<body>
<div class="select" id="sect" >
<p>..........................</p>
<p>............................</p>
.......................................
</div>
<div class="select" id="sect">
...............................................
</div>
..............
.............
..............
</body>
</html>
HTML5 ，又在此上面加了一些标签，如 header、nav、sidebar、footer、article、section等等，使其更加容易识别代码。此外，HTML5还新加了很多新的功能，甚至还取代了flash的位置，具体方面，就不多说了。
CSS
网页的样式，主要控制布局与颜色、大小、形状。CSS3还新增了许多以前没有的功能，使其更加容易布局，更加丰富多彩。更加美轮美奂。
基本布局采用<div>,虽然说这不能滥用，但是还是不可避免的滥用了。前面也有此方面的知识（系统学习CSS之基础http://www.jianshu.com/p/7d201bc01f24）
一些主要的属性有 margin、padding、font-family、color、background、border、decoration、width、height、border-radius、float、clear、display等等
属性方面
CSS3还使用了线性渐变background：linear-gradient（to bottom， #000000 0%,#fefefe 50%,#ffffff 100%);
亮度：filter 背景 ：background-color：hsla（1,0%，100%，0.8）依次是色相、饱和度、亮度、透明度
盒阴影：box-shadow
文字阴影：text-shadow
过度：transition
2D变形：transfer
表单增加的就多了，主要有pattern、required、autofocus、autocomplete、 email、number、URL、Tel。search、color、date、month、week、time、datetime、range、 readonly、disabled、size、maxlength、等等。
布局方面，网页布局方式定义：
网页的布局方式就是浏览器如何对网页中的元素进行排版
主要分三种；标准流、浮动流、定位流，CSS3加上了分栏布局、弹性盒布局，bootstrap则使用了框架布局
标准流：浏览器默认的排版方式
浮动流 ：一种“半脱离标准流”的排版方式
注意点：
浮动流中没有居中对齐
浮动流中不可以使用margin: 0 auto;的，这是无效的
浮动元素的脱标
定义：脱离标准流
当某一个元素浮动之后，这个元素看上去像似被从标准流中删除了一样
浮动元素脱标之后的影响
如果前面一个元素浮动了，而后面一个元素没有浮动，那么这时前面的一个元素就会覆盖后面的一个元素
浮动元素排序规则
相同方向上的浮动元素，先浮动的元素会显示在前面，后浮动的元素显示在后面
不同方向上的浮动元素，左浮动会找左浮动，右浮动会找右浮动
浮动元素浮动之后的位置，由浮动元素浮动之前在标准流中的位置确定
定位流排版
static,relative,absolute,fixed
默认定位
该关键字指定元素使用正常的布局行为，即元素在文档流中当前的布局位置。此时top, right, bottom, left和z-index属性无效。
相对定位position:relative
top,right,bottom,left
概念：相对于自己以前在标准流中的位置来移动
注意点：
不脱离标准流，会继续在标准流中占用一份空间
需要结合top/right/bottom/left属性来使用，但是一个方向上的定位属性只能使用一个
由于相对定位是不脱离标准流的，所以相对定位是区分块级元素，行内元素以及行内块级元素的
相对定位不脱离标准流，并且相对定位会占用标准流中的位置，所以当给相对定位的元素设置margin/padding等属性时会影响标准流的布局
相对定位应用场景
对元素进行微调
配合后面学习的绝对定位使用
相对定位弊端
相对定位不会脱离标准流，会继续在标准流中保留一份空间，所以不利于布局
绝对定位position:absolute
概念：相对于body来定位
注意点：
脱离标准流
绝对定位的元素不区分块级元素，行内元素以及行内块级元素
规律：
默认情况下，所有的绝对定位元素无论有没有祖先元素，都会以body作为参考
如果一个绝对定位的元素有祖先元素，并且祖先元素也是定位流，那么这个绝对定位的元素就会以定位流的那个祖先元素为参考点
只要是这个绝对定位元素的祖先都可以
指的定位流是指绝对定位/相对定位/固定定位
定位流中只有静态定位不行
如果一个绝对定位的元素有祖先元素，并且祖先元素也是定位流，而且有多个祖先元素都是定位流，那么这个绝对定位元素会以离它最近的元素作为参考点
绝对定位注意点
如果一个绝对定位是以body作为参考点，那么其实是以网页首屏的宽度和高度为作为参考点，而不是以整个网页的高度和宽度为参考点
一个绝对定位的元素会忽略祖先元素的padding
绝对定位弊端
默认情况下绝对定位的元素会以body作为参考点，所以会随着浏览器的宽度高度的变化而变化
相对定位与绝对定位结合使用
子绝父相：子元素用绝对定位，父元素用相对定位
绝对定位的元素水平居中
只需设置绝对定位元素的left：50%,然后再设置margin-left:- 元素宽度的一半;
固定定位position:fixed
top,right,bottom,left
概念：
固定定位可以让某个盒子不随着滚动条的滚动而滚动。
注意点：
固定定位的元素是脱离标准流的，不会占用标准流中的空间
固定定位和绝对定位一样不区分行内/块级/行内块级
静态定位
z-index属性
概念：默认情况下所有的元素都有一个z-index属性，取值为0；
作用：专门用于控制定位流元素的覆盖关系
1、默认情况下定位流的元素会覆盖标准流的元素
2、默认情况下定位流的元素后面编写的会覆盖前面编写的
3、如果定位流的元素设置了z-index属性，那么谁的z-index属性值大，谁就显示在上面
注意点
从父现象
如果两个元素的父元素都没有设置z-index属性，那么谁的z-index属性比较大谁就显示在上面
如果两个元素的父元素设置了z-index属性，那么子元素的z-index属性就会失效，也就是说谁的父元素的z-index属性比较大谁就会显示在上面
CSS3的弹性盒布局、分栏布局
分栏布局主要用于文章：column-count、column-width、column-gap、column-rule、
弹性盒布局：总div：display：flex； 子div;box-sizing:border-box;
要让其中一个或者几个子div弹性变化，只需要加flex：1即可
CSS3还有雨多其他的功能，我就不一一讲解了
JavaScript：是前端设计的核心，用户交互性设计，数据传输
此方面我没有学习好，主要学好jQuery和bootstrap就好了。
一些具体的行为、ajax、json技术很重要，要多多实践才行。
下面是我的离线书籍，以后要多多学习，再继续写笔记
