前端开发----学习路线与网页简介

前端开发----学习路线与网页简介

1、前端学习路线

1、前端开发是什么？

• 前端开发是创建web页面或app等前端界面呈现给用户的过程
• 核心技术：HTML、CSS、JavaScript以及衍生出来的各种技术、框架等

2、前端开发带来什么改变？

• 丰富网页内容
• 功能强大
• 增强用户体验感

3、前端开发应用场景

• PC
• 移动App
• 小程序
• 游戏
• 服务端

4、前端开发就业机会

• Web前端开发工程师
• 小程序开发工程师
• 移动Web开发工程师
• 前端架构师/前端专家
• …

5、学习路线

1）前置知识

• 计算机基本认识
• 应用的概念
• 前端和后端

2）入门阶段

• HTML（HTML语法、HTML语义化、SEO基础）
• CSS（CSS语法、页面布局、媒体查询、CSS3）

3）JavaScript进阶

• JavaScript语法
• 基础的数据结构
• Web APIs
• ES6+
• 模块化
• TypeScript

4）包管理工具

• npm
• yarn

5）CSS进阶

• CSS预处理器（SASS、LESS、PostCSS、…）
• CSS框架（Bootstrap、tabler、Semantic UI、Materialize CSS、…）
• CSS架构规范（OOCSS、BEM、SMACSS）

6）构建工具

• 代码校验工具（ESLint、StyleLint、MarkdownLint）
• 模块打包工具（Webpack、Parcel、Rollup）
• 任务运行器（npm scripts、Makefile、Gulp、Grunt、Broccoli）

7）流行的框架

• Vue.js（VueX、Element UI）
• React.js（Redux、AntDesign、Mobx、CSS in JS）
• Angular（Rx.JS、ngrx）

8）持续学习

• Node.js
• 渐进式Web应用
• 服务端渲染静态站点生成器
• 桌面应用
• 移动应用
• …

2、网页简介

1、网页本质

• 程序员使用HTML来制作网页文件
• 浏览器查看的网页都是.html或.htm文件
• HTML叫做超文本标记语言（Hypertext Markup Language），用于搭建网页的结构

2、网页的组成

• 前端三层：HTML（结构层）、CSS（样式层）、JavaScript（行为层）
• 其他多媒体内容：图片、视频、音频、超级链接等
• 所有的网页文件都是真实的、物理存在的文件

思考：这些网页文件是如何通过互联网提供给用户观看使用的呢？

3、互联网运行过程

程序员将网页源文件上传到服务器进行存储，用户后期通过客户端（如浏览器软件）发送HTTP请求到服务器，服务器接收请求后进行响应，将存储的相关文件通过HTTP响应回传到用户本地客户端，最终通过客户端将网页文件进行渲染，显示出最终用户看到的网页效果

4、服务器

• 服务器（server）就是一种特殊的计算机，也包括处理器、硬盘、内存、系统总线等，但是由于需要提供更可靠的服务，在处理能力、稳定性、可靠性、安全性等方面要求较高
• 作用：对于web来讲，用于存储开发人员上传的网页数据，且需要相应服务请求，进行处理
• 要求：对于网站服务器来说，为了让用户随时进行访问，必须24小时不间断工作

5、云服务器

目前绝大多数网站都采用的是云服务器（Elastic Compute Service，ECS），云服务器是一种简单高效、安全可靠、处理能力可弹性伸缩的计算服务，其管理方式比物理服务器更简单高效；用户无需提前购买硬件，即可迅速创建或释放任意多台云服务器

6、客户端

• 客户端（Client）也叫用户端，指的是普通用户使用的终端，客户端有多种形式，比如最常用的就是浏览器、app等，而web开发最主要的客户端形式就是浏览器
• 浏览器（Brower），是一种用户上网搜索、查看信息资源的应用程序
• 功能：用于发送HTTP请求到服务器，接收服务器发送的HTTP响应，渲染HTML网页

7、主流浏览器

• 主流的Web页面浏览器有：微软的IE和Microsoft Edge、Mozilla的Firefox、苹果公司的Safari、Google的Chrome及Opera软件公司的Opera
  

8、主流浏览器内核

因为不同浏览器使用内核及所支持的HTML等网页语言标准不同，对网页的渲染效果会有差异

推荐：使用Chrome浏览器（渲染效果好、市场占有率高、自带开发者调试工具）

9、浏览器功能

• 作用1：发送HTTP请求，发送的方式是在浏览器地址栏输入对应网址，或者点击超级链接
• 作用2：接收服务器发回的HTTP响应，服务器会发回一个HTML给浏览器
• 作用3：将接收到的HTML进行解析并显示

10、HTTP协议

Hypertext Transfer Protocol：超文本传输协议，是客户端浏览器或其他程序与web服务器之间的应用层通讯协议
1、HTTP请求

• request，浏览器根据网址向对应的服务器发送请求
• 发送请求的方法：在浏览器地址栏中输入网址，或者点击网址链接
• HTML页面解析过程中，会发出多个http请求，包含网页的图片、视频、音频等文件请求

2、HTTP响应

• 响应：response，服务器根据请求响应一个HTML文件，将HTML传输给客户端，在浏览器中进行HTML网页的渲染