天天成长一点---WEB前端学习入门笔记

WEB前端学习入门笔记

　　从今天开始，本人就要学习WEB前端了。
　　通过老师的建议，说到他天天都会记录下来新的知识点，天天都是在围绕着这些问题来度过，颇有必要天天抽出半个小时来写一个知识总结，及时对一天工做的一个小结，也是对本身知识的一个梳理，以前特别喜欢记在本子上，不过长期的不用，就会发现记在本子上很容易就忘，因此后面开始写博客。首先，它并不仅仅是对本身的一些技术心得的总结亦或是一些技术讨论，更重要的是对本身不断学习提升的一种要求和检验，一种技术沉淀。其次，经过技术博客咱们能够彼此分享一些技术经验，让有相似问题的同窗不在迷茫。同时老师也建议咱们这样作，我感受这样很是好，由于我自己就是一只小小小小鸟————菜鸟，就是0基础，而课堂那短短的几个小时并不能教得了多少，因此更须要本身多多查找资料和及时经过总结成笔记加深印象来使本身成长，可是笔记总结只写给本身看，总以为实在达不到提升的目的。由于本身看不到本身须要提升的地方，只有不断分享，让别人指点，甚至挨骂，才能了解不足。因此但愿我之后可以坚持下来认真写博客，而且能获得你们的指点。
　　个人座右铭是：天天进步一点点，天天成长一点点。

好了，下面开始进入正题，今天老师讲的内容很少，主要讲一些WEB前端工程师的就业前景和发展方向之类云云，后面才开始讲了一点点前端切图所需掌握的ps基础知识。
课堂教的很少，下面都是我本身查阅资料和上网所得并总结的。

介绍一些我找到的有用的学习网站：

● 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+d 删除所在行 = Shift+Backspace 删除所在行，这个也是跟sublime很大不一样啊
● ctrl+shift+→ 向右选词，按多一词可再选一词而且无视中间符号
● ctrl+shift+A 选择相同词
● ctrl+alt+↑ 选中当前标签全部内容，很是好用
● ctrl+【 选择成对内容
● shift+home 选择至行首
● shift+end 选择至行尾
● Ctrl+home：跳到第一行代码
● Ctrl+end：跳到最后一行代码
● alt+↑或↓ 跳到上一个或者下一个文本输入点，对于跳转引号输入内容颇有用
● ctrl+P 激活边看边改视图
● ctrl+M 编辑器最大化
● ctrl+shift+B 设置断点
● Ctrl+Backspace 删除前一词
● ctrl+shift+T 删除当前标签
● ctrl+alt+J 合并下一行
● ctrl+shift+F 整理代码格式
● ctrl+↓ 向下移动行
● ctrl+L 选中当前行
● shift+enter 在html中快速插入<br />
● ctrl+shift+- 首字母大写

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存储，而颜色简单对比强烈的则须要采用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

　　最后，引用学姐“闲云远岫”的一段文字以结束今天的博文笔记，后面但凡在网上看到哪些好的网站或者资源之类的，及时写下来到博客上与博友分享；课堂上有什么点滴体会，赶忙三言两语记在本子上，空余时间整理一下，发到博客上与博友交流；遇到什么困惑，也写到博客上，让博友们为我指点迷津；生活中的快乐，写到博客上，让博友们快乐着个人快乐；与同窗们之间的有趣故事，写到博客上，让博友们和我一同体验学习之乐.....
　　哦，对了。我很喜欢看些有关前端的书，我也有些电子书资源和网站，后面会分享出来，各位若是有什么好的网站或者资源，能够的话分享出来最好不过了。就把网址放在下面评论也行，还有就是，过高深的就不要发了，最好是比较适合我一个新手看的最好。英文版什么的就更不要了。