• 第一个前端程序
• VS Code安装
• VS Code 快捷键

1. 第一个前端程序

        使用记事本，新建一个文本文档，重命名为Welcome.html，如下图：

        用记事本打开文档，内容输入如下：

         保存后，用浏览器打开文件，显示如下：

2. 前端工具的选择与安装（浏览器、开发者工具--VSCode）

安装包下载地址：https://code.visualstudio.com/

        双击安装包进行安装，步骤如下：

        安装完成后，打开软件界面如下，

        可点击箭头所指处搜索Chinese，安装汉化插件后点击右下角弹出提示会在重启后生效

        按照提示重启后，汉化界面如下：

3. VS Code 开发者工具快捷键

• VSCode打开文件夹与创建文件：选择文件夹或者将文件夹拖拽到资源管理器区域
• 生成浏览器文件 .html 的快捷方式： ！+ 回车 （英文状态下）
• 代码格式化：Shift + Alt + F
• 向上或向下移动一行：Alt + ↑ 或 Alt + ↓
• 快速复制一行代码：Shift + Alt + ↑ 或 Shift + Alt + ↓
• 快速保存：Ctrl + S
• 快速查找：Ctrl + F
• 快速替换：Ctrl + H

4. VS Code插件——快速打开浏览器

        在扩展中搜索open in browser ，点击安装

        安装后回到编辑界面，可通过右击，选择如图所示选择直接看到运行结果