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

安装环境：Win10

1 下载、安装Visual Studio Code

下载

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

Visual Studio Code 免费下载地址

安装

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

2 VSCode汉化

VSCode这款软件对中文使用这非常友好，我们可以通过安装中文插件的方式实现软件的汉化。

visual studio html5 项目开发 vscode html开发_默认浏览器


在输入框中输入“ Chinese (Simplified) Language ”； 回车搜索汉化插件； 找到之后点击“install” 按钮安装即可。我的机器上是已经安装好了，因此没有install按钮。

visual studio html5 项目开发 vscode html开发_vscode_02

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

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

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

visual studio html5 项目开发 vscode html开发_web_03

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

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

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

visual studio html5 项目开发 vscode html开发_vscode_04

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、实际效果

visual studio html5 项目开发 vscode html开发_vscode_05