返回

从零开始：用 VSCode 搭建你的第一个 HTML 页面

前端

前言

对于初学者来说，学习网页设计和开发可能会让人望而却步。但其实，只要掌握了基本知识，你就能轻松搭建自己的第一个网页。在这篇文章中，我们将使用 VSCode 创建一个简单的 HTML 文件，了解 HTML 的基本结构和常见标签。即使你没有任何编程经验，也能轻松上手。

准备工作

在开始之前，你需要确保你的电脑上已经安装了 VSCode。如果没有，可以从 VSCode 官网下载并安装。

创建 HTML 文件

  1. 打开 VSCode，点击左上角的文件菜单，选择“新建”>“文件”。

  2. 在新文件窗口中，将文件命名为 "index.html"，然后点击“保存”。

  3. VSCode 会自动为你创建一个新的 HTML 文件，其中包含了基本的 HTML 结构。

HTML 文件结构

一个 HTML 文件通常包含以下几个部分：

  • DOCTYPE 声明 ：告诉浏览器该文件是 HTML 文档。
  • html 标签 ：HTML 文档的根元素，包含整个网页的内容。
  • head 标签 ：包含有关网页的元信息，如标题、作者、等。
  • body 标签 ：包含网页的实际内容，如文本、图像、视频等。

HTML 标签

HTML 标签是一些特殊的代码，用于定义网页中的不同元素。例如，<p> 标签表示一段文字，<img> 标签表示一张图片，<a> 标签表示一个链接。

要使用 HTML 标签，只需要在文本编辑器中输入标签名称，并在标签之间输入内容即可。例如，要创建一个段落，你可以输入以下代码：

<p>这是我的第一个段落。</p>

要创建一个图片，你可以输入以下代码：

<img src="image.jpg" alt="我的图片">

HTML 代码

HTML 代码是一系列由 HTML 标签组成的文本。这些代码告诉浏览器如何显示网页中的内容。

为了让你的 HTML 代码更易于阅读和维护，你可以使用缩进和换行来组织代码。例如，你可以将<head> 标签和<body> 标签的内容分别缩进一个层次，如下所示：

<!DOCTYPE html>
<html>
  <head>
    
  </head>
  <body>
    <p>这是我的第一个段落。</p>
    <img src="image.jpg" alt="我的图片">
  </body>
</html>

运行 HTML 文件

当你写完 HTML 代码后，就可以运行 HTML 文件来查看效果了。

要运行 HTML 文件，只需在 VSCode 中点击运行按钮（绿色三角形按钮），或使用键盘快捷键 Ctrl + F5。

浏览器会自动打开你的 HTML 文件，并显示其中的内容。

总结

在这篇文章中，我们学习了如何使用 VSCode 创建一个简单的 HTML 文件，了解了 HTML 的基本结构和常见标签。现在，你已经掌握了搭建网页的基础知识，可以开始创建自己的网页了。