01-初识前端

前端简介

能够直接跟用户打交道的交互界面都可以称之为前端, 前端技术一般分为前端设计和前端开发

前端设计就是ui设计部分,界面模板,一般可以理解为网站的视觉设计.

前端开发则是网站的前台代码实现, 利用前端设计模块创建Web页面或app等前端界面呈现给用户的过程，通过HTML，CSS及JavaScript/ajax以及衍生出来的各种技术、框架、解决方案，比如现在最新HTML5,CSS3以及SVG等,来实现互联网产品的用户界面交互.

百度指数和百度百聘

俗话说知己知彼百战不殆，要成为一名前端大神，首先知道它是做什么的。

单纯从工作角度看，无非就是写写前端样式，连接下后台 api，解析解析数据，然后显示给用户，核心逻辑是这样没错.

只是这中间掺杂着无数个边边角角的问题，比如框架选择、性能优化、兼容性调整、工程化等等。不过呢，这些并不需要一次性掌握，随着一次一次完成工作任务，解决 bug，这些自然而然就学会了~

前端的初衷是开发网页来让其他人看的，可以向全世界分享信息，直到最近几年才诞生了利用这些核心知识去开发移动 APP、小程序等多终端前端应用的工具，学好核心是前端工程师必备的素养。下边就是核心技能的简介：

在正式开始之前，咱们先把心态放平，就像玩游戏，游戏满级也不是一天两天的事，满级之后也才是一个新的开始。。。

无尽的追求完美~。时间上，掌握前端工程师的基本技能大概需要 4 个月到 1 年的时间（看自己的意志力和上进心），之后就是在工作实践中不断的提升自己，时刻关注业界新闻，保持在科技的最前沿。工作是一个长期的事情，咱们静下心来慢慢学。

好了，相信你已经开始下定决心要成为前端大神了，那咱们第一步就是把前端的核心装备拿下，它们分别是 html, css 和 JavaScript。

前端的初衷是开发网页来让其他人看的，可以向全世界分享信息，直到最近几年才诞生了利用这些核心知识去开发移动 APP、小程序等多终端前端应用的工具，学好核心是前端工程师必备的素养。下边就是核心技能的简介：

html(HyperText Markup Language)—标签的用法

HTML是什么?

它是一种超文本标记语言,我们解析每一个词来了解认识.

超文本的意思就是超链接 跳转到指定的网页.

标记的意思就是通过标记符号(html标签)来标记要显示的网页中的各个部分的标签, 标签解释和显示其标记的内容，最后展现出来最终的网页。

通俗来说就是网页内容的展示,例如文字、图片、音频等.

HTML 是用来编写网页代码结构的，它有一系列的标签用于显示不同的页面元素，

比如用 显示一个超链接， 显示一张图片，就跟写一个 word 文档一样.

只是单纯用 html 只能写内容，不能进行排版和美化样式，如果让网页变得漂亮，需要 CSS。

CSS( Cascading Style Sheets )---- 元素的显示方式

CSS是什么?

主要修饰美化HTML文件中的元素,能够网页中元素位置样式的排版进行像素级精确控制

通过一些语法选择特定的 html 标签，然后用一些属性来给它们添加样式，比如文字颜色，背景，位置，边距，定位等等.

还可以添加动画效果让页面显示的栩栩如生~。重点要掌握 CSS 的盒子模型、常用的布局方式，比如 flex、grid 等。

JavaScript– 多用途编程语言

在写完 html、css 之后，咱们就可以写漂亮的页面了，那么接下来就是需要学习 JavaScript

主要负责网页的动态交互,赋予网页灵魂,可以让用户有更好的体验.

让网页能和人进行互动，比如点击按钮弹出个对话框，处理用户输入的表单信息，添加一些复杂的动画，使用 ajax 加载远程数据等等。

它可以直接操作 HTML 元素，给网页开发提供了无限可能~这里咱们一定要把 JavaScript 基础语法掌握扎实

JS组成由 ECMAScript, 文档对象模型（DOM）浏览器对象模型（BOM).

javaScript是一种属于网络的脚本语言也是图灵完备语言,有自己的判断逻辑有递归循环等能计算一切问题.已经被广泛用于Web应用开发,常用来为网页添加各式各样的动态功能 .

专业一点：JavaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言。

通俗一点：JS是前端代码中最重要的部分（行为层）,常用来操作HTML页面，响应用户的操作，验证传输数据等。

GitHub 上早期的一些开源项目都是 Web 前端相关的.

跨平台的需求以及 Web 前端领域层出不穷的框架 ,导致 GitHub 上每年 Javascript 都排行第一.

几乎每个web浏览器都支持JavaScript

Javascript除了应用于前端和服务器端开发外，它也快速地发展成为移动应用开发的选择.

