本文属于HTML/CSS专栏文章,适合WEB前端开发入门学习,详细介绍HTML/CSS如果使用,如果对你有所帮助请一键三连支持,对博主系列文章感兴趣点击下方专栏了解详细。
- 博客主页:Duck Bro 博客主页
- 系列专栏:HTML/CSS专栏
- 关注博主,后期持续更新系列文章
- 如果有错误感谢大家批评指出,一定及时修改
- 感谢大家点赞收藏⭐评论✍
【HTML专栏2】VSCode的使用(新建HTML文件)
本文关键字:VSCode、新建文件、HTML
文章目录
- 【HTML专栏2】VSCode的使用(新建HTML文件)
-
- 一、新建文件步骤
-
- 1. 双击打开软件。
- 2. 新建文件(Ctrl + N )。
- 3. 保存(Ctrl + S )
- 4. 放大缩小视图
- 5. 生成页面骨架结构。
- 6. 利用插件在浏览器中预览页面
一、新建文件步骤
1. 双击打开软件。
![【HTML专栏2】VSCode的使用(新建HTML文件)_第1张图片](http://img.e-com-net.com/image/info8/1d0b42eb677943d6ad58f89924789822.jpg)
2. 新建文件(Ctrl + N )。
![【HTML专栏2】VSCode的使用(新建HTML文件)_第2张图片](http://img.e-com-net.com/image/info8/9b02de8be9ee4b5c85f666b04e8f61a6.jpg)
3. 保存(Ctrl + S )
注意移动要保存为 .html 文件
![【HTML专栏2】VSCode的使用(新建HTML文件)_第3张图片](http://img.e-com-net.com/image/info8/da84ed7321484a41a1e52e0cf5f6ea0d.jpg)
![【HTML专栏2】VSCode的使用(新建HTML文件)_第4张图片](http://img.e-com-net.com/image/info8/c0233717d5ce4031acbf1ce451717982.jpg)
4. 放大缩小视图
Ctrl + 加号键 ,Ctrl + 减号键
![【HTML专栏2】VSCode的使用(新建HTML文件)_第5张图片](http://img.e-com-net.com/image/info8/dad7f115d5c24ed08297097f438d6270.jpg)
![【HTML专栏2】VSCode的使用(新建HTML文件)_第6张图片](http://img.e-com-net.com/image/info8/811ccd7246ef4c6d9aa06c74570f233d.jpg)
5. 生成页面骨架结构。
输入!(英文) 按下 Tab 键。
![【HTML专栏2】VSCode的使用(新建HTML文件)_第7张图片](http://img.e-com-net.com/image/info8/815fbc517da544e79e8fcf54a6a53f05.jpg)
6. 利用插件在浏览器中预览页面
单击鼠标右键,在弹出窗口中点击“Open In Default Browser”。
![【HTML专栏2】VSCode的使用(新建HTML文件)_第8张图片](http://img.e-com-net.com/image/info8/add8221017f14deeba9f63cb293d1fa6.jpg)
![【HTML专栏2】VSCode的使用(新建HTML文件)_第9张图片](http://img.e-com-net.com/image/info8/83dcdd9cf3c74564898af43f2a082c15.jpg)
![在这里插入图片描述](http://img.e-com-net.com/image/info8/70227d53edf44e2988405d04782c5504.gif)