Visual Studio Code安装和网页编程入门_visualstudiocode 建立html练习案例

作者：寸_铁 | 2024-07-24 11:48:41

踩

visualstudiocode 建立html练习案例

Visual Studio Code安装和网页编程入门

软件准备

软件名称

软件安装

安装过程。
在这里插入图片描述

新建HTML5格式的文件

新建demo01.html文件。
在这里插入图片描述

输入感叹号！再选择第1个模板选项，生成HTML5页面内容。

在这里插入图片描述

常规设置

设置界面主题颜色

菜单：File文件–Preferences首选项-Color Theme颜色主题，更改原来的Dark为Light。
在这里插入图片描述

设置字体大小

菜单：File文件–Preferences首选项-Settings设置在User选项卡中点击Text Editor文本编辑器-字体Font
字体大小Font Size输入20，系统会自动保存生效。
在这里插入图片描述

安装实时预览插件Live Server

选择左侧的Extensions图标，输入Live Server，点击Install安装该插件。
在这里插入图片描述

新建HTML文件，输入感叹号!快速生成网页模板，在鼠标右键点击文件名，选择菜单Open with Live Server ，即可在浏览器中查看网页显示效果。当源文件内容改变时，按Ctrl + S保存后，浏览器的页面也会自动更新。

在这里插入图片描述

在DOS终端界面中启动VS Code

开始菜单输入cmd回车进入DOS界面。
在这里插入图片描述

输入DOS命令
e : 回车切换至E盘
mkdir test001 通过mkdir命令新建一个文件夹test001
cd test001 进入该目录
输入code回车，启动VSCode并指定test001为当前工作目录。

也可以输入 code 文件名在VS code中新建文件，例如code hello.html,这样在VS Code中打开文件。
在这里插入图片描述
VS Code界面中也有Termina终端界面，在其中按回车键即可显示命令行提示。

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/寸_铁/article/detail/874533