HTML 标签类型全面介绍
HTML 标签类型全面介绍
HTML（HyperText Markup Language）是构建 Web 页面结构的基础语言。HTML 由不同类型的标签组成，每种标签都有特定的用途。本文将全面介绍 HTML 标签的分类及其用法。
1. HTML 标签概述
HTML 标签通常成对出现，由 开始标签 和 结束标签 组成，例如：
<p>这是一个段落</p>
某些标签是 自闭合 的，例如 <img> 和 <br>。
2. HTML 标签的分类
2.1 结构性标签（Layout Tags）
这些标签用于定义页面的整体结构。
<html>：定义 HTML 文档的根元素。<head>：包含页面的元数据。<body>：包含页面的主要内容。<header>：定义网页的头部区域。<footer>：定义网页的底部区域。<main>：页面的主要内容。<section>：定义一个独立的内容块。<article>：独立的文章内容。<nav>：导航栏。<aside>：侧边栏。<div>：块级容器。<span>：行内容器。
示例：
<header>
<h1>网站标题</h1>
<nav>
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">关于</a></li>
</ul>
</nav>
</header>
2.2 文本格式化标签（Text Formatting Tags）
用于修饰和格式化文本。
<h1> - <h6>：标题标签。<p>：段落。<br>：换行。<hr>：水平分割线。<b>/<strong>：加粗。<i>/<em>：斜体。<u>：下划线。<mark>：高亮。<sub>/<sup>：下标 / 上标。<blockquote>：引用。<code>：代码片段。
示例：
<p><strong>重要：</strong>请在 HTML 中使用语义化标签！</p>
2.3 链接和媒体标签（Links & Media Tags）
<a>：超链接。<img>：图片。<audio>：音频。<video>：视频。<source>：音视频资源。<iframe>：内嵌网页。<embed>：嵌入对象。<object>：多媒体内容。
示例：
<a href="https://www.example.com">访问示例网站</a>
<img src="image.jpg" alt="示例图片">
2.4 表单标签（Form Tags）
用于创建用户输入界面。
<form>：表单。<input>：输入框。<label>：标签。<button>：按钮。<textarea>：多行文本输入。<select>：下拉列表。<option>：下拉选项。<fieldset>：分组表单。<legend>：分组标题。<datalist>：可选输入项。
示例：
<form>
<label for="name">姓名：</label>
<input type="text" id="name" name="name">
<button type="submit">提交</button>
</form>
2.5 表格标签（Table Tags）
用于创建表格结构。
<table>：表格。<tr>：行。<th>：表头。<td>：单元格。<caption>：表格标题。<thead>/<tbody>/<tfoot>：表格的不同部分。
示例：
<table>
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
</tr>
</thead>
<tbody>
<tr>
<td>张三</td>
<td>25</td>
</tr>
</tbody>
</table>
2.6 交互元素（Interactive Elements）
<details>/<summary>：可折叠内容。<dialog>：对话框。<progress>：进度条。<meter>：度量值。
示例：
<details>
<summary>点击展开</summary>
<p>这里是隐藏的内容。</p>
</details>
3. 语义化标签的重要性
HTML5 引入了很多语义化标签，如 <header>、<article>、<section> 等，提升了可读性和 SEO 效果。
示例：
<header>
<h1>网站标题</h1>
</header>
<section>
<article>
<h2>文章标题</h2>
<p>文章内容...</p>
</article>
</section>
4. 结论
本文介绍了 HTML 标签的主要类型及其使用示例。掌握这些标签的用法，可以帮助你更好地构建网页结构，提高网页的可读性和可维护性。希望这篇文章对你有所帮助！🚀