HTML（HyperText Markup Language，超文本标记语言）是构建网页的基础技术。HTML 标签作为其核心元素，定义了网页内容的结构和表现形式。本指南将全面介绍 HTML 标签的分类、功能及使用方法。
HTML 标签基础概念
HTML 标签是浏览器识别和渲染网页内容的关键指示符。它们如同容器，包裹着网页内容并定义其属性与表现方式。每个标签通常由三个部分组成：开始标签、内容和结束标签，但存在一些自闭合标签例外情况。
浏览器解析 HTML 文档时遵循从上到下、从左到右的顺序，依据标签指令呈现内容。HTML 文档必须包含基本标签结构，以便浏览器区分普通文本与 HTML 内容。
基本语法规则
所有标签必须包含在尖括号 < > 内
大多数标签需要成对出现：<tag>内容</tag>
标签名称通常使用小写字母
部分标签为自闭合标签，无需结束标签
HTML 标签分类详解
1. 文档结构标签
<html>
定义 HTML 文档的根元素，所有其他元素都必须包含在此标签内。
<!DOCTYPE html>
<html>
<!-- 所有HTML内容 -->
</html>
<head>
包含文档的元数据（metadata），如标题、字符集声明、样式表和脚本引用等。
<head>
<title>页面标题</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="styles.css">
</head>
<body>
定义文档的主体内容，包含所有可见内容，如文本、图像、链接、表格等。
<body>
<h1>欢迎访问我的网站</h1>
<p>这是一个段落文本。</p>
</body>
2. 元数据标签
<title>
定义浏览器工具栏的标题和收藏网页时的默认名称。
<title>我的网页标题</title>
<meta>
提供关于HTML文档的元数据，如字符集、作者信息、视口设置和关键词等。
<meta charset="UTF-8">
<meta name="description" content="代码号">
<meta name="keywords" content="HTML, CSS, JavaScript">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link>
定义文档与外部资源的关系，最常见的是链接样式表。
<link rel="stylesheet" type="text/css" href="mystyle.css">
<style>
包含文档的内部样式信息。
<style>
body {
background-color: lightblue;
}
h1 {
color: navy;
}
</style>
3. 文本内容与语义化标签
标题标签 <h1> 到 <h6>
定义六个级别的标题，<h1> 级别较高，<h6> 级别较低。
<h1>主要标题</h1>
<h2>次级标题</h2>
<h3>三级标题</h3>
<p>
定义文本段落，浏览器会自动在段落前后添加空白。
<p>这是一个文本段落。HTML 使得网页内容结构化成为可能。</p>
<p>这是另一个段落，与上文有自动间距。</p>
<span>
通用的行内容器，用于对文本中的特定部分进行样式设置或操作。
<p>这是一段文本，其中<span style="color:red">这部分是红色的</span>。</p>
<div>
通用块级容器，用于组合其他HTML元素并应用CSS样式。
<div class="container">
<h2>分区标题</h2>
<p>分区内的段落内容。</p>
</div>
<strong> 和 <b>
<strong> 表示重要文本（语义化强调），<b> 仅表示粗体显示（视觉强调）。
<p>这是<strong>重要</strong>文本，而这是<b>粗体</b>文本。</p>
<em> 和 <i>
<em> 表示强调文本（语义化斜体），<i> 仅表示斜体显示（视觉斜体）。
<p>请<em>务必</em>阅读说明，<i>术语</i>使用斜体表示。</p>
<blockquote> 和 <q>
<blockquote> 定义块引用，<q> 定义短的内联引用。
<blockquote cite="http://www.ebingou.cn">
这是来自其他来源的长引用内容。
</blockquote>
<p>正如某人所说：<q>简短引用的内容</q>。</p>
<code>
用于表示计算机代码片段。
<p>在JavaScript中，使用<code>console.log()</code>方法输出信息。</p>
<pre>
定义预格式化的文本，保留空格和换行。
<pre>
function helloWorld() {
console.log("Hello, World!");
}
</pre>
4. 媒体内容标签
<img>
用于嵌入图像，需要 src 属性指定图像路径，alt 属性提供替代文本。
<img src="image.jpg" alt="图片描述" width="500" height="300">
<audio>
嵌入音频内容。
<audio controls>
<source src="audio.mp3" type="audio/mpeg">
您的浏览器不支持音频元素。
</audio>
<video>
嵌入视频内容。
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
您的浏览器不支持视频标签。
</video>
<figure> 和 <figcaption>
<figure> 表示自包含内容，<figcaption> 为其定义标题。
<figure>
<img src="landscape.jpg" alt="风景图">
<figcaption>图1: 美丽的自然风景</figcaption>
</figure>
5. 表格标签
<table>
定义HTML表格。
<table border="1">
<tr>
<th>月份</th>
<th>储蓄</th>
</tr>
<tr>
<td>一月</td>
<td>¥1000</td>
</tr>
</table>
<tr>, <th>, <td>
<tr> 定义表格行，<th> 定义表头单元格，<td> 定义标准单元格。
<table>
<tr>
<th>产品</th>
<th>价格</th>
</tr>
<tr>
<td>笔记本</td>
<td>¥5000</td>
</tr>
</table>
<thead>, <tbody>, <tfoot>
将表格分组为表头、主体和页脚部分。
<table>
<thead>
<tr><th>日期</th><th>收入</th></tr>
</thead>
<tbody>
<tr><td>01/01</td><td>¥200</td></tr>
</tbody>
<tfoot>
<tr><td>总计</td><td>¥200</td></tr>
</tfoot>
</table>
6. 表单标签
<form>
创建包含表单元素的区域，用于收集用户输入。
<form action="/submit-form" method="post">
<label for="fname">名字:</label>
<input type="text" id="fname" name="fname">
<input type="submit" value="提交">
</form>
<input>
创建多种类型的输入字段，类型由 type 属性决定。
<label for="email">电子邮件:</label>
<input type="email" id="email" name="email">
<label for="password">密码:</label>
<input type="password" id="password" name="password">
<input type="checkbox" id="subscribe" name="subscribe">
<label for="subscribe">订阅新闻</label>
<input type="radio" id="male" name="gender" value="male">
<label for="male">男</label>
<textarea>
创建多行文本输入区域。
<label for="message">留言:</label>
<textarea id="message" name="message" rows="4" cols="50"></textarea>
<select>
创建下拉选择列表。
<label for="cars">选择车型:</label>
<select id="cars" name="cars">
<option value="volvo">沃尔沃</option>
<option value="saab">萨博</option>
<option value="mercedes">奔驰</option>
</select>
<button>
创建可点击的按钮。
<button type="button" onclick="alert('Hello!')">点击我</button>
7. 列表标签
<ul> 和 <ol>
<ul> 创建无序列表，<ol> 创建有序列表。
<ul>
<li>咖啡</li>
<li>茶</li>
<li>牛奶</li>
</ul>
<ol>
<li>第一步</li>
<li>第二步</li>
<li>第三步</li>
</ol>
<dl>, <dt>, <dd>
创建描述列表，包含术语和描述。
<dl>
<dt>HTML</dt>
<dd>超文本标记语言</dd>
<dt>CSS</dt>
<dd>层叠样式表</dd>
</dl>
8. 语义结构标签
<header>
表示页面或章节的页眉区域。
<header>
<h1>网站标题</h1>
<nav><!-- 导航链接 --></nav>
</header>
<nav>
定义导航链接的。
<nav>
<a href="/html/">HTML</a> |
<a href="/css/">CSS</a> |
<a href="/js/">JavaScript</a>
</nav>
<section>
定义文档中的独立章节。
<section>
<h2>章节标题</h2>
<p>章节内容...</p>
</section>
<article>
定义独立的自包含内容。
<article>
<h2>文章标题</h2>
<p>文章内容...</p>
</article>
<aside>
定义与主内容间接相关的附加内容。
<aside>
<h4>相关阅读</h4>
<p>相关内容...</p>
</aside>
<footer>
定义页面或章节的页脚区域。
<footer>
<p>作者: 姓名</p>
<p><a href="www.ebingou.cn">联系邮箱</a></p>
</footer>
9. 交互与脚本标签
<script>
用于嵌入或引用可执行脚本。
<script>
function myFunction() {
document.getElementById("").innerHTML = "Hello JavaScript!";
}
</script>
<script src="myscript.js"></script>
<noscript>
定义当浏览器禁用脚本时显示的替代内容。
<noscript>
您的浏览器不支持JavaScript或已禁用!
</noscript>
<details> 和 <summary>
创建可展开/折叠的交互式控件。
<details>
<summary>点击查看详情</summary>
<p>这里是隐藏的详细内容，点击摘要后会显示。</p>
</details>
10. 其他重要标签
<a>
创建超链接，指向其他页面、文件或同一页面的位置。
<a href="https://www.ebingou.cn">访问示例网站</a>
<a href="about.html">关于我们</a>
<a href="#section1">跳转到第一节</a>
<br>
插入简单的换行符。
<p>第一行<br>第二行</p>
<hr>
创建水平分隔线。
<p>第一部分内容</p>
<hr>
<p>第二部分内容</p>
<iframe>
嵌入另一个HTML页面。
<iframe src="https://www.ebingou.cn" title示例网站"></iframe>
<progress>
表示任务的完成进度。
<progress value="70" max="100">70%</progress>
<meter>
表示已知范围内的标量测量值。
<meter value="0.6">60%</meter>
