自学前端第一天:认识前端工程与网页

自我介绍

列夫一个来自广东的咸鱼

( 半角空格&ensp小， 全角空格&emsp大)

一.前端的基本含义:

前端即网站前台部分，运行在PC端，移动端等浏览器上展现给用户浏览的网页。随着互联网技术的发展，HTML5，CSS3，前端框架的应用，跨平台响应式网页设计能够适应各种屏幕分辨率，完美的动效设计，给用户带来极高的用户体验

二.网页&前端:

网页 是构成网站的基础单元，是承载各种网站应用的平台。通俗地说，您每天通过浏览器甚至部分APP上网冲浪所看到的就是网页，网页主要由文字、图像、超链接、文本、多媒体等元素构成。

前端开发是创建Web页面或app等前端界面呈现给用户的过程，通过HTML，CSS及javaScript以及衍生出来的各种技术、框架、解决方案，来实现互联网产品的用户界面交互。虽然现在前端技术栈百花齐放衍生出各种 工具 概念 技术 ;在工程化与现代化的路上高歌猛进,但本质上还是做网页。就跟我们能源技术发展到了核能阶段，依然只是为了“烧开水“。

三.自学前端目标：

基础课程：HTML CSS javaScript (ECMAScript DOM BOM) AJAX HTML5 CSS3 ECMAScript6/7/8

应用课程：jQuery easyUI H5UI Nodejs React VUE wApp 移动端开发 响应式开发 less/stylus artTemplate

工程课程：git&GitHub webpack yarn Babel typeScript 设计模式 基础算法 前端工程化 前端自动化 编程技巧

四.学习前端所需要用到的工具:

欲善其事必先利器，工具花样不在多，重点在人的技术本身。

最简化工具有 chrome浏览器、 vscode开发工具、pxCook量图器。后续随着课程推进，会慢慢介绍各种辅助工具，在这里就罗列，以免干扰新手小白。

1、浏览器工具

浏览器是网页的载体，是咱们前端工程师的主战场。浏览器常用的有 IE系列、火狐（FireFox）、谷歌（chrome）、Safari（苹果）、Opera等

---

2、开发工具

开发工具很多，用什么开发工具取决于你的个人喜好和业务所需平台。好的开发工具能够提升你的效率，但是无法提升你的技术实力。

3、协助工具

除了写代码的工具之外，我们还需要一些其他辅助类型的工具帮助我们更好的完成项目内容。比如 切图工具 量图工具 数据监测工具 代码管理工具等等, 当前我们只需要掌握PS和pxCook的使用。

五.前端全面技术构成

大体分为：状态管理、UI 组件、小程序、跨平台、框架层、编程语言、工程化、监控、测试和服务端。

六.开发工作环境与项目组组成

WEB开发是一个完整的体系，需要团队作业，明确分工。由各个岗位人员各司其职，共同开发和维护一个项目。

职业发展路线也广阔，你可以选择在一个业务领域深入耕耘，也可以选择全面提升技术栈深度和广度成为全栈工程师，先天条件比较好的可以深入架构研究 进行 算法 架构 AI 图形等领域拓展。也可以走技术管理路线，产品路线。记住一句话 技术只是敲门砖 想要有更多的收获必然要靠自己去打拼，坐吃山空不管什么行业都必然会被淘汰

七.学习方式方法

1 高效听课方法: 直播听课时除非特定需要不要跟着敲代码 记录笔记更重要 跟着思路走 把逻辑和思想认真听懂 课后对照视频和笔记进行练习

2 高效复习方法: 课后复习笔记 及时完成作业 遇到知识点模糊遗忘的部分 针对性看录播视频 每周休息时间进行笔记 案例回顾复盘

3 高效学习方法: 听=> 记 => 练习=> 思考 => 寻找漏洞 => 回溯视频 => 记录笔记(重点) => 练习 => 试图讲解

4 高效提问方式: 使用什么技术 实现什么效果的时候 遇到了问题xxx 问题表现为xxx 已排查xxx点 但是没有找到原因 配上相关代码和效果截图

八. 深入浏览器和浏览器内核:

