VisualStudioCode开发HTML安装教程及简易⽰例
VSCode开发HTML安装教程及简易⽰例
安装环境：Win10
1 下载、安装Visual Studio Code
下载
点击下⾯链接，点击Download按钮下载安装包。
安装
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的⽅法
html ul标签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、实际效果

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。