前端需要用到的东西
介绍一些常用的网站之类的
● 菜鸟教程 http://www.runoob.com/
● 脚本之家 http://www.jb51.net/
● 博客园 http://www.cnblogs.com/
● segmentfault技术论坛 https://segmentfault.com/
● CSDN博客 http://www.csdn.net/?ref=toolbar
● 慕课网 http://www.imooc.com/
● jQuery WeUI http://jqweui.com/
● Veda 原型 http://www.nowamagic.net/
● HTML5中文门户 http://html5cn.org/
● 前端网 http://www.qdfuns.com/
● 前端开发博客 http://caibaojian.com/
● cavin blog js http://www.j--d.com/
● HTML5验证器(可识别对错) http://html5.validator.nu
● 工具the HTML5 Live DOM Viewer验证：http://livedom.validator.nu
● 在线HTML5大纲分析器： http://gsnedders.html5.org/outliner
扩展网站
● 千图网 http://www.58pic.com
● 花瓣网 http://www.huaban.com
● Bootstrap中文站 http://www.bootcss.com
● Bootstrap英文站 http://www.getbootstrap.com
● Lufylegend游戏引擎 http://www.lufylegend.com
● Jquery在线手册 http://jquery.cuishifeng.cn
● 认识webGL http://www.jj51.com/
● 好例子网 http://www.haolizi.net/example/view_8913.html
浏览器：
Google Chrome 浏览器 占浏览器市场的22%、 IETester 测试工具
Mozilla Firefox 火狐浏览器、世界之窗、360浏览器、搜狗浏览器、猎豹浏览器、UC浏览器、百度浏览器、QQ浏览器、Opera浏览器
市面上有很多的浏览器，一些不太规范的浏览器在显示效果上面可能和其他的浏览器会有差异。针对这种情况，我们需要做到统一。也就是兼容。
我们开发一个网站的时候，大概是以下流程：
业务员/产品经理 ==> 跑业务
设计师 ==> 设计一个图片。
前端工程师 ==> 把设计稿做成一个静态的网页。
后台程序员 ==> 把静态的网页动态化。
PHP学习的大致基础内容： photoshop：切图布局和资源来源 html：网页结构 css：美化网页 javascript和jQuery：让网站动起来（特效：在百度中搜反转 旋转 闪烁 抖动 跳跃 黑洞可以出特效） php：让网站活起来（支付宝，登陆交流）
HTML5Web前端设计学习的大致基础内容： (1)photoshop：切图布局和资源来源 (2)html：网页结构 (3)css：美化网页 (4)响应式布局(PC端实战)、移动端实战、Bootstrap和sass (5)javascript和jQuery：让网站动起来（特效：在百度中搜反转 旋转 闪烁 抖动 跳跃 黑洞可以出特效） (6)H5游戏开发 核心技术：canvas + javascript (7)前段架构师：前段自动化工具 + 架构理念 + Angular 框架 (8)APP 开发 核心技术：Dcloud + 本地存储 + （HTML5+） 服务器开发
作为初学者，我比较喜欢用的编辑器是Sublime Text 3 和 HBuilder，下面介绍下一些实用的快捷键
Sublime Text 3 快捷键
● Ctrl+G：跳转到第几行
● Ctrl+Shift+V：粘贴并缩进
● Ctrl+D 选中光标所占的文本，继续操作则会选中下一个相同的文本
● Ctrl+J 合并选中的多行代码为一行
● Ctrl+L 选中整行，继续操作则继续选择下一行
● Ctrl+Shift+Enter 在上一行插入新行
● Ctrl+X：删除当前行
● Ctrl+Shift+F：查找并替换
● Ctrl+M 光标移动至括号内结束或开始的位置
● Ctrl+Shift+M：选中当前括号内容，重复可选着括号本身
● Ctrl+/：注释当前行
● Alt+F3：选择所有相同的词
● Alt+Shift+数字：分屏显示
● Ctrl+Shift+[ 选中代码，按下快捷键，折叠代码
● Ctrl+Shift+] 选中代码，按下快捷键，展开代码
● Ctrl+Alt+↓ 向下添加多行光标，可同时编辑多行
● Ctrl+Shift+↓ 将光标所在行和下一行代码互换
● Shift+Tab 向左缩进
● F6 单词检测拼写
HBuilder 快捷键：不同于Sublime，HBuilder自带插件很多，功能强大的同时却运行有点卡。
快捷键与sublime也有很多不同（特别是不要按Ctrl+Shift+V、这并不是粘贴缩进，一旦按了很容易卡死程序）。
● 折叠代码：'Ctrl+Alt+-'
● 合并下行：'Ctrl+Alt+j
● Ctrl+d 删除一行
因为刚开始学习，只是做一些简单的页面和知识点检验。相对于suSublime Text 3，HBuilder过卡，所以我比较喜欢Sublime Text，
HBuilder只用了十几次，很多快捷键还不知道，不过你们喜欢用这个的话可以百度一下的。
PS总结
网页常用的图片格式(目前最常用的是JPG和GIF):需要强调说明的是我们在web页面上所使用的图像都是位图
jpg/jpeg
一般情况下都会使用jpg的方式保存图片。jpg保存的图片会进行压缩。会产生少量色彩的丢失。共支持16000种颜色
gif
支持动态图片。也会对图片进行压缩。压缩比率比jpg更小。支持透明图片。共支持256种颜色
png
能最大限度地完整的保存图片。也支持透明图片,不支持动态图片。 需要切透明图时一般使用PNG
png-8 ：共支持256种颜色
png-24：共支持16000种颜色
实际应用
什么时候应该使用PNG
1、图像上颜色较少，并且主要以纯色或者平滑的渐变色进行填充。
2、具备较大亮度差异以及强烈对比的简单图像（如“立刻购买”按钮中的背景和文字）。
什么时候应该使用JPG
对于写实的摄影图像或是颜色层次非常丰富的图像采用JPG的图片格式保存一般能达到最佳的压缩效果。
根据经验我们在页面中使用的商品图片、采用人像或者实物素材制作的广告Banner等图像更适合采用JPG的图片格式保存。
由此可见在存储图像时采用JPG还是PNG主要依据图像上的色彩层次和颜色数量进行选择。一般层次丰富颜色较多的图像采用JPG存储，而颜色简单
对比强烈的则需要采用PNG。但也会有一些特殊情况，例如有些图像尽管色彩层次丰富，但由于图片尺寸较小，上面包含的颜色数量有限时，也可
以尝试用PNG进行存储。而有些矢量工具绘制的图像由于采用较多的滤镜特效也会形成丰富的色彩层次，这个时候就需要采用JPG进行存储了。
另外还有一个原则就是用于页面结构的基本视觉元素，如容器的背景、按钮、导航的背景等应该尽量用PNG格式进行存储，这样才能更好的保证
设计品质。而其他一些内容元素，如广告Banner、商品图片等对质量要求不是特别苛刻的，则可以用JPG去进行存储从而降低文件大小。
PS快捷键：
♠ 空格+鼠标左键 -> 拖动,临时使用抓手工具 ♠ ALT+鼠标滚轮 ->放大缩小
♠ ctrl+shift+alt+s -> 保存切图 ♠ ctrl+d ->取消选择
♠ F8 ->控制面板信息 ♠ shift+鼠标左键 ->保存切图时多选
♠ 双击切图 ->更改切图信息 ♠ 【F12】 ->把文件恢复到打开时的状态
♠ ALT+点击小眼睛 ->所选图层背景透明 ♠ alt+鼠标左键 ->隐藏所选图层的其他图层(重新操作一次恢复)
♠ ctrl+R -> 标尺 ♠ ctrl+h ->隐藏/显示选区
♠ 量长度 ->吸管工具里有个标尺工具
♠ ctrl+T ->自由变化(可以确定中心点位置)
♠ 【Shift + F7】或【Ctrl + Shift + I】- 选择→反选
♠ 【Ctrl】- 临时使用移动工具 ♠ 【Alt】 - 临时使用吸色工具
♠ 【Ctrl + R】- 显示/隐藏标尺 ♠ 【Ctrl + ;】- 显示/隐藏参考线
♠ 【Ctrl + "】- 显示/隐藏网格 ♠ 【Ctrl + 1】- 以 100% 显示图像
一般所需的切图：背景图，logo，广告图，小标签，艺术字，文字与图像相互指向
保存切图的要点：保存文件时使用一般使用“选中的切片”，若想一次性保存所有图片除了可以
选择所有图片保存外还可以直接使用“所有切片”，但选择这个时需要确保你
切的所有图都没有多余的，不然多出来的图会造成冗余（保存文件时会自动
创建一个images文件夹）
PS抠图
个人觉得作为前端切图必备技能之一，抠图还是要掌握的，下面给出一些如何抠图的网站作为学习。
抠图教程大全 http://www.68ps.com/zt/koutu/
PS学习网 http://www.ps-xxw.cn/shiyongjiqiao/1119.html
Photoshop抠图方法大全 http://www.3lian.com/edu/2014/07-24/157912.html
还有一种比较简单的方法，不过要安装美图秀秀才能用，而且网页版无抠图功能
http://jingyan.baidu.com/article/adc81513301eb9f722bf737b.html
希望在前端开发这条路上越走越远，做一个牛逼的攻城狮
