VSCode开发HTML安装教程及简易示例

安装环境：Win10

1 下载、安装Visual Studio Code

下载

点击下面链接，点击Download按钮下载安装包。

Visual Studio Code 免费下载地址

安装

VSCode的安装非常简单，只要根据软件安装提示，点击“下一步”和完成即可。

2 VSCode汉化

VSCode这款软件对中文使用这非常友好，我们可以通过安装中文插件的方式实现软件的汉化。
在这里插入图片描述
在输入框中输入“ Chinese (Simplified) Language ”； 回车搜索汉化插件； 找到之后点击“install” 按钮安装即可。我的机器上是已经安装好了，因此没有install按钮。
在这里插入图片描述

3 安装打开默认浏览器插件

1、打开VScode插件商城
2、安装插件

在输入框中输入“ Open in Browser ”； 回车搜索打开默认浏览器插件； 找到之后点击“install” 按钮安装即可。我的机器上是已经安装好了，因此没有install按钮。
在这里插入图片描述

3、默认浏览器修改位Chrome谷歌浏览器。

大部分计算机的默认浏览器都是IE或者其他浏览器。但在进行网页或者其他前端程序开发时通常推荐使用的都是谷歌Chrome浏览器。

修改默认浏览器：选择文件—首选项—设置，在搜索栏输入open-in-browser.default，出现以下在编辑框中编辑 ，在编辑框中输入“Chrome”。重启VSCode，即可。
在这里插入图片描述

4 VSCode下快速开始编写html的方法

1、新建文件（Ctrl + N）
2、更改文件后缀为.html

新建的文件Untitled-1是纯文本格式的，创建好后需改为HTML格式，后缀改为.html即可。
更改后可以看到，语言模式和文件标头均改变。

3、快速生成标准的html代码

（1）在第一行输入!号
（2）按Tab键或者选择代码提示中的!回车即可。

也可以直接复制一下代码，查看效果。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>17-无序列表练习3</title>
</head>
<body>
    <h1>物品清单</h1>
    <ul>
        <li>
            <h2>水果</h2>
            <ul>
                <li>葡萄</li>
                <li>橙子</li>
                <li>苹果</li>
            </ul>
        </li>
        <li>
            <h2>蔬菜</h2>
            <ul>
                <li>萝卜</li>
                <li>青菜</li>
                <li>香菜</li>
            </ul>
        </li>
        <li>
            <h2>零食</h2>
            <ul>
                <li>辣条</li>
                <li>腰果</li>
                <li>瓜子</li>
            </ul>
        </li>
    </ul>
</body>
</html>

<!-- ul标签可以有li标签，li中还可以添加ul丰富界面 
alt+B 直接在默认浏览器上运行
ul>li含义：生成一对ul标签，然后在这对ul标签中再生成一对li标签
ul>li*3含义：生成一对ul标签，然后在这对ul标签中再生成3对li标签
ul>li*3>h2+ul>li*3-->
4、在浏览器中查看HTML页面

因为第3步已经安装插件，所以按快捷键Alt + B 就可以在默认浏览器下打开你写的页面了。

使用快捷键 Shift + Alt + B 可以选择其他浏览器打开。

5、实际效果

在这里插入图片描述

# vscode # html5
Logo
华为云开发者联盟

为开发者提供学习成长、分享交流、生态实践、资源工具等服务，帮助开发者快速成长。

更多推荐

cover

让AI成为你的编程助手——DevChat AI插件在VSCode中的应用

avatar 华为云开发者联盟
cover

建议收藏：2024新版GPT/Claude超详细论文润色指南「更新至24-04-30」

avatar 华为云开发者联盟

CV+Deep Learning——网络架构Pytorch复现系列——classification(一：LeNet5，VGG，AlexNet，ResNet)

引言此系列重点在于复现计算机视觉（）中，以便初学者使用（浅入深出）！首先复现深度学习的经典分类网络模块，其中专门做目标检测的Backbone(10.，11.)但是它的主要目的是用来提取特征所以也放在这里，有2.VGG(√)5.ResNeXt10.VovNet11.DarkNet...注意a)完整代码上传至我的githubhttpshttpsb)编译环境设置为（其实不用这个编译环境，你会调bug也行

avatar 华为云开发者联盟