HTML标签
2025年2月26日大约 4 分钟
HTML (HyperText Markup Language，超文本标记语言) 是网页的基础标记语言，用于定义网页内容的结构和语义。HTML 标签分为结构标签、内容标签、交互标签等。
本文全面整理了所有 HTML 标签及其作用，带有简要说明和示例，方便开发者查阅使用。
目录
1. HTML 文档结构
HTML 的基本文档结构如下示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>Hello, World!</h1>
</body>
</html>文档中的核心标签含义：
| 标签 | 描述 |
|---|---|
<!DOCTYPE> | 定义 HTML 文档类型（HTML5）。 |
<html> | HTML 文档的根元素。 |
<head> | 包含元信息，如标题和链接的信息。 |
<meta> | 定义元信息，如字符集、响应式适配信息等。 |
<body> | 定义页面的主体部分，是用户可见的内容区域。 |
2. 基础标签
HTML 基础标签定义页面的核心内容和结构。
| 标签 | 描述 | 示例 |
|---|---|---|
<html> | HTML 的根元素。 | <html></html> |
<head> | 定义页面的元信息。 | <head></head> |
<body> | 定义网页的主要显示区域。 | <body></body> |
<title> | 设置网页在浏览器标签中的标题。 | <title>My Page</title> |
<meta> | 定义页面的元数据。 | <meta charset="UTF-8"> |
<link> | 链接外部资源（如 CSS 样式表）。 | <link rel="stylesheet" href="styles.css"> |
<script> | 定义 JavaScript 脚本。 | <script src="app.js"></script> |
3. 文本标签
文本标签用于定义不同的文本样式和段落。
| 标签 | 描述 | 示例 |
|---|---|---|
<h1> - <h6> | 定义标题，从 <h1> 到 <h6> 分别是第 1 - 6 级标题。 | <h1>主标题</h1> |
<p> | 定义段落。 | <p>这是一个段落。</p> |
<b> | 加粗文本，但没有语义。 | <b>加粗文本</b> |
<strong> | 加粗文本，强调重要性（语义化）。 | <strong>强烈强调</strong> |
<i> | 斜体文本，但没有语义。 | <i>这是斜体</i> |
<em> | 斜体文本，表示强调（语义化）。 | <em>这是强调文字</em> |
<u> | 下划线文本。 | <u>带下划线的文字</u> |
<mark> | 高亮文本背景。 | <mark>高亮文本</mark> |
<code> | 显示代码内容。 | <code>let x = 1;</code> |
<blockquote> | 引用块。 | <blockquote>引用文本</blockquote> |
<pre> | 保留格式的预格式化文本块。 | <pre>原样输出</pre> |
<del> | 显示删除线文本。 | <del>已删除内容</del> |
<sub> / <sup> | 下标 / 上标 | X<sub>2</sub> |
4. 超链接与媒体标签
超链接标签
| 标签 | 描述 | 示例 |
|---|---|---|
<a> | 定义超链接，用于跳转到页面或资源。 | <a href="https://example.com">链接</a> |
图像标签
| 标签 | 描述 | 示例 |
|---|---|---|
<img> | 显示图片。 | <img src="image.jpg" alt="描述"> |
媒体标签
| 标签 | 描述 | 示例 |
|---|---|---|
<audio> | 定义音频内容。 | <audio controls src="audio.mp3"></audio> |
<video> | 定义视频内容。 | <video controls src="video.mp4"></video> |
5. 表单标签
HTML 的表单标签用于收集用户输入。
| 标签 | 描述 | 示例 |
|---|---|---|
<form> | 定义表单。 | <form action="/submit"></form> |
<input> | 定义输入控件。 | <input type="text" name="username"> |
<textarea> | 定义多行文本框。 | <textarea></textarea> |
<button> | 定义按钮。 | <button>提交</button> |
<select> | 下拉菜单。 | <select><option>选项1</option></select> |
<label> | 定义表单字段的文本标签。 | <label for="name">用户名</label> |
6. 表格标签
表格标签用于显示格式化的表格数据。
| 标签 | 描述 | 示例 |
|---|---|---|
<table> | 定义表格。 | <table></table> |
<tr> | 定义表格行。 | <tr></tr> |
<td> | 定义单元格（数据）。 | <td>数据</td> |
<th> | 定义表头。 | <th>表头</th> |
<thead> | 定义表格头部。 | <thead></thead> |
<tbody> | 定义表格主体。 | <tbody></tbody> |
<tfoot> | 定义表格尾部。 | <tfoot></tfoot> |
7. 语义化标签
HTML5 提出了许多语义化标签，帮助提升可读性和 SEO 效果。
| 标签 | 描述 | 示例 |
|---|---|---|
<header> | 定义页眉或章节头部。 | <header>页眉内容</header> |
<nav> | 定义导航栏。 | <nav>导航内容</nav> |
<section> | 定义逻辑区域。 | <section>部分内容</section> |
<article> | 定义独立可重复的内容块。 | <article>文章内容</article> |
<aside> | 定义侧边栏。 | <aside>相关内容</aside> |
<footer> | 定义页脚或章节尾部。 | <footer>页脚内容</footer> |
<main> | 定义文档的主要内容。 | <main>主要内容</main> |
8. 其他特殊标签
HTML 还包含一些用于特殊场景的标签。
| 标签 | 描述 | 示例 |
|---|---|---|
<iframe> | 嵌入其他页面。 | <iframe src="page.html"></iframe> |
<canvas> | 绘制图形（2D 和 3D）。 | <canvas></canvas> |
<svg> | 定义矢量图形。 | <svg><circle cx="50" cy="50" r="40"></circle></svg> |
<progress> | 显示进度条。 | <progress value="80" max="100"></progress> |
<details> | 定义可展开的细节内容。 | <details><summary>标题</summary>内容</details> |
<summary> | 定义 <details> 的可见标题。 | 同上 |
9. 总结
本文全面总结了 HTML 中的各类标签及其用法。从基础标签到语义化标签，再到交互元素和特殊场景标签，较为全面地覆盖了 HTML 的功能。建议开发者在实际开发中结合语义化需求合理使用标签，以提升代码的可读性、可维护性以及 SEO 效果。