HTML 在VSCode的侧边选项卡中查看HTML预览

在本文中，我们将介绍如何在VSCode的侧边选项卡中查看HTML预览。使用VSCode编写HTML代码时，可以通过使用相关插件和功能来实时预览HTML页面的效果。

阅读更多：HTML 教程

安装相关插件

首先，在VSCode中安装“Live Server”插件。这个插件是一个轻量级的服务器，可以帮助我们实时预览HTML页面的变化。进入VSCode的扩展搜索栏，搜索并安装Live Server插件。

安装完成后，我们还需要对VSCode进行一些设置。

设置VSCode

在VSCode中，我们需要进行一些简单的设置才能启用HTML预览功能。

首先，点击VSCode左下角的齿轮图标，打开“首选项”菜单，选择“设置”。接下来，在“设置”页面的搜索框中，输入“Live Server”，找到“Live Server: Host Root”选项，将其设置为HTML文件所在文件夹的路径。这样，Live Server插件就知道在哪个文件夹内运行服务器了。

现在，我们可以开始编写HTML代码并查看实时预览了。

编写HTML代码并查看实时预览

在VSCode中，创建一个新的HTML文件，命名为index.html。在该文件中编写一些HTML代码，以便我们能够实时预览页面的效果。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>HTML预览示例</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      background-color: lightblue;
    }

    h1 {
      color: red;
    }

    p {
      font-size: 18px;
    }
  </style>
</head>
<body>
  <h1>这是一个HTML预览示例</h1>
  <p>你可以在这里编写你的HTML代码，并通过VSCode的侧边选项卡实时预览。</p>
  <p>在编辑代码的过程中，每当你保存HTML文件，预览就会自动刷新，方便你查看页面的最新效果。</p>
</body>
</html>

保存并打开index.html文件。然后，右键点击文件，选择“在Live Server中打开”选项。这样，就会自动在浏览器中打开一个新窗口，显示HTML页面的实时预览效果。

现在，你可以随意进行HTML代码的修改和保存，在浏览器中即时查看页面的变化了。