HTML 标签分类详解（表格+示例）
1. 结构标签
定义文档的基本框架结构
| 标签 | 说明 |
|---|
<html> | 定义整个 HTML 文档的根元素 |
<head> | 包含文档的元信息和引用的外部资源 |
<body> | 定义文档的主体内容，显示在浏览器窗口中 |
<header> | 定义文档或节的页眉 |
<footer> | 定义文档或节的页脚 |
<section> | 定义文档中的独立节 |
<main> | 定义文档的主要内容区域 |
<!DOCTYPE html>
<html>
<head>
<title>我的网页</title>
</head>
<body>
<header>
<h1>网站标题</h1>
<nav>
<a href="#home">首页</a>
<a href="#about">关于</a>
</nav>
</header>
<main>
<section>
<h2>欢迎</h2>
<p>这是主要内容区域...</p>
</section>
</main>
<footer>
<p>© 2023 版权所有</p>
</footer>
</body>
</html>
2. 文本标签
用于文本内容的标记和格式化
| 标签 | 说明 |
|---|
<p> | 定义段落 |
<h1>-<h6> | 定义标题，h1 为最高级标题 |
<span> | 行内容器，用于组合文档中的行内元素 |
<strong> | 定义重要文本（语义化强调） |
<em> | 定义强调文本（通常斜体显示） |
<br> | 插入换行符 |
<b> | 定义粗体文本（无语义） |
<i> | 定义斜体文本（无语义） |
<u> | 定义下划线文本 |
<mark> | 定义标记/高亮文本 |
<h1>主标题</h1>
<h2>副标题</h2>
<p>这是一个段落。<br>这里换行了。</p>
<p>
<strong>重要内容</strong>，
<em>强调文本</em>，
<b>粗体</b>，
<i>斜体</i>，
<u>下划线</u>，
<mark>高亮</mark>。
</p>
<p>这是<span style="color:red;">红色</span>文本。</p>
3. 列表标签
创建有序或无序列表
| 标签 | 说明 |
|---|
<ul> | 定义无序列表 |
<ol> | 定义有序列表 |
<li> | 定义列表项 |
<dl> | 定义描述列表 |
<dt> | 定义描述列表中的术语 |
<dd> | 定义描述列表中的描述 |
<h3>无序列表</h3>
<ul>
<li>苹果</li>
<li>香蕉</li>
<li>橙子</li>
</ul>
<h3>有序列表</h3>
<ol>
<li>第一步</li>
<li>第二步</li>
<li>第三步</li>
</ol>
<h3>描述列表</h3>
<dl>
<dt>HTML</dt>
<dd>超文本标记语言</dd>
<dt>CSS</dt>
<dd>层叠样式表</dd>
</dl>
4. 表格标签
用于构建表格结构
| 标签 | 说明 |
|---|
<table> | 定义表格 |
<tr> | 定义表格行 |
<td> | 定义表格单元格 |
<th> | 定义表头单元格 |
<thead> | 定义表格的页眉部分 |
<tbody> | 定义表格的主体部分 |
<tfoot> | 定义表格的页脚部分 |
<caption> | 定义表格标题 |
<table border="1">
<caption>学生成绩表</caption>
<thead>
<tr>
<th>姓名</th>
<th>语文</th>
<th>数学</th>
</tr>
</thead>
<tbody>
<tr>
<td>张三</td>
<td>90</td>
<td>85</td>
</tr>
<tr>
<td>李四</td>
<td>88</td>
<td>92</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>平均</td>
<td>89</td>
<td>88.5</td>
</tr>
</tfoot>
</table>
5. 表单标签
处理用户输入和数据提交
| 标签 | 说明 |
|---|
<form> | 定义表单容器 |
<input> | 定义输入控件（有多种类型） |
<textarea> | 定义多行文本输入控件 |
<select> | 定义下拉列表 |
<option> | 定义下拉列表中的选项 |
<button> | 定义可点击按钮 |
<label> | 定义表单控件的标签 |
<fieldset> | 将表单相关元素分组 |
<legend> | 定义 fieldset 的标题 |
<datalist> | 定义输入控件的预定义选项列表 |
<form action="/submit" method="post">
<fieldset>
<legend>个人信息</legend>
<label for="name">姓名：</label>
<input type="text" id="name" name="name" required>
<br><br>
<label for="email">邮箱：</label>
<input type="email" id="email" name="email" required>
<br><br>
<label for="password">密码：</label>
<input type="password" id="password" name="password" required>
<br><br>
<label for="gender">性别：</label>
<select id="gender" name="gender">
<option value="male">男</option>
<option value="female">女</option>
</select>
<br><br>
<label>兴趣：</label>
<input type="checkbox" id="sports" name="interest" value="sports">
<label for="sports">运动</label>
<input type="checkbox" id="music" name="interest" value="music">
<label for="music">音乐</label>
<br><br>
<label for="message">留言：</label>
<textarea id="message" name="message" rows="4"></textarea>
<br><br>
<button type="submit">提交</button>
</fieldset>
</form>
6. 媒体标签
嵌入多媒体内容
| 标签 | 说明 |
|---|
<img> | 定义图像 |
<audio> | 定义音频内容 |
<video> | 定义视频内容 |
<iframe> | 定义内联框架 |
<source> | 定义多媒体资源的来源 |
<track> | 为媒体元素定义文本轨道 |
<picture> | 定义多图像资源容器 |
<canvas> | 定义图形绘制区域 |
<h3>图片</h3>
<img src="example.jpg" alt="示例图片" width="300">
<h3>音频</h3>
<audio controls>
<source src="audio.mp3" type="audio/mpeg">
您的浏览器不支持音频元素
</audio>
<h3>视频</h3>
<video width="400" controls>
<source src="video.mp4" type="video/mp4">
您的浏览器不支持视频元素
</video>
<h3>iframe</h3>
<iframe src="https://www.example.com" width="500" height="300"></iframe>
7. 元信息标签
提供文档的元数据或资源链接
| 标签 | 说明 |
|---|
<meta> | 定义文档的元数据 |
<link> | 定义文档与外部资源的关系 |
<title> | 定义文档标题 |
<style> | 定义内部样式表 |
<script> | 定义客户端脚本 |
<noscript> | 定义脚本未执行时的替代内容 |
<base> | 定义页面所有链接的默认地址或目标 |
<!DOCTYPE html>
<html>
<head>
<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">
<title>我的网页</title>
<link rel="stylesheet" href="styles.css">
<link rel="icon" href="favicon.ico">
<style>
body {
font-family: Arial, sans-serif;
}
</style>
<script>
alert('页面加载中...');
</script>
</head>
<body>
<noscript>
您的浏览器禁用了JavaScript，某些功能可能无法使用。
</noscript>
<h1>欢迎</h1>
<p>这是一个示例页面。</p>
</body>
</html>
8. 语义化标签（HTML5新增）
增强内容的语义描述
| 标签 | 说明 |
|---|
<article> | 定义独立的自包含内容 |
<nav> | 定义导航链接部分 |
<aside> | 定义页面内容之外的内容 |
<figure> | 定义自包含内容，如图表、照片等 |
<figcaption> | 定义 figure 元素的标题 |
<time> | 定义日期/时间 |
<progress> | 定义任务进度 |
<meter> | 定义度量衡 |
<details> | 定义用户可查看/隐藏的额外细节 |
<summary> | 定义 details 元素的可见标题 |
<article>
<h2>文章标题</h2>
<p>发布时间：<time datetime="2023-10-05">2023年10月5日</time></p>
<p>文章内容...</p>
<figure>
<img src="photo.jpg" alt="示例照片">
<figcaption>图1：示例照片</figcaption>
</figure>
</article>
<aside>
<h3>相关文章</h3>
<ul>
<li><a href="#">文章1</a></li>
<li><a href="#">文章2</a></li>
</ul>
</aside>
<details>
<summary>点击查看详情</summary>
<p>这里是隐藏的详细信息内容...</p>
</details>
<p>进度：<progress value="75" max="100"></progress></p>
<p>评分：<meter value="4" min="0" max="5">4分</meter></p>
9. 其他常用标签
| 标签 | 说明 |
|---|
<a> | 定义超链接 |
<div> | 定义文档中的块级容器 |
<hr> | 定义水平线 |
<map> | 定义图像映射 |
<area> | 定义图像映射中的区域 |
<template> | 定义客户端模板内容 |
<slot> | 定义 Web Components 中的插槽 |
<div style="border: 1px solid #000; padding: 10px;">
<h2>区块标题</h2>
<p>这是一个div区块。</p>
<a href="https://www.example.com">访问示例网站</a>
<hr>
<p>水平线下方的内容</p>
</div>
<img src="world.jpg" alt="世界地图" usemap="#worldmap">
<map name="worldmap">
<area shape="rect" coords="0,0,100,100" href="#asia" alt="亚洲">
<area shape="circle" coords="200,200,50" href="#europe" alt="欧洲">
</map>
<template id="productTemplate">
<div class="product">
<h3></h3>
<p></p>
</div>
</template>
