2025-09-04 HTML1——环境配置与简介

文章目录

[1 配置环境](#1 配置环境)
- [1.1 安装VS Code](#1.1 安装VS Code)
- [1.2 安装插件](#1.2 安装插件)
- [1.3 VS Code 配置](#1.3 VS Code 配置)
[2 HTML 简介](#2 HTML 简介)
- [2.1 什么是 HTML？](#2.1 什么是 HTML？)
- [2.2 标签与元素](#2.2 标签与元素)
- [2.3 网页结构](#2.3 网页结构)
- [2.4 示例](#2.4 示例)

1 配置环境

1.1 安装VS Code

Visual Studio Code（简称 VS Code）是一个由微软开发，同时支持 Windows 、 Linux 和 macOS 等操作系统且开放源代码的代码编辑器，编辑器中内置了扩展程序管理的功能。

在浏览器中搜索VS Code，进入官网下载安装。

1.2 安装插件

安装VS Code后打开，点击右侧插件按钮，在搜索框里输入"chinese"，安装中文插件。

同理，安装以下两个插件：

HTML CSS Support：支持HTML与CSS语法。
Live Server：实时显示网页。

1.3 VS Code 配置

点击左下角"设置"图标，选择"设置"按钮，在右侧搜索栏里输入自动，将"Auto Save"选项更改为"afterDelay"。

之后，VS Code 会自动保存更改的文件。

2 HTML 简介

2.1 什么是 HTML？

HTML 是 Hypertext Markup Language（超文本标记语言） 的缩写。简单来说，HTML 的作用就是为网页提供结构。它告诉浏览器网页的哪个部分是标题、哪个部分是段落、哪些是列表，等等。

HTML 是用来描述网页的一种语言。

HTML 指的是超文本标记语言: H yper T ext M arkup Language
HTML 不是一种编程语言，而是一种标记语言
标记语言是一套标记标签 (markup tag)
HTML 使用标记标签来描述网页
HTML 文档包含了HTML 标签及文本内容
HTML文档也叫做 web 页面

2.2 标签与元素

HTML 标记标签通常被称为 HTML 标签 (HTML tag)。HTML 标签是用来定义网页内容结构的"标记"。例如，<h1> 标签表示一级标题，<p> 标签表示段落。

双标签 ：由一个开始标签 和一个结束标签 成对出现。内容通常放在这两个标签之间。
- 格式：<开始标签> 内容 </结束标签>
- 示例：<p>这是一个段落。</p>
单标签 ：也叫自闭合标签，它没有结束标签，只有一个单独的标签。
- 格式：<标签>
- 示例：<input>（输入框）、<br>（换行）、<hr>（分隔线）。
- 区别：单标签通常用于没有内容的元素，而双标签用于包含内容的元素。

"HTML 标签" 和 "HTML 元素" 通常都是描述同样的意思.

但是严格来讲, 一个 HTML 元素包含了开始标签与结束标签，如下实例:

html 复制代码

<p>这是一个段落。</p>

2.3 网页结构

一个标准的 HTML 文档通常由以下几个部分组成：

文档类型声明 ：
- 代码：<!DOCTYPE html>
- 作用：告诉浏览器这是一个 HTML5 文档。
根元素 ：
- 代码：<html> ... </html>
- 作用：它是整个 HTML 文档的最外层容器，所有其他内容都必须包含在其中。
头部：
- 代码：<head> ... </head>
- 作用：包含文档的元信息 ，这些信息不会直接显示在网页上。例如，网页的标题 <title>、字符编码、以及外部的 CSS 或 JavaScript 文件链接。
主体：
- 代码：<body> ... </body>
- 作用：包含所有将在浏览器中实际显示 的内容，比如文本、图片、链接等。在接下来的练习中，所有代码都将在 <body> 标签内编写。

下面是一个可视化的HTML页面结构：

只有 <body> 区域 (白色部分) 才会在浏览器中显示。

2.4 示例

在VS Code中新建文件sample.html，将以下内容拷贝至文件中。

html 复制代码

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>菜鸟教程(runoob.com)</title>
  </head>
  <body>
    <h1>我的第一个标题</h1>
    <p>我的第一个段落。</p>
  </body>
</html>

右键选择"Open with Live Server"。

会在浏览器中看到以下网页内容：

<!DOCTYPE html> 声明为 HTML5 文档。
<html> 元素是 HTML 页面的根元素。
<head> 元素包含了文档的元（meta）数据，如定义网页编码格式为 utf-8。
<title> 元素描述了文档的标题。
<body> 元素包含了可见的页面内容。
<h1> 元素定义一个大标题。
<p> 元素定义一个段落。