本文旨在系统讲解HTML标签的核心概念、分类及使用方法，帮助读者快速掌握网页结构搭建的基础技能。
HTML标签（Tag）和元素（Element）密切相关，但不完全相同。
HTML标签（Tag）
- 定义：标签是HTML中用尖括号包裹的关键词，表示内容的开始或结束。
- 形式：
- 开始标签：
<tagname>（例如<p>） - 结束标签：
</tagname>（例如</p>） - 自闭合标签：
<tagname />（例如<img>或<br>） - 作用：定义内容的边界或特定功能。
HTML元素（Element）
- 定义：元素是由开始标签 + 内容 + 结束标签组成的完整结构（自闭合标签是例外）。
- 组成：
<p>这是一个段落。</p>- 开始标签：
<p> - 内容：
这是一个段落。 - 结束标签：
</p> - 整体称为一个“段落元素”。
元素和标签的关键区别
简单说：标签是元素的一部分。
- 标签是语法，元素是完整的逻辑单元。
- 示例对比：
- 标签：
<div>和</div> - 元素：
<div>这是内容</div>（包含标签和内容）。
特殊情况：自闭合标签
在HTML中，空元素（也称为空标签或自闭合标签）指的是那些不需要闭合标签的元素。这些元素通常用于插入一些独立的内容，如图像、换行符或水平线等，并且它们自身并不包含内容。根据HTML5标准，下面是一些常见的空元素：
<img>用来显示图片。例如：<img src="example.jpg" alt="一个例子图片"><br>插入一个简单的换行。例如：文本前<br>文本后<hr>创建一条水平线。例如：<p>这是上面的段落</p><hr><p>这是下面的段落</p><input>用于表单输入。例如：<input type="text" name="username" placeholder="请输入用户名"><link>定义文档与外部资源的关系，最常见的是用来链接样式表。例如：<link rel="stylesheet" href="styles.css"><meta>提供关于HTML文档的元数据。例如：<meta charset="UTF-8"><area>在<map>内定义图像映射中的区域。例如：
<map name="workmap">
<area shape="rect" coords="34,44,270,350" href="image.html" alt="计算机图片">
</map><base>指定文档中所有相对URL的基础URL。例如：<base href="https://www.example.com/images/"><col>为表格中的列指定属性。例如：
<table border="1">
<colgroup>
<col style="background-color: #f0f0f0;">
<col span="2" style="background-color: #cccccc;">
</colgroup>
<tr>
<th>头部1</th>
<th>头部2</th>
<th>头部3</th>
</tr>
<tr>
<td>单元格1</td>
<td>单元格2</td>
<td>单元格3</td>
</tr>
</table><embed>用来嵌入外部应用或交互式内容。例如：<embed src="movie.swf" width="400" height="300"><param>为<object>定义参数。例如：
<object data="horse.wav">
<param name="autoplay" value="true">
</object><source>为多媒体元素（如<audio>和<video>）定义媒体资源。例如：
<video controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
您的浏览器不支持 video 标签。
</video><track>为媒体元素（如<audio>和<video>）定义文本轨道。例如：
<video controls>
<source src="movie.mp4" type="video/mp4">
<track kind="subtitles" src="subtitles_en.vtt" srclang="en" label="English">
</video><wbr>定义了一个可选的断字机会。例如：这是一个很长的词<wbr>它可以在需要时被断开
在HTML5中，虽然这些元素理论上可以自闭合（即，在标签末尾加斜杠，如<img />），但推荐的做法是简单地关闭标签而不使用斜杠
HTML文档基本结构
一个标准HTML文档包含以下核心标签：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>找找网示例页面</title>
<link rel="stylesheet" href="/styles/zzw_main.css">
</head>
<body>
<!-- 页面内容 -->
</body>
</html><!DOCTYPE html>：声明文档类型为HTML5。<html>：根标签，lang属性指定语言（如zh-CN表示中文）。<head>：包含元数据（如标题、CSS链接）。<body>：页面可见内容的主体。
常见的HTML元素
结构化元素
<html>: 定义整个HTML文档。<head>: 包含文档的元数据，如字符集声明、样式表链接等。<body>: 包含文档的所有可见内容。<header>: 通常用于定义页面的头部。<footer>: 通常用于定义页面的底部。<article>: 代表文档、页面或应用程序中独立且完整的内容。<section>: 定义文档中的节。<nav>: 用于定义导航链接的部分。<main>: 表示文档的主要内容。<aside>: 定义与页面主要内容相关但可以独立存在的内容。
内联文本语义
<a>: 定义一个超链接。<strong>: 表示重要性或紧急性的文本。<em>: 表示强调。<small>: 定义小号文本。<mark>: 定义标记或高亮文本。<del>: 定义被删除的文本。<ins>: 定义插入到文档中的文本。<sub>: 定义下标文本。<sup>: 定义上标文本。
图像和多媒体
<img>: 定义图像。<audio>: 定义音频内容。<video>: 定义视频内容。<source>: 为多媒体元素定义媒体资源。<track>: 为多媒体元素（如音频和视频）规定外部文本轨道。
列表
<ul>: 定义无序列表。<ol>: 定义有序列表。<li>: 定义列表项。<dl>: 定义描述列表。<dt>: 定义术语/名称。<dd>: 描述术语/名称。
表格
<table>: 定义表格。<caption>: 定义表格标题。<tr>: 定义表格行。<th>: 定义表格中的表头单元格。<td>: 定义表格中的标准单元格。<thead>: 定义表格的页眉。<tbody>: 定义表格主体。<tfoot>: 定义表格的页脚。
表单
<form>: 定义一个HTML表单以供用户输入。<input>: 定义一个输入控件。<textarea>: 定义多行输入控件。<button>: 定义一个点击按钮。<select>: 定义一个下拉列表。<option>: 定义下拉列表中的选项。<label>: 定义表单控件的标签。<fieldset>: 将表单内的相关元素组合在一起。<legend>: 为<fieldset>定义标题。
其他
<div>: 定义文档中的分区或节。<span>: 定义文档中的内联容器。<meta>: 定义关于HTML文档的元信息。<link>: 定义文档与外部资源的关系。<script>: 定义客户端脚本。<style>: 定义文档的样式信息。
综合示例：构建一个简单页面
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>找找网示例</title>
<link rel="stylesheet" href="/css/zzw_styles.css">
</head>
<body>
<header class="zzw-header">
<h1>欢迎来到找找网</h1>
</header>
<main>
<p class="zzw-intro">学习HTML，从这里开始！</p>
<form action="/submit" method="POST">
<input type="email" name="zzw_email" placeholder="输入邮箱">
<button type="submit">注册</button>
</form>
</main>
</body>
</html>本文《HTML标签基础教程》，希望这篇教程对你有所帮助！