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

从今天开始，本人就要学习WEB前端了。

经过老师的建议，说到他每天都会记录下来新的知识点，每天都是在围绕着这些问题来度过，很有必要每天抽出半个小时来写一个知识总结，及时对一天工作的一个小结，

也是对自己知识的一个梳理，之前特别喜欢记在本子上，不过长期的不用，就会发现记在本子上很容易就忘，所以后面开始写博客。首先，它并不单单是对自己的一些技术心得

的总结亦或是一些技术讨论，更重要的是对自己不断学习提高的一种要求和检验，一种技术沉淀。其次，通过技术博客我们可以彼此分享一些技术经验，让有类似问题的同学不

在迷茫。同时老师也建议我们这样做，我感觉这样非常好，因为我本身就是一只小小小小鸟————菜鸟，就是0基础，而课堂那短短的几个小时并不能教得了多少，所以更需

要自己多多查找资料和及时通过总结成笔记加深印象来使自己成长，但是笔记总结只写给自己看，总觉得实在达不到提高的目的。因为自己看不到自己需要提高的地方，只有不

断分享，让别人指点，甚至挨骂，才能了解不足。所以希望我以后能够坚持下来认真写博客，并且能得到大家的指点。

我的座右铭是：每天进步一点点，每天成长一点点。

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

● 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浏览器
市面上有很多的浏览器，一些不太规范的浏览器在显示效果上面可能和其他的浏览器会有差异。针对这种情况，我们需要做到统一。也就是兼容。

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只用了十几次，很多快捷键还不知道，不过你们喜欢用这个的话可以百度一下的。

转载于:https://juejin.im/post/5affed5bf265da0b9e6552d1