HTML（超文本标记语言）是构建网页的基石。通过不同的标签，HTML定义了网页的结构和内容。了解各种HTML标签的用法是前端开发的基础。本文将回顾HTML中常见标签的用法，并介绍它们在实际开发中的应用。
一、结构性标签
<!DOCTYPE html>这个标签声明文档类型，并指定HTML5标准。它应该是HTML文档的第一行。
<!DOCTYPE html><html>HTML文档的根元素，包含了整个网页的内容。
<html lang="en">
<!-- 网页内容 -->
</html><head>包含文档的元数据，如标题、字符集声明、链接到CSS文件等。
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>页面标题</title>
<link rel="stylesheet" href="styles.css">
</head><body>包含网页的主要内容部分，如文本、图片、链接等。
<body>
<h1>欢迎来到我的网站</h1>
<p>这里是内容。</p>
</body>二、文本标签
<h1>至<h6>
标题标签，用于定义从大到小的六级标题。
<h1>主标题</h1>
<h2>副标题</h2><p>段落标签，用于定义文本段落。
<p>这是一个段落。</p><a>链接标签，用于定义超链接。
<a href="https://www.example.com">访问示例网站</a><strong>和<em>
强调和加重文本的标签。<strong>用于强调重要性，<em>用于强调语气。
<strong>重要</strong>
<em>强调</em><blockquote>块级引用标签，用于引用外部来源的内容。
<blockquote>
<p>这是一个引用的内容。</p>
</blockquote><code>和<pre><code>标签用于展示代码，<pre>标签用于保持代码格式。
<pre>
<code>
console.log('Hello, world!');
</code>
</pre>三、列表标签
<ul>和<ol>
无序列表（<ul>）和有序列表（<ol>）用于展示列表项。
<ul>
<li>无序列表项 1</li>
<li>无序列表项 2</li>
</ul>
<ol>
<li>有序列表项 1</li>
<li>有序列表项 2</li>
</ol><dl>,<dt>,<dd>
定义列表，用于定义词汇与描述。
<dl>
<dt>术语</dt>
<dd>定义</dd>
</dl>四、表格标签
<table>表格标签，用于创建表格。
<table>
<thead>
<tr>
<th>表头 1</th>
<th>表头 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>数据 1</td>
<td>数据 2</td>
</tr>
</tbody>
</table><tr>,<th>,<td>
表格行（<tr>）、表头单元格（<th>）、普通单元格（<td>）用于定义表格的结构。
<tr>
<th>表头</th>
<td>数据</td>
</tr>五、表单标签
<form>表单标签，用于创建用户输入的表单。
<form action="/submit" method="post">
<input type="text" name="name" placeholder="你的名字">
<input type="submit" value="提交">
</form><input>,<textarea>,<button>
用户输入控件，包括文本框（<input>）、文本区域（<textarea>）和按钮（<button>）。
<input type="text" name="username" placeholder="用户名">
<textarea name="message" placeholder="留言"></textarea>
<button type="button">点击我</button><select>,<option>
下拉菜单和选项，用于创建选择列表。
<select name="options">
<option value="1">选项 1</option>
<option value="2">选项 2</option>
</select>六、媒体标签
<img>图像标签，用于在网页中嵌入图片。
<img src="image.jpg" alt="描述文本"><audio>和<video>
媒体标签，用于嵌入音频和视频文件。
<audio controls>
<source src="audio.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
<video controls width="600">
<source src="video.mp4" type="video/mp4">
Your browser does not support the video element.
</video>七、语义化标签
<header>,<footer>,<main>,<section>,<article>,<aside>,<nav>
这些标签用于定义页面的不同区域，提高网页的语义性和可读性。
<header>
<h1>网站标题</h1>
<nav>导航菜单</nav>
</header>
<main>
<section>
<article>
<h2>文章标题</h2>
<p>文章内容</p>
</article>
</section>
</main>
<footer>
<p>页脚内容</p>
</footer>八、HTML5 新标签
<details>和<summary>
用于创建可展开的内容区域。
<details>
<summary>点击展开</summary>
<p>详细内容</p>
</details><figure>和<figcaption>
用于为图像或图表提供说明文本。
<figure>
<img src="diagram.png" alt="图表">
<figcaption>图表说明</figcaption>
</figure><progress>和<meter>
用于显示进度条和测量值。
<progress value="70" max="100">70%</progress>
<meter value="0.6">60%</meter>结论
了解和掌握HTML标签的使用是每个前端开发者的基本技能。从基础的结构性标签到高级的HTML5新标签，这些标签帮助我们构建和组织网页内容。熟练运用这些标签，不仅能提高开发效率，还能提升网页的语义性和可访问性。在实际开发中，根据需求选择合适的标签和属性，将使你的网页更具结构性和表现力。
