HTML 常用标签速查表

HTML常用标签速查表

最新推荐文章于 2025-12-04 17:59:42 发布

原创最新推荐文章于 2025-12-04 17:59:42 发布 · 1k 阅读

14 ·

CC 4.0 BY-SA版权

文章标签：

#html #前端 #javascript

前端专栏收录该内容

2 篇文章

订阅专栏

这份 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`：视频封面图路径