任何上过网的用户对浏览器是再熟悉不过了。只是用户看到仅仅只是浏览器本身，却很少能看到浏览器最核心的部分—浏览器内核。

1、IE浏览器(Internet Explorer)：
IE是微软公司旗下浏览器，是目国内用户量最多的浏览器。IE诞生于1994年，当时微软为了对抗市场份额占据将近百分之九十的网景Netscape Navigator，于是在Windows中开发了自己的浏览器Internet Explorer，自此也引发了第一次浏览器大战。结果可想而知，微软大获全胜，网景不得不将自己卖给AOL公司。但实际上事情并没有结束，网景后来开发了风靡一时的Firefox火狐，至今Firefox也成为世界五大浏览器之一。
1996年，微软从Spyglass手里拿到Spyglass Mosaic的源代码和授权，开始开发自己的浏览器IE。后来，微软以IE和Windows捆绑的模式不断向市场扩展份额，使IE成为市场的绝对主流。现在装了Windows系统的电脑基本无法卸载IE。

2、Opera浏览器：
Opera是挪威Opera Software ASA公司旗下的浏览器。1995年，opera公司发布第一版Opera浏览器，使用自己研发的Presto内核。当时opera公司的开发团队不断完善Presto内核，使Opera浏览器一度成为顶级浏览器。直到2016年奇虎360和昆仑万维收购了Oprea浏览器，从此也丢弃了强大的Presto内核，改用当时Google开源的webkit内核。后来Opera浏览器跟随Google将浏览器内核改为Blink内核。自此Presto内核也淡出了互联网市场。

3、Safari浏览器：
第二次浏览器大战是从苹果公司发布Safari浏览器开始的。2003年，苹果公司在苹果手机上开发Safari浏览器，利用自己得天独厚的手机市场份额使Safari浏览器迅速成为世界主流浏览器。Safari是最早使用webkit内核的浏览器也是现在苹果默认的浏览器。

4、Firefox浏览器：
Firefox浏览器使Mozilla公司旗下浏览器，也是刚才提到的网景公司后来的浏览器。网景被收购后，网景人员创办了Mozilla基金会，这是一个非盈利组织，他们在2004年推出自己的浏览器Firefox。Firefox采用Gecko作为内核。Gecko是一个开源的项目，代码完全公开，因此受到很多人的青睐。Firefox的问世加快了第二次浏览器大战的开始。第二次浏览器大战与第一次二元鼎力的局面不同，这一次的特点就是百家争鸣，也自此打破了IE浏览器从98年网景被收购后独步浏览器市场的局面。

5、Chrome浏览器：
Chrome浏览器是google旗下的浏览器。Chrome浏览器至发布以来一直讲究简洁、快速、安全，所以Chrome浏览器到现在一直受人追捧。最开始Chrome采用webkit作为浏览器内核，直到2013年，google宣布不再使用苹果的webkit内核，开始使用webkit的分支内核Blink。

以上是五大浏览器的简介，接下来是四大内核。在介绍五大浏览器的同时也已经顺便介绍了四大内核。四大内核分别是：Trident（也称IE内核）、webkit、Blink、Gecko。五大浏览器采用的都是单内核，而随着浏览器的发展现在也出现了双内核。像360浏览器、QQ浏览器都是采用双内核。
作为前端开发，熟悉四大内核是非常有必要的。四大内核的解析不同使网页渲染效果更具多样化。下面总结一下各常用浏览器所使用的内核。
1、IE浏览器内核：Trident内核，也是俗称的IE内核；
2、Chrome浏览器内核：统称为Chromium内核或Chrome内核，以前是Webkit内核，现在是Blink内核；
3、Firefox浏览器内核：Gecko内核，俗称Firefox内核；
4、Safari浏览器内核：Webkit内核；
5、Opera浏览器内核：最初是自己的Presto内核，后来是Webkit，现在是Blink内核；
6、360浏览器、猎豹浏览器内核：IE+Chrome双内核；
7、搜狗、遨游、QQ浏览器内核：Trident（兼容模式）+Webkit（高速模式）；
8、百度浏览器、世界之窗内核：IE内核；
9、2345浏览器内核：以前是IE内核，现在也是IE+Chrome双内核；