Appearance
HTML 标签参考指南
以下是按照重要程度降序排列的 HTML 标签表格，包含每个标签的作用、使用场景和注意事项：
| 标签 | 作用 | 使用场景 | 注意事项 |
|---|---|---|---|
<html> | 定义 HTML 文档的根元素 | 所有 HTML 文档的最外层容器 | 必须包含 <head> 和 <body> 子元素 |
<head> | 包含文档的元数据 | 放置标题、样式、脚本引用等 | 不包含可见内容 |
<body> | 包含文档的可见内容 | 放置所有用户可见的内容 | 一个文档只能有一个 <body> |
<div> | 通用块级容器 | 页面布局、内容分组 | 语义化较差，应优先使用语义标签 |
<p> | 定义段落 | 文本内容的基本单位 | 自动添加上下边距 |
<h1>-<h6> | 定义标题，h1 最重要 | 页面标题、章节标题 | h1 每个页面只应有一个 |
<a> | 创建超链接 | 链接到其他页面或资源 | 必须设置 href 属性 |
<img> | 嵌入图像 | 显示图片 | 必须设置 src 和 alt 属性 |
<form> | 定义表单 | 用户输入收集 | 通常需要 action 和 method 属性 |
<input> | 表单输入控件 | 文本、密码、复选框等输入 | 根据 type 属性有不同表现 |
<button> | 定义按钮 | 表单提交、触发事件 | 默认类型为 submit |
<script> | 嵌入或引用脚本 | 客户端脚本执行 | 通常放在 body 末尾以提高性能 |
<link> | 链接外部资源 | 引入 CSS 样式表 | 常用 rel="stylesheet" 属性 |
<meta> | 定义元数据 | 字符集、描述、关键字等 | 通常放在 head 中 |
<title> | 定义文档标题 | 浏览器标签显示、SEO | 每个页面必须有且只有一个 |
<header> | 定义页面或 section 的头部 | 页面标题、导航栏 | 语义化标签，提高可读性 |
<nav> | 定义导航链接 | 主导航、侧边栏导航 | 语义化标签，通常包含多个 <a> |
<section> | 定义文档中的节 | 内容分区、章节 | 语义化标签，应有标题 |
<article> | 定义独立的内容 | 博客文章、新闻报道 | 语义化标签，内容应可独立存在 |
<footer> | 定义页面或 section 的底部 | 版权信息、联系方式 | 语义化标签 |
<ul> | 定义无序列表 | 项目列表、菜单 | 子元素必须是 <li> |
<ol> | 定义有序列表 | 步骤说明、排名 | 子元素必须是 <li> |
<li> | 定义列表项 | 列表中的每一项 | 必须在 <ul> 或 <ol> 内 |
<table> | 定义表格 | 数据展示 | 包含 <tr>、<th>、<td> |
<tr> | 定义表格行 | 表格的一行 | 包含 <th> 或 <td> |
<td> | 定义表格单元格 | 表格的数据单元格 | 通常在 <tr> 内 |
<th> | 定义表头单元格 | 表格的标题单元格 | 默认加粗居中 |
<span> | 通用行内容器 | 文本样式、小范围标记 | 不自动换行 |
<br> | 插入换行符 | 文本换行 | 自闭合标签，无结束标签 |
<hr> | 定义水平线 | 内容分隔 | 自闭合标签，无结束标签 |
<strong> | 定义强调文本 | 重要内容强调 | 浏览器通常加粗显示 |
<em> | 定义斜体文本 | 强调或着重 | 浏览器通常斜体显示 |
<meta charset> | 定义字符编码 | 确保正确显示特殊字符 | 通常设置为 UTF-8 |
<meta name="viewport"> | 定义视口设置 | 响应式设计 | 移动端适配必备 |
<script src> | 引用外部脚本 | 加载外部 JavaScript 文件 | 应考虑加载顺序 |
<style> | 定义内部样式 | 页面样式定义 | 放在 head 中 |
<iframe> | 嵌入另一个文档 | 嵌入地图、视频等 | 注意安全风险 |
<video> | 嵌入视频 | 播放视频内容 | 支持多种格式 |
<audio> | 嵌入音频 | 播放音频内容 | 支持多种格式 |
<canvas> | 绘制图形 | 图表、动画 | 需要 JavaScript 操作 |
<svg> | 定义矢量图形 | 图标、简单图形 | 可缩放且不失真 |
<fieldset> | 对表单元素分组 | 相关表单控件分组 | 通常与 <legend> 配合 |
<legend> | 定义 fieldset 的标题 | 表单分组标题 | 必须在 <fieldset> 内 |
<label> | 定义表单控件的标签 | 提高可访问性 | 应与表单控件关联 |
<select> | 定义下拉列表 | 选项选择 | 包含 <option> 子元素 |
<option> | 定义下拉列表中的选项 | 下拉列表的选项 | 必须在 <select> 内 |
<textarea> | 定义多行文本输入 | 长文本输入 | 可设置 rows 和 cols 属性 |
<blockquote> | 定义长引用 | 引用他人内容 | 通常有缩进效果 |
<cite> | 定义引用的来源 | 引用来源标注 | 通常斜体显示 |
<code> | 定义代码 | 代码片段 | 等宽字体显示 |
<pre> | 定义预格式化文本 | 保留空白和换行的文本 | 通常用于代码块 |
<abbr> | 定义缩写 | 缩写词标注 | 可使用 title 属性显示全称 |
<address> | 定义联系信息 | 作者、网站联系信息 | 通常斜体显示 |
<time> | 定义日期/时间 | 时间相关内容 | 可使用 datetime 属性 |
<figure> | 定义独立内容 | 图片、图表等 | 通常与 <figcaption> 配合 |
<figcaption> | 定义 figure 的标题 | 图片说明、图表标题 | 必须在 <figure> 内 |
<main> | 定义主要内容 | 页面核心内容 | 每个页面只应有一个 |
<aside> | 定义侧边内容 | 侧边栏、相关链接 | 语义化标签 |
<details> | 定义可折叠内容 | 常见问题、详情 | 与 <summary> 配合使用 |
<summary> | 定义 details 的标题 | 可折叠内容的标题 | 必须在 <details> 内 |
<mark> | 定义标记文本 | 高亮显示 | 通常黄色背景 |
<bdi> | 定义双向文本隔离 | 处理混合方向文本 | 较少使用 |
<bdo> | 定义文本方向 | 覆盖默认文本方向 | 较少使用 |
<data> | 定义机器可读数据 | 数据与显示分离 | 较少使用 |
<output> | 定义计算结果 | 表单计算输出 | 与表单配合使用 |
<progress> | 定义进度条 | 任务完成度 | 可设置 value 和 max 属性 |
<meter> | 定义度量值 | 温度、磁盘使用等 | 可设置 min、max、value 属性 |
<picture> | 响应式图片容器 | 根据设备选择图片 | 包含 <source> 和 <img> |
<source> | 定义媒体资源 | 为 <picture>、<video>、<audio> 提供源 | 必须指定 srcset 或 src 属性 |
<track> | 定义媒体轨道 | 视频字幕、字幕 | 与 <video> 或 <audio> 配合 |
<dialog> | 定义对话框 | 模态框、弹出窗口 | 可设置 open 属性 |
<menu> | 定义命令列表 | 上下文菜单 | 较少使用，通常用 <ul> 代替 |
<menuitem> | 定义菜单项 | 菜单中的选项 | 已废弃，使用 <li> 代替 |
<command> | 定义命令按钮 | 命令按钮 | 已废弃 |
<applet> | 嵌入 Java 小程序 | 运行 Java 程序 | 已废弃，使用 <object> 代替 |
<basefont> | 定义基准字体 | 文档字体设置 | 已废弃，使用 CSS 代替 |
<big> | 定义大号文本 | 文本放大 | 已废弃，使用 CSS 代替 |
<center> | 定义居中内容 | 内容居中 | 已废弃，使用 CSS 代替 |
<font> | 定义字体 | 字体样式设置 | 已废弃，使用 CSS 代替 |
<strike> | 定义删除线文本 | 文本删除线 | 已废弃，使用 <del> 或 CSS 代替 |
<tt> | 定义等宽文本 | 等宽字体 | 已废弃，使用 <code> 或 CSS 代替 |
<u> | 定义下划线文本 | 文本下划线 | 已废弃，使用 CSS 代替 |
标签重要性说明
- 核心结构标签：
<html>,<head>,<body>- 构成 HTML 文档的基本框架 - 常用布局标签：
<div>,<header>,<nav>,<section>,<article>,<footer>- 页面布局的主要元素 - 文本内容标签：
<p>,<h1>-<h6>,<span>,<strong>,<em>- 文本内容的基本单位 - 链接和媒体标签：
<a>,<img>,<video>,<audio>- 链接和媒体内容 - 表单标签：
<form>,<input>,<button>,<select>,<textarea>- 用户输入和交互 - 元数据标签：
<meta>,<title>,<link>,<style>- 文档元数据和样式 - 语义化标签：
<main>,<aside>,<details>,<summary>,<figure>,<figcaption>- 提高文档可读性和可访问性 - 表格和列表标签：
<table>,<tr>,<td>,<th>,<ul>,<ol>,<li>- 数据和列表展示 - 其他功能性标签：
<script>,<canvas>,<svg>,<iframe>- 特殊功能实现 - 废弃标签：如
<font>,<center>,<strike>等 - 已被 CSS 替代，不建议使用
最佳实践
- 语义优先：优先使用语义化标签，提高代码可读性和可访问性
- 合理嵌套：遵循 HTML 嵌套规则，确保标签正确嵌套
- 属性完整：为必要的标签设置完整的属性（如
<img>的 src 和 alt） - 性能优化：合理使用脚本和样式，避免过度使用复杂标签
- 响应式设计：使用
<meta name="viewport">和响应式标签确保移动端适配 - 可访问性：为表单元素添加标签，确保屏幕阅读器正常工作
- SEO 友好：合理使用标题标签，添加适当的元数据