前端须要用到的东西

介绍一些经常使用的网站之类的

● w3school 在线教程       http://www.w3school.com.cn/
● 菜鸟教程                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

扩展网站

● Linux公社                http://www.linuxidc.com/index.htm
● 千图网                   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
一、图像上颜色较少，而且主要以纯色或者平滑的渐变色进行填充。
二、具有较大亮度差别以及强烈对比的简单图像（如“马上购买”按钮中的背景和文字）。
何时应该使用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

 

但愿在前端开发这条路上越走越远，作一个牛逼的攻城狮