001 前端 VSCode编辑器 网页

前端开发

可以做什么

主要负责:Web(网站、手机H5、后台管理系统)、小程序
还可以做:移动端(Uniapp、React Native)、桌面端(Electron)、服务器开发(Node.js)

VSCode编辑器

https://code.visualstudio.com/

插件

中文:Chinese
颜色主题:Atom One Dark Theme
文件夹图标:VSCode Great Icons
在浏览器中打开网页:open in browser，Live Server
自动重命名标题:auto rename tag

配置

自动保存 Auto Save:文件->自动保存
修改代码字体大小 Font Size:文件->首选项->设置
代码自动换行 Word Wrap:文件->首选项->设置->on
空格的渲染方式 Render Whitespace:文件->首选项->设置->all
代码缩进 Tab Size(推荐2个空格)

快捷方式

ctrl+回车:快速移到下一行
!+回车
alt+shift+向下箭头:复制上一行

Xmind Zen思维导图

https://xmind.cn/

网页和网站

一个网站有很多网页

网页的显示过程

在浏览器输入一个网址，网址被DNS服务器解析成ip地址，ip地址找到服务器，从服务器上下载静态资源到浏览器，浏览器解析并展示资源(渲染引擎解析html、css，js引擎解析js)

静态资源:前端工程师开发完项目，将项目打包、部署到服务器

网页的组成

HTML:网页的内容
CSS:网页的样式
JavaScript:网页的交互

浏览器

浏览器最核心的是渲染引擎，负责解析(html,css,js)语法并渲染显示网页

Chrome浏览器

https://www.google.cn/chrome/

搜索引擎

https://cn.bing.com/