随着React native框架的兴起（由Facebook提出,JavaScript又出现在了Android和iOS原生应用开发领域。

• Java和JavaScript有什么关系

  没有太大的关系……

  它最初叫 Mocha,接着改名为 LiveScript,最后才确定命名为 JavaScript,目的之一就是“看上去像Java”

alert 警告对话框('操作违法')    
confirm 确认对话框('你确定要删除吗?')    
prompt 提示框('请输入你想反馈的意见：') 

这三者的发展趋势:

.HTML发展趋势:能够在网上展示更多的内容

.CSS发展趋势:能够让我们的网页布局更加地柔性化,以及为我们的网页提供更多的特效效果

.JS发展趋势:能够收集很多语言的特性,让我们写代码更加符合大型项目的编写

人(html=“骨架结构”+css=“血肉皮肤外衣”+js=“灵魂”)这就好像是上帝造人.

网页和网站的区别

网页是包含html格式标签都纯文本,扩展名为.html,需要通过游览器来阅读,是网页基本的组成单元,我们页面从头拉到尾这样的页面就是网页

网站:展示特定内容相关的网页的集合,通常包括:域名,服务器,程序源代码,数据库几个部分,我们点击网页的按钮它弹到了另外一个部分,这样不同的一个网页组合在一起就是我们的网站.

Node.js–服务端开发

Node.js是一个javascript运行环境。它让javascript可以开发后端程序，实现几乎其他后端语言实现的所有功能 .但是目前应用较少.

Node.js就是JavaScript的编译环境,它存在的目的就是为了让JavaScript可以和其他的后端语言一样能够在浏览器上运行.

换种说法就是，可以让前端语言JavaScript在写完之后交给Node.js进行编译和解释，它的存在对于JavaScript有了质的飞跃，对于一个前端来说利用JavaScript就可以编译后台代码是一件多么爽飞天的事情.

三大主流前端框架 --(Vue,React,Angular)–封装

这里就不得不提当下十分热门的前端开发框架了.

JavaScript 框架对于前端来说就像是，八倍镜对于98K一样重要.

React、Vue、Angular 三大件。它们都提供组件化开发的方式，这就让前端开发模式发生了巨大的变化，以往以页面为核心现在转为了以组件为核心，有了这些组件可以方便的在不页面进行复用。

另外基于状态的数据管理，也让改变组件状态变得十分简单。

这三个框架可以都学，但是工作中基本上只会用到一个，深入一个就可以了。

至于它们的 UI 框架也可以根据工作的需要去学习比如 ant design、element UI 等。

框架好处

1. 提升前端开发的效率，降低开发成本和周期.

2. 组件化开发,封装可以重用的代码块 比如你的轮播图、tab切换、页面头部、页面底部等等。

3. 重复引用外部js ,使用框架开发时（例如Vue),整个项目运行时会有一个入口文件，当你有多个组件都会用到某个文件或插件时，仅仅在这个入口文件引入一次，就可以在你所有组件中使用这个插件的方法，可以说是一劳永逸。

4. 性能 很多DOM操作会引起回流和重绘，对于jQuery来说，大量的操作DOM虽然方便，但是很浪费页面性能。 框架和jQuery虽然都会操作DOM，但是框架把大量的DOM进行了处理和优化（例如Vue的虚拟DOM），通过数据驱动，就能渲染出DOM，大大提升了性能。

webpack

简单的说就是打包，它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言,并将其打包为合适的格式以供浏览器使用。

目的是性能优化,减少浏览器向服务器的请求次数,节约服务器的带宽资源等

算法与设计模式

高级算法，设计模式，浏览器底层原理

通信协议

通信协议是指通信各方事前约定的通信规则，可以简单地理解为各计算机之间进行相互会话所使用的共同语言。两台计算机在进行通信时，必须使用的通信协议。

局域网中常用的通信协议主要包括TCP/IP、NETBEUI和IPX/SPX三种协议，每种协议都有其适用的应用环境。

在掌握了上边所有技能之后~咱们等级就算满级了，

现在就是真正的开始了，要不断精进自己的技能。前端技术的发展相比其它技术要快的多，咱们要时常关注一些前端新闻还有业界大佬的博客或微博，自己主动去搜索一些新的前端库或者设计模式，然后应用到工作中去，这样才不至于落后。

另外，因为好多技术都是外国人写的，所以要想得到第一手且最准确的消息，一定要把英语学好，一些包和工具的官方文档就算是靠着翻译也要把它们看懂,

相信我，过不了几天，你会发现需要查的词越来越少，阅读速度也越来越快。

游览器大战

