以下是 前端开发中常用的 HTML 标签，按功能分类整理，适合新手入门和日常开发查阅。这些标签是构建网页结构、语义化内容和交互的基础。
📌 一、文档与结构标签
| 标签 | 说明 |
|---|
<html> | HTML 文档根元素 |
<head> | 文档头部，包含 <title>、<meta>、<link> 等 |
<title> | 页面标题（显示在浏览器标签页） |
<body> | 页面主体内容 |
<main> | 页面主要内容区域（语义化） |
<header> | 页眉，通常包含导航、Logo |
<footer> | 页脚，通常包含版权信息 |
<nav> | 导航栏 |
<section> | 独立内容区块（如“关于我们”） |
<article> | 独立文章或内容块（如博客文章） |
<aside> | 侧边栏或附加内容（如广告、引用） |
<figure> | 图片、图表等媒体内容（配合 <figcaption>） |
<figcaption> | <figure> 的标题 |
📌 二、文本与段落标签
| 标签 | 说明 |
|---|
<p> | 段落 |
<h1> ~ <h6> | 标题（h1 最重要，h6 最小） |
<br> | 换行（自闭合） |
<hr> | 水平分隔线（自闭合） |
<strong> | 加粗，表示重要性（语义化） |
<em> | 斜体，表示强调 |
<mark> | 高亮文本 |
<small> | 小号字体，常用于免责声明 |
<del> | 删除线文本（表示删除） |
<ins> | 插入文本（表示新增） |
<sup> | 上标（如 x²） |
<sub> | 下标（如 H₂O） |
📌 三、链接与图片标签
| 标签 | 说明 |
|---|
<a href="url"> | 超链接（href 指定目标地址） |
<img src="url" alt="描述"> | 插入图片（alt 用于无障碍访问） |
<link rel="stylesheet" href="style.css"> | 引入外部资源（CSS、图标等） |
<meta charset="UTF-8"> | 设置字符编码（必备） |
<meta name="viewport" content="width=device-width, initial-scale=1.0"> | 响应式网页必备 |
📌 四、列表标签
| 标签 | 说明 |
|---|
<ul> | 无序列表（项目符号） |
<ol> | 有序列表（编号） |
<li> | 列表项 |
<dl> | 定义列表 |
<dt> | 定义列表的术语（Term） |
<dd> | 定义列表的描述（Description） |
<ul>
<li>苹果</li>
<li>香蕉</li>
</ul>
<ol>
<li>第一步</li>
<li>第二步</li>
</ol>
📌 五、表单标签（用户输入）
| 标签 | 说明 |
|---|
<form> | 表单容器 |
<input> | 输入框（可设置 type：text, password, email, checkbox, radio, file 等） |
<label for="id"> | 绑定标签与输入框 |
<button> | 按钮（可提交或重置表单） |
<select> | 下拉选择框 |
<option> | 下拉选项 |
<textarea> | 多行文本输入 |
<fieldset> | 表单域分组（如“个人信息”） |
<legend> | <fieldset> 的标题 |
<datalist> | 输入建议（结合 list 属性） |
<form>
<label for="username">用户名：</label>
<input type="text" id="username" name="username" required>
<label for="gender">性别：</label>
<select id="gender" name="gender">
<option value="male">男</option>
<option value="female">女</option>
</select>
<button type="submit">提交</button>
</form>
📌 六、媒体标签
| 标签 | 说明 |
|---|
<audio> | 插入音频（支持 controls 播放控件） |
<video> | 插入视频（支持 controls, autoplay, loop） |
<source> | 指定媒体文件源（支持多种格式） |
<canvas> | 绘图区域（JavaScript 绘制图形） |
<svg> | 内联 SVG 图形（矢量图） |
<video controls width="400">
<source src="video.mp4" type="video/mp4">
<source src="video.webm" type="video/webm">
您的浏览器不支持视频播放。
</video>
📌 七、表格标签
| 标签 | 说明 |
|---|
<table> | 表格容器 |
<tr> | 表格行 |
<th> | 表头单元格 |
<td> | 普通单元格 |
<thead> | 表头部分 |
<tbody> | 表体部分 |
<tfoot> | 表尾部分 |
<table>
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
</tr>
</thead>
<tbody>
<tr>
<td>张三</td>
<td>25</td>
</tr>
</tbody>
</table>
📌 八、其他常用标签
| 标签 | 说明 |
|---|
<div> | 容器块级元素（无语义） |
<span> | 内联容器（无语义） |
<code> | 表示代码片段 |
<pre> | 保留格式的文本（如代码块） |
<blockquote> | 引用块 |
<cite> | 引用来源（如书籍、文章） |
<time datetime="2026-01-22">今天</time> | 表示时间（支持语义化） |
<abbr title="HyperText Markup Language">HTML</abbr> | 缩写词（带提示） |
✅ 总结：常用标签速查表（高频使用）
| 类型 | 推荐使用标签 |
|---|
| 结构 | <header>, <nav>, <main>, <section>, <article>, <footer> |
| 文本 | <p>, <h1>~<h6>, <strong>, <em>, <mark> |
| 链接 | <a href="...">, <img src="..." alt="..."> |
| 表单 | <form>, <input>, <label>, <button> |
| 列表 | <ul>, <ol>, <li> |
| 表格 | <table>, <tr>, <th>, <td> |
| 媒体 | <video>, <audio>, <svg> |
✅ 最佳实践建议：
- 优先使用 语义化标签（如
<article>、<nav>），提升 SEO 和无障碍访问。
- 所有图片都添加
alt 属性。
- 表单元素必须有
label 关联。
- 使用
meta viewport 实现响应式。
