搭建开发环境

自学前端系列之HTML与CSS

第七节 搭建开发环境

第一阶段编写

• 记事本和浏览器
  初学者可在记事本中编写代码，然后打开浏览器验证。优点是无需下载多余软件，配置简单。缺点是编写较为繁琐，缩进等都需自己设置。

第二阶段编写

• vsode和chrome
  使用vscode编写则十分便捷，但需要掌握以下快捷键和下载几个小插件。
  浏览器推荐使用chrome。

vscode常用快捷键与插件

• 快捷键

1. 在HTML中Alt+B，可在chrome中打开此网页，需下载open in browser插件
   

2. 在网页中Ctrl+Shift+C，可打开以下页面

在这里可以检查自己的编写是否执行
如想直接打开控制台，则在网页按F12键，不行就按F12+Fn

3.ctrl + s 保存代码
4. ctrl + c 复制代码 ， ctrl + v 粘贴代码，ctrl + x 剪切代码
5. ctrl + f 搜索框（搜索/替换）在这里可以搜索想查找的代码

6.ctrl + z 撤销，ctrl + shift + z 反撤销
7. ctrl + d 选中下一个相同单词
8. alt + 上下键 移动整行

• vscode中插件
  1.Chinese (Simplified) (简体中文) Language Pack for Visual Studio Code
  作用：转为中文 使用方式：自动配置
  

2.Live Preview
作用：vscode内预览 使用方式：鼠标右键单击选择该项

3.Markdown All in One
作用：使用Markdown笔记 使用方式：新建文件，以.md结尾

4.open in browser
作用：把编辑的HTML文件等用浏览器打开 使用方式：Alt+B

5.Prettier-Code formatter
作用：自动格式化 使用方式：保存自动格式化