一.什么是Web？

        Web：全球广域网，也称为万维网（www World Wide Web），能够通过浏览器访问的网站

二.Web网站的工作流程

三.Web网站的开发模式

3.1 前后端分离开发（主流）

3.2 混合开发

四.初识Web前端

网页有哪些部分组成？

        文字、图片、音频、视频、超链接……

网页背后的本质是什么？

        程序员写的前端代码

 前端代码是如何转换成用户眼中的网页的？

        通过浏览器转化（解析和渲染）成用户看到的网页

        浏览器中对代码进行解析渲染的部分，称为浏览器内核

提示：不同的浏览器，内核不同，对相同的前端代码解析的效果会存在差异

4.1 Web标准

        Web标准也称为网页标准，由一系列的标准组成，大部分由W3C（World Wide Web Consortium，万维网联盟）负责指定

三个组成部分：

        HTML：负责网页的结构（页面元素和内容）

        CSS：负责网页的表现（页面元素的外观，位置等页面样式，如颜色、大小等）

        JavaScript：负责网页的行为（交互效果）

五.前端开发工具VS Code

Visual Studio Code（简称VS Code）是Microsoft于2015年4月发布的一款代码编辑器

VS Code对前端代码有非常强大的支持，同时也支持其他编程语言（C++、Python、Java等）

VS Code提供了非常强大的插件库，大大提高了开发效率

5.1 VS Code 安装文档

5.1.1 下载

        进入VS Code官网：Visual Studio Code - Code Editing. Redefined，点击 DownLoad for Windows 下载（有Windows版本 或 Mac OS 版本）

        · Stable：是稳定版

        · Insiders：是内测版

5.1.2 安装

        双击安装包，选择 我同意此协议 ，再点击 下一步

        选择安装路径，点击 下一步 。也可以使用默认值：C:\Users\super\AppData\Local\Programs\Microsoft VS Code

        继续点击下一步可以勾选创建桌面快捷方式，如果不想使用vscode作为代码默认打开方式，可以取消 将code注册为受支持的文件类型的编辑器 ，点击下一步

        点击安装，安装完成，运行VS Code。

5.1.3 VS Code插件安装

        VS Code提供了非常丰富的插件功能，根据你的需要，安装对应的插件可以大大提高开发效率。

前端开发常见插件介绍：

1.Chinese (Simplified) Language Pack

        适用于VS Code的中文（简体）语言包

2.Code Spell Checker

        拼写检查器。比如banana单词写错成banane，会提示你是否修改成banana，也可以将 banane添加至检查器的字典中。

3.HTML CSS Support

        在编写样式表的时候，自动补全功能大大缩减了编写时间。

4.JavaScript (ES6) code snippets

        支持ES6语法提示

5.Mithril Emmet

        一个能大幅度提高前端开发效率的一个工具，用于补全代码

6.Path Intellisense

        路径提示插件

7.Vue 3 Snippets

        在Vue 2或者Vue 3开发中提供代码片段，语法高亮和格式化的VS Code插件，能极大提高开发效率。

8.VueHelper

        VS Code最好的vue代码提示插件，不仅包括了vue2所有api，还含有vue-router2和vuex2的代码

9.Auto Close Tag

        自动闭合HTML/XML标签

10.Auto Rename Tag

        自动完成另一侧标签的同步修改

11.Beautify

        格式化html、js、css

        安装过程中, 如果提示是否需要继续安装, 选择 "仍要安装"。（因为已禁用）

12.Bracket Pair Colorizer

        给括号加上不同的颜色，便于区分不同的区块，使用者可以定义不同括号类型和不同颜色

        安装过程中, 如果提示是否需要继续安装, 选择 "仍要安装"。（因为已禁用）

13.open in browser

        VS Code不像IDE一样能够直接在浏览器中打开html，而该插件支持快捷键与鼠标右键快速在浏览器中打开html文件，支持自定义打开指定的浏览器，包括：Firefox，Chrome，Opera，IE以及Safari

14.Vetur

        Vue多功能集成插件，包括：语法高亮，智能提示，emmet，错误提示，格式化，自动补全，

debugger。 VS Code官方钦定Vue插件，Vue开发者必备。

15.File Utils

        File Utils插件,可以方便快捷的来创建、复制、移动、重命名文件和目录。

16.IntelliJ IDEA Keybindings

        安装VSCode的插件 IntelliJ IDEA Keybindings 即可在VSCode中使用IDEA的快捷键。

5.1.4 VS Code 配置

        打开配置面板，根据自己的喜好，可以修改字体、背景样式等偏好设置