01_前端学前概述

前端学习前言概述：

互联网产品：网站为满足用户需求而创建得用于运营和服务得东西，如淘宝

前端开发：web互联网产品得页面开发及功能开发

岗位及开发流程

CEO：产品意向决定

产品经理：需求分析，绘制原因图

UI设计师：通过ps设计图形UI界面效果图

后端：数据库，业务功能开发

前端：通过UI效果图编写页面，和后台进行数据交流，渲染

测试工程师：测试生成报告

运维工程师：产品上线运维

前端技能

1.PS—拿图，切图，尺寸标注，图片处理

2.HTML/HTML5 页面布局

3.css/css3 效果渲染（像是一些动态效果，样式）

4.布局（ps+HTML/HTML5+css/css3）

5.bootstrap（UI框架-封装CSS代码-响应式框架可以分设备而不影响页面渲染-布局不同设备不影响）

6.JavaScript（处理逻辑，做功能，多练习，原生开发）

7.jQuery（js库）

8.Ajax（从jQuery脱离出来，异步请求，向后台发送请求获取数据，同时也可以把前端数据发送到后台。比如，登陆验证，前端输入账号密码到数据库进行比对，正确，返回登陆成功，错误则返回失败。前后端交互）

9.组件化，模块化，自动化（node）

10.大前端：前端加后台语言

基础概述

1.服务器

存储数据 24小时在线

2.浏览器：

作用：通过HTTP发送请求和接收数据

​ 内核：也叫渲染引擎：负责读取网页内容，整理讯息，计算网页的显示方式并显示页面

​ （排版引擎）渲染引擎+gs引擎

5大浏览器内核 记牢重点

IE：Trident内核（IE Edge 内核为 斯巴达）

火狐：gecko内核 （开源的，c++书写，启动速度慢）

苹果safari：webkit内核

谷歌：blink内核（webkit得分支，谷歌首先使用webkit内核，后来使用了基于webkit二次开发的得blink）

欧朋：首先自己开发使用Presto内核，渲染速度较快，后来弃用从而开始使用谷歌Blink内核

记着：trident、gecko、webkit、blink四大内核

由于浏览器内核不同，导致显示原生HTML会有差异，导致了兼容性问题

浏览器会把从服务器接收到的数据会存放到一个临时文件夹，接收缓存的数据来加快第二次的访问速度

网站：因特网上根据一定规则使用HTML等制作的用于展示特定内容相关的网页集合

网页：是网站的组成，其中的一页。通常是HTML格式文件，通过浏览器阅读

控制台介绍：F12

elements:查看html基本结构，html标签和属性

styles: css样式所在 computed：计算后的样式

console：控制台，是调试JavaScript代码的

sources：服务器返回的资源文件，如html,css等

network：网络请求

开发工具：

vs code

**快捷键：** 《英文输入法输入才有用》

骨架：TAB +！

标签：标签+TAB（先按tab键）

多个一样的标签：标签*数量+TAB

多行编辑：Alt+shift+鼠标左键拉动

光标所在处内容上下移动：Alt+上下键

另存为：CTRL+shift+s

注释：CTRL+/

​ 注意新建文件的解析方式，只有解析方式是html时才可以生效

DOS命令

1.Windows+R

2.CMD

3.输入命令+回车

常见命令：

1. cd 打开目录
2. dir 查看目录内容
3. d: 进入D盘