【Web前端开发基础】前端开发工具的使用

开发工具的使用

开发工具有很多： Visual Studio Code 、 Webstorm 、 Sublime 、Dreamw
前端开发神器：VS Code → 速度快、体积小、插件多 Chrome → 速度快、性能高、效果好

VS Code使用前要求

1. VS Code 软件安装完毕

2. Chinese (Simplified) Language Pack for Visual Studio Code 简体中文插件安装完毕

3. open in browser 直接打开浏览器插件安装完毕

   

VS Code创建网页的步骤

1. 双击打开VS Code软件

2. 将day01代码文件夹用鼠标左键按住不放，拖拽到VS Code窗口中，文件夹会显示在左侧目录上

3. 点击目录上的+新建文件按钮创建页面，注意：文件后缀名需要是.html

   

VS Code的基本快捷键

1. 快速生成标签：英文 + tab

2. 保存文件：ctrl + s

   • 注意1：写完文件之后务必需要保存文件，否则网页无变化
   • 注意2：可以设置自动保存省去每次保存的麻烦

3. 快速查看网页效果：右击 → Open in Default Browser

   • 快捷键：alt + b
   • 注意：必须安装了open in browser 插件

4. 快速生成结构标签：! + tab

   • 注意1：!必须是英文的，中文！无效
   • 注意2：必须保证当前文件后缀名是.html，否则无效
   • VS Code自动生成的骨架多了其他标签，之后会介绍
     

VS Code的其他快捷

1. 快速复制一整行：ctrl + c
2. 快速粘贴一整行：ctrl + v
3. 快速删除（剪切）一整行：ctrl + x
4. 放大缩小视图：ctrl + + 和 ctrl + -
5. 向上复制一行：alt +shift + 上方向键
6. 向下复制一行：alt + shift + 下方向键