HTML（超文本标记语言）是构建网页的基本语言。它通过标签来标记内容的性质，使得浏览器能够解析和显示这些内容。对于前端开发人员来说，掌握常用的HTML标签是必备技能。今天，我们将一起来探索这些标签，了解它们的用途及具体使用方法。
1. 基本结构标签
<!DOCTYPE html>：声明文档类型，告知浏览器这是一个 HTML5 文档。<html>：根元素，包含整个 HTML 文档。<head>：包含文档的元数据（metadata），如标题、样式、脚本等。<title>：定义文档的标题，在浏览器标签栏显示。<meta>：提供文档的元数据，如字符集、作者、描述等。<link>：用于链接外部资源，如 CSS 文件。<script>：用于嵌入或引用 JavaScript 代码。<body>：包含文档的主体内容。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document Title</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<!-- Content goes here -->
</body>
</html>
2. 文本内容标签
<h1>至<h6>：定义六个级别的标题，<h1>级别最高，<h6>级别最低。<p>：定义一个段落。<br>：插入一个换行符。<hr>：插入一个水平线（水平分割线）。<strong>：定义重要的文本，通常显示为粗体。<em>：定义强调的文本，通常显示为斜体。<small>：定义小号文本。<blockquote>：定义一个长的引用。<q>：定义一个短的引用。<cite>：定义引用的来源。<code>：定义计算机代码片段。<pre>：定义预格式化文本，保留空格和换行。
<h1>Main Title</h1>
<p>This is a paragraph.</p>
<p>This is another paragraph with a <strong>strong</strong> word and an <em>emphasized</em> word.</p>
<blockquote>
This is a long quote.
</blockquote>
<pre>
Preformatted text
with preserved spaces
and line breaks.
</pre>
3. 链接和媒体标签
<a>：定义一个超链接。<img>：定义一个图像。<audio>：定义音频内容。<video>：定义视频内容。<iframe>：定义一个内联框架，用于嵌入另一个文档。
<a href="https://www.example.com">Visit Example</a>
<img src="image.jpg" alt="Description of image">
<audio controls>
<source src="audio.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
<video controls>
<source src="video.mp4" type="video/mp4">
Your browser does not support the video element.
</video>
<iframe src="https://www.example.com" width="600" height="400"></iframe>
4. 列表标签
<ul>：定义一个无序列表。<ol>：定义一个有序列表。<li>：定义列表中的一个项目。
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<ol>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ol>
5. 表格标签
<table>：定义一个表格。<tr>：定义表格中的一行。<th>：定义表格中的表头单元格。<td>：定义表格中的单元格。<caption>：定义表格的标题。
<table>
<caption>Table Title</caption>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
</table>
6. 表单标签
<form>：定义一个表单。<input>：定义一个输入控件。<label>：定义输入控件的标签。<textarea>：定义一个多行文本输入控件。<button>：定义一个按钮。<select>：定义一个下拉列表。<option>：定义下拉列表中的选项。
<form action="/submit" method="post">
<label for="name">Name:</label>
<input type="text" id="name" name="name">
<label for="message">Message:</label>
<textarea id="message" name="message"></textarea>
<button type="submit">Submit</button>
</form>
7. 语义化标签
<header>：定义文档或部分的头部。<nav>：定义导航链接的部分。<main>：定义文档的主要内容。<footer>：定义文档或部分的页脚。<article>：定义一篇独立的文章。<section>：定义文档中的一个独立的内容区域。<aside>：定义与主要内容相关的辅助内容。
<header>
<h1>Website Header</h1>
<nav>
<a href="#home">Home</a>
<a href="#about">About</a>
<a href="#contact">Contact</a>
</nav>
</header>
<main>
<article>
<h2>Article Title</h2>
<p>This is an article.</p>
</article>
<section>
<h2>Section Title</h2>
<p>This is a section.</p>
</section>
<aside>
<h2>Aside Title</h2>
<p>This is an aside.</p>
</aside>
</main>
<footer>
<p>Website Footer</p>
</footer>
这些标签是构建 HTML 文档的基础，通过合理使用这些标签，可以创建结构清晰、语义明确的网页。