这份 HTML 常用标签速查表按「结构布局」「文本内容」「表单元素」「媒体元素」四大类整理，覆盖日常开发高频使用的标签，标注核心功能和关键属性，方便快速查阅。
一、结构布局类（语义化+容器）
用于划分页面整体结构，提升代码可读性和 SEO 友好度。
| 标签 | 核心功能 | 关键属性/说明 |
|---|---|---|
<html> |
页面根标签，包裹所有 HTML 内容 | lang="zh-CN"（指定语言为中文） |
<head> |
存放页面元数据（不直接显示） | 子标签：<title> <meta> <style> <link> |
<body> |
存放用户可见的所有内容 | ------ |
<header> |
页面/区块头部（如 Logo、标题、导航） | 可嵌套在 <body> 或 <article> 内 |
<nav> |
导航区域（如主导航、面包屑） | 仅包含核心导航链接，非所有链接 |
<main> |
页面核心内容（唯一，不重复） | 不能嵌套在 <header> <footer> 等标签内 |
<section> |
主题性内容区块（如"新闻列表""产品介绍"） | 需搭配 <h1>-<h6> 明确主题 |
<article> |
独立完整内容（如单篇文章、一条评论） | 单独拿出仍有意义，可嵌套在 <section> 内 |
<aside> |
侧边辅助内容（如广告、相关推荐、作者信息） | 内容与主内容相关，但非核心 |
<footer> |
页面/区块底部（如版权、联系方式） | 可嵌套在 <body> 或 <article> 内 |
<div> |
通用容器（无语义，仅用于布局） | 需通过 class/id 配合 CSS 控制样式 |
二、文本内容类（排版+格式）
用于处理文字排版、格式和引用，优化文本展示效果。
| 标签 | 核心功能 | 关键属性/说明 |
|---|---|---|
<title> |
定义页面标题（显示在浏览器标签页） | 位于 <head> 内，影响 SEO |
<h1>-<h6> |
标题标签（从大到小，层级分明） | <h1> 权重最高（页面仅用1个），<h6> 最小 |
<p> |
段落标签（自动换行，上下留白） | 用于包裹连续文本，避免直接用 <br> 分段 |
<br> |
强制换行（单标签，无闭合） | 仅用于同段落内换行（如地址、诗歌），不用于分段 |
<hr> |
水平分隔线（单标签，无闭合） | 分隔不同主题内容，默认显示为灰色横线 |
<strong> |
文字加粗（强调重要性，语义化） | 区别于 <b>（仅样式加粗，无语义） |
<em> |
文字斜体（强调语气，语义化） | 区别于 <i>（仅样式斜体，无语义） |
<u> |
文字下划线 | 避免用于链接（链接默认带下划线） |
<s> |
文字删除线 | 表示废弃内容（如原价"¥199 ¥299"） |
<sup> |
上标文本（如数学公式"x²"、引用标注"1"） | ------ |
<sub> |
下标文本（如化学公式"H₂O"） | ------ |
<blockquote> |
长引用（段落级引用，如引用文章段落） | cite 属性可指定引用来源 URL |
<q> |
短引用（行内引用，如引用一句话） | 浏览器默认添加引号，无需手动写"" |
<ul> |
无序列表（默认带圆点符号） | 子标签必须是 <li>，用于并列无顺序内容 |
<ol> |
有序列表（默认带数字序号） | type="1/A/a/I/i" 可修改序号类型；start="n" 指定起始序号 |
<li> |
列表项（用于 <ul> 或 <ol> 内） |
每个列表项独占一行 |
<a> |
超链接（跳转页面、打开邮件等） | href：指定跳转目标（URL/邮箱/锚点）；target="_blank"：新窗口打开 |
三、表单元素类（用户输入）
用于收集用户信息（如登录、注册、搜索），是前后端交互的核心。
| 标签 | 核心功能 | 关键属性/说明 |
|---|---|---|
<form> |
表单容器（包裹所有表单元素） | action：指定数据提交地址（如 submit.php）；method：提交方式（get/post） |
<input> |
单行输入框（多种类型，单标签） | type：核心属性，值包括： - text：普通文本 - password：密码（隐藏输入） - radio：单选按钮（需同 name 分组） - checkbox：复选框 - submit：提交按钮 - reset：重置按钮 - file：文件上传 - email：邮箱（自带格式验证） |
<label> |
表单标签（关联输入框，提升点击范围） | for="input-id"：与输入框 id 绑定，点击标签即聚焦输入框 |
<select> |
下拉选择框 | 子标签是 <option>，multiple 属性可实现多选 |
<option> |
下拉选项（用于 <select> 内） |
selected 属性：默认选中该选项 |
<textarea> |
多行文本框（如评论、备注） | rows：默认行数；cols：默认列数；可通过 CSS 控制大小 |
<button> |
按钮（比 <input type="submit"> 更灵活） |
type="submit"：提交表单；type="reset"：重置；type="button"：普通按钮（需配合 JS 用） |
四、媒体元素类（图片+音视频）
用于嵌入图片、音频、视频等多媒体内容。
| 标签 | 核心功能 | 关键属性/说明 |
|---|---|---|
<img> |
插入图片（单标签） | src：图片路径（本地/网络 URL）；alt：图片加载失败时的文字说明（必写，助于无障碍）；width/height：图片尺寸（建议用 CSS 控制） |
<audio> |
嵌入音频（如音乐、语音） | src：音频路径；controls：显示播放控件；autoplay：自动播放（部分浏览器禁用）；loop：循环播放 |
<video> |
嵌入视频 | src：视频路径；controls：显示播放控件；width：视频宽度；poster：视频封面图路径 |