一.在1995年以前，网景的游览器Netscape Navigator是互联网浏览器的绝对标准，因为虽然它的正式版本要收费，但是评估版是随便下载而且免费的。因为正式版本收费网页制作也很精美,一度占据了市场超70%的份额.

然后微软是也打算去做有游览器,微软从1995年8月开始发布IE 1.0,但真正惊动市场的是1997年10月份发布的IE 4.0浏览器,这个游览器不仅更好遵循了World Wide Web Consortium (W3C)提出的互联网标准,而且是捆绑在系统上免费运行的,人的惰性有时候真的很强大.

自此之后ie势如破竹,不断抢占市场,网景终于在1998年以48亿美元的价格出售给了AOL公司,

网景浏览器的核心团队至此已经全部离队。于是，第一回合微软大胜。

然而程序员是一群最天真的人,你用商业模式打败我不服.用技术我才真正服.事情并没有就此结束

二.1998年网景公开了它的浏览器源码，并重新命名为Mozilla，全部程序进行了重写。2002年发布了第一个版本。

2004年基于Mozilla源码的Firefox首次登台，拉开了第二次浏览器大战的序幕,.但尽管当时 Firefox 的性能远胜不思进取的 IE，但 Windows 的捆绑优势太强横，使 Firefox 一直没机会从后赶上.

直至 2008 年 Google 推出 Chrome 浏览器，其卓越的性能、简洁的介面以及捆绑 Google 搜寻的优势，快速攻城掠地，除了侵蚀原有属于 Firefox 的市场之外，也同时痛殴老旧的微软 IE。到了 2012 年，Google Chrome 在 流量统计机构 Statcounter 的数量里终于超越 IE，成为全球第一大浏览器。

这次ie因为自己在6.0 7.0 8.0 9.0版本定制了编码规范,可以说很是作死,程序员一开始只需最多适配两套代码.现在ie每个版本规范不一样让程序员的工作量越来越大.很多公司干脆就不适配ie了,导致市场份额不断缩小,到了w10出现之后,ie就退出了历史舞台,现在他建议采用它们最新的edge游览器,可以说ie是彻底失败了.

