黑马程序员pink老师前端入门教程，零基础必看的h5(html5)+css3+移动端前端视频教程-p10-09-vscode工具创建页面-视频笔记

视频地址:https://www.bilibili.com/video/BV14J4114768?p=10&spm_id_from=pageDriver&vd_source=92091721fde667b87f2021fd2256a257

不使用记事本开发的原因

• 一个是记事本代码要一个一个写完
• 还要把后缀名由txt改为html,比较麻烦,所以使用能解决这些麻烦的开发工具来开发

开发网页常用的工具

• Dreamweaver cs6
• sublime
• WebStorm
• Builder
• Visual Studio Code(简称vsCode)
• 以上工具掌握方法基本差不多,掌握一个就行了
• 老师以vscode来编写开发网页

选择vsCode的原因

• 因为很多前端人员都是用它来开发网页

vscode的使用

创建保存文件

• 下载安装vscode(略)
• 打开vscode
• 点击上面:文件→新建文件文件(快捷键ctrl+n)
• 点击上面:文件→保存(快捷键ctrl+s)→选择保存路径→文件名随便,文件类型:html→保存

代码自动生成

• 使用vscode打开html文件
• 输入感叹号!,按下tab键,vscode就会自动生成html的基本骨架

预览文件

• 右键→open in default browser(中文意思:使用默认浏览器打开,这个是需要安装插件才有的)

放大缩小字体

• 使用ctrl + 加号键 = 放大字体
• 使用ctrl + 减号键 = 缩小字体

vscode设置中文

• 第一次打开时,页面会优先显示英文
• 点击左边中间有四个小正方形的图标

图1中红色框起来的就是插件按钮,不同版本按钮图标可能会不同,但位置基本不变

图1

• 在搜索框中搜索:简体中文
• 出来的选项中有一个是:Chinese (Simplified) (简体中文) Lang
• 点击该选项→再点击右边的Install按钮安装
• 安装好后,该按钮会变成Uninstall,要卸载的话就点击该按钮
• 退出重启vscode

vscode使用总结

• 双击打开软件
• 新建文件(ctrl + n)
• 保存(ctrl + s),注意一定要保存为.html文件
• ctrl + 加号键放大视图,ctrl + 减号键缩小视图
• 生成页面骨架的快捷方式:输入感叹号!,按下tab键
• 利用插件在浏览器预览页面:单击鼠标右键,在弹出窗口中点击"open In Default Browser"