**Google Chrome 赢得第二次浏览器大战后，大战看似完结，但实际上只是换了个对手而已。**但现在的竞争远没有结束,有人就有竞争,facebook的急速崛起,一直成为 Google 头上的一把达克摩利斯之剑：他们在 2013 年[就曾推出 Facebook Home]打算对 Android 雀巢鸠占；当 Facebook Home 无疾而终后，最近他们再为[全新应用内浏览器加入了网址栏，让用户毋须离开 Facebook 的情况下也能浏览网页，藉以取代手机内置的浏览器。

Chrome 目前是胜利了，但胜利女神没有给 Google 留下太多时间，只要他们像 IE 一样放慢手脚,Facebook（好吧，在中国很可能就是微信和微信公众号）很可能就会成为下一个 Chrome 了。

Internet上的应用程序

• .C/S c：client 客户端 s：server服务器 .exe
• .B/S b:browser 浏览器 s：server 各类网站

C/S和B/S

• .c/s需要升级
• .b/s不需要升级
• .我们的工作主要是b/s

游览器解析执行 html css js 逐行执行 从上到下从左往右

还有一种编译执行java 编译器 ->二进制文件运行 执行

服务器

服务器就是一台安装了服务器程序的电脑。

用户用域名访问一个网站时，会有 DNS 解析服务把域名解析成 IP，再通过 IP 找到相应的服务.

最终服务器程序就把网站内容传递给用户的浏览器。

咱们的网站就部署在服务器上，它也是从阿里云之类的提供商购买。

本质上就是一台大型的电脑 运行更快 储存更多,但是这个电脑在别人的机房里.

作用:接受游览器的请求(图像,声音,视频),将找到的资源发回给游览器

linux

服务器的操作系统一般是 linux，它可以没有用户界面，可以节省很多 CPU 和内存资源，这样就要求咱们掌握一些常用命令，比如创建文件，切换目录，复制和移动文件，显示文件列表等。另外访问服务器常用的工具是 SSH 和 FTP，咱们需要通过这几个工具来从自己的电脑连接到远程的服务器，然后安装服务器程序和上传网站程序。

服务器程序

常用的服务器程序有 apache、nginx，它们都是基于 HTTP 协议的，有了服务器程序，网站文件比如 html 页面才能发送到用户的浏览器上。

HTTP 协议

协议好比如说医生开药方，写的龙飞凤舞，但是药房药师居然都看得懂_{这个可以说他们都有固定套路来理解对方}

那么在计算机领域，协议就是电脑之间用来交换数据的规则。

HTTP 协议是用来在网络上交换和传输数据的.

比如说咱们的网站 html、css 和 js 就是通过这个 http 协议来发送到浏览器的。

前端发展史

1. 首先是HTML诞生,早期设计的logo,这个版本的HTML是未完成版,有缺陷,只可以点击,跳转,链接,打开网址: https://www.w3.org/History/19921103-hypertext/hypertext/WWW/Link.html 进行展示.
2. 然后是HTML的升级版本HTML2,开始有了图片,打开网址: https://www.w3.org/History.html进行展示.
3. CSS1、HTML3.2、JScript诞生在同一年,字体可以改变大小,颜色,图片可以点击了,我们可以进行一个基本的交互了,打开网址: http://edition.cnn.com/EVENTS/1996/year.in.review/ 进行展示.CNN是比较著名的新闻网站.
4. HTML4,ECMAscript1,CSS2和ECMAscript2诞生,不作过多介绍.
5. 1999年12月,是节点性的一年,HTML4.01诞生了,ECMAscript3修正了,这两个是比较成熟的版本了.包括文字图片基本的语义化标签使文字更重要,还有一些能让,可以满足大部分网站需求,这两个版本比较趋向于稳定,ECMAscript3能够体现大部分js基本能力,大多数js与这个ECMAscript没有本质上的区别.
6. 2000年千禧年之后我们更新发展慢起来了,说明我们程序,标准开始成熟稳定了.
7. XHTML1.0是2000年1月份发布(语法更严谨) ,XHTML应用范围不广,所以被淘汰了.
8. 2006年CSS2.1标准化了,是一个标志时代,标志了CSS的成熟,现在的前端布局技术成熟于CSS2.1表格布局被淘汰,被扫进历史的垃圾堆.支持定位和盒模型的功能
9. ECMAscript简称es5 你们应该有人自学过一段时间,推荐的书基本都是基于ES5之前版本.
10. CSS3不是从CSS2.1升级转化来的,从概念上发生了变化,因为css1版本发布时打印的大概需要5至6页纸,然后又升级到css2的时候打印需要200多页,如果以后 我们再把这种css标准规范融合到以前这种规则里面去,我们只要升级一个,就要对这200多页全部升级一次,太过于臃肿,所以从3.0开始,规范被费解为若干个独立的小模块,例如文本,颜色,定位等都是单独的小模块,便于各模块分别发展.就像一个单细胞生物进化成了多细胞的生物,各个模块之间相互分工和依赖,提供了更为强大了生命力.但是因为在游览器大战的时候各游览器厂商不尊重公开标准,对CSS2.1支持都不统一,更别说CSS3了,这导致了CSS3直到10年后才得到广泛的支持.
11. 2015 ES6升级了很多功能让JS具备了很多新的特性更加的灵活,也出现了很多语法糖 前端最后一个革命性事件.
12. 前端真正爆发是2016年,苗头是2014年,因为咱们的HTML5标准化了咋们能玩一些很牛逼的事情了真正让标准化接口好用起来就是es6,从此以后每年更新一个小版本统一也叫做es6.
13. HTML5：html4.0的升级版本，大前端技术 桌面程序能写 服务器能写 网页和游戏能写 操作软件能写 曾经有这么一个预言,电脑没有软件操作系统,以后就一个游览器,可以操作你的计算机硬件,不需要操作系统.

本阶段大家会遇到的问题

知识点琐碎,没条理.

单词量庞大,单词比较长,

键速

笔记不要都抄,练习要多敲.

IDE

webstorm(收费) 功能很强大 集成了很多工具 大牛大咖逼格的路线 高大上

sublime(免费) 隔一段时间弹出购买提示框 轻量级打开很快 普通屌丝低调路线

vscode 微软提出的轻量级 也非常好用 小清新个性路线

atom github开源的编辑器 小清新个性路线 最好有一个熟悉的其他会一点

插件!插件!插件 比如说代码提示一键生成html结构 提示错误等

看书~手下不离书

构建知识体系最好方式 自己买书不要去借书 看书要有技巧 想要两万的月薪那你先看完2K的书籍!

博客-合格程序员的必备 自我总结和与别人交流的过程 可能会有人点赞和骂你

开源-gitthub的star是硬通货

HTML模板

• 快捷键

  复制ctrl+c   粘贴ctrl+V   保存ctrl+s   返回上一步 ctrl+z  撤销返回上一步 ctrl+y
  

• 编辑器的修改

  1. 显示里面,显示缩进标线
  2. ctrl加滚轮可以放大代码和游览器
  3. 工具-首选项-文件-在创建时候不保存备份
  4. 工具中选择其它游览器为谷歌游览器
  5. 创建html的网页时,选择utf-8的保存方式,尽量不手动创建txt文件修改后缀名.

前端网站推荐

• 掘金
• 思否
• 前端人的俱乐部
• 大前端
• CSDN