上一篇
如何记住html标签大全
按功能分类记忆（标题/段落/列表等），先掌握高频标签，结合代码实操强化，善用速查表辅助
基础架构类标签（页面骨架）
| 作用 | 关键属性 | 示例场景 | |
|---|---|---|---|
<!DOCTYPE> |
声明文档类型（必写） | html | 所有HTML文件首行 |
<html> |
根元素，定义整个网页 | lang=”zh-CN” | 包裹全部内容 |
<head> |
元信息容器（不直接显示） | charset=”UTF-8″ | /样式/脚本 |
<body> |
容器 | onload=”func()” | 承载区 |
记忆口诀：”医头体足” → 医（DOCTYPE）+ 头（head）+ 体（body）
类标签（信息呈现）
基础文本标签
| 作用 | 特点 | 典型用途 | |
|---|---|---|---|
<p> |
段落 | 块级元素，自动换行 | 文章段落 |
<br> |
强制换行 | 空标签，无闭合 | 诗句排版 |
<hr> |
水平分隔线 | 默认灰色实线 | 章节分隔符 |
<pre> |
预格式化文本 | 保留空格/缩进 | 代码展示 |
<code> |
代码片段高亮 | 等宽字体 | JavaScript示例 |
<kbd> |
键盘输入表示 | 模拟按键样式 | 快捷键说明 |
<var> |
变量名称标注 | 斜体显示 | 数学公式变量 |
<samp> |
程序输出样本 | 等宽字体 | 控制台日志 |
标题与强调标签
| 作用 | 层级关系 | 注意事项 | |
|---|---|---|---|
<h1>~<h6> |
标题分级（重要性递减） | h1最高级别，h6最低 | 一个页面只用1次h1 |
<strong> |
加粗且语义强化 | 比<b>更具SEO意义 |
重要术语 |
<em> |
斜体且语义强调 | 比<i>更符合语义化 |
重点概念 |
<mark> |
高亮标记 | 黄色背景（浏览器默认） | 搜索关键词标注 |
<small> |
小字号降格 | 常用于版权信息 | 页脚声明 |
<sub>/<sup> |
下标/上标 | 数学公式专用 | H₂O ↔ H2O |
记忆技巧：将<h1>想象成报纸头条，<strong>是老师划重点，<em>是课本中的黑体字。
列表类标签（数据组织）
| 类型 | 子标签 | 特殊属性 | 适用场景 | |
|---|---|---|---|---|
<ul> |
无序列表 | <li> |
type=”circle/disc” | 购物清单 |
<ol> |
有序列表 | <li> |
reversed, start | 操作步骤 |
<dl> |
定义列表 | <dt>+<dd> |
术语解释表 | |
<menu> |
命令菜单 | <li> |
label | 已废弃（改用nav） |
<dir> |
目录列表 | <li> |
compact | 已废弃（改用list） |
对比记忆：<ul>像超市货架（无顺序），<ol>像排队叫号（有顺序），<dl>像字典条目（名词+详解）。
链接与多媒体标签（资源整合）
超链接体系
| 作用 | 核心属性 | 扩展功能 | |
|---|---|---|---|
<a> |
锚点/跳转 | href, target, title | download, hreflang |
<link> |
外部资源关联 | rel, href | prefetch, pingback |
<area> |
图像地图热点区域 | shape, alt, href | client-side image map |
<base> |
全局链接基准路径 | href | 简化绝对路径书写 |
重点提示：<a href="#section">可实现页面内锚点跳转，target="_blank"在新窗口打开链接。
多媒体嵌入
| 作用 | 必要属性 | 可选属性 | 备选方案 | |
|---|---|---|---|---|
<img> |
图片 | src, alt, width/height | loading=”lazy” | <picture> |
<audio> |
音频 | controls, src | loop, muted | <source>子标签 |
<video> |
视频 | poster, width/height | autoplay, fullscreen | <track>字幕 |
<embed> |
（如PDF） | src, type | width, height | <object> |
<source> |
媒体源备选方案 | media, srcset | sizes, types | 配合<audio>/<video> |
安全规范：所有媒体标签必须设置alt属性，<video>建议添加poster占位图。
表格类标签（数据结构化）
| 作用 | 常用属性 | 进阶用法 | |
|---|---|---|---|
<table> |
表格容器 | border, cellspacing | responsive布局 |
<tr> |
行 | rowspan跨行合并 | |
<td> |
数据单元格 | colspan, rowspan | th替代实现表头 |
<th> |
表头单元格 | scope=”col/row/colgroup”` | abbr缩写提示 |
<caption> |
align=”top/bottom” | WAI-ARIA无障碍支持 | |
<thead> |
表头区域 | CSS斑马纹样式 | |
<tbody> |
主体数据区域 | JavaScript动态操作 | |
<tfoot> |
表尾汇总区域 | 财务报表合计行 | |
<colgroup> |
列分组 | span | 统一设置多列样式 |
<col> |
单列样式定义 | width | 百分比/像素精确控制 |
最佳实践：始终用<th>标识表头，scope属性明确关联方向，复杂表格建议添加caption。
表单类标签（用户交互）
输入控件家族
| 作用 | type值举例 | 特有属性 | |
|---|---|---|---|
<input> |
通用输入框 | text, password, email, number, date, range, color, file, submit, reset, button, hidden | maxlength, pattern, required, placeholder |
<select> |
下拉选择框 | multiple | size, autofocus |
<option> |
选项项 | selected, disabled | label辅助文本 |
<optgroup> |
选项分组 | label | label样式定制 |
<datalist> |
自动补全建议列表 | list属性绑定input | |
<output> |
计算结果输出 | for, form | name属性关联计算逻辑 |
高级表单元素
| 作用 | 核心属性 | 特殊功能 | |
|---|---|---|---|
<textarea> |
多行文本输入 | rows, cols, wrap | spellcheck拼写检查 |
<button> |
自定义按钮 | type=”button/submit/reset” | formaction跳转指定表单 |
<fieldset> |
表单分组 | legend标题装饰 | |
<label> |
表单控件标签 | for=”id” | click聚焦提升体验 |
<legend> |
fieldset标题 | align=”left/right/top/bottom” | accessibility适配 |
<meter> |
计量器进度条 | min, max, low, high, optimum, value | CSS动画效果 |
<progress> |
任务进度条 | value, max | JavaScript动态更新 |
验证机制：利用required、pattern="正则表达式"、min/max等属性实现前端校验。
语义化标签（结构化文档）
| 作用领域 | 典型应用场景 | 替代传统标签 | |
|---|---|---|---|
<header> |
页眉区域 | logo+导航栏 | <div class="header"> |
<nav> |
主要导航区 | 主菜单/面包屑导航 | <div class="nav"> |
<main> |
文章/产品展示区 | <div class="content"> |
|
<article> |
独立文章内容 | 博客帖子/新闻报道 | <div class="post"> |
<section> |
专题板块 | 章节/功能模块 | <div class="section"> |
<aside> |
侧边栏/补充内容 | 广告/相关推荐 | <div class="sidebar"> |
<footer> |
页脚区域 | 版权信息/友情链接 | <div class="footer"> |
<figure> |
图文混排容器 | 图表/插图+说明文字 | <div class="fig"> |
<figcaption> |
figure的标题/说明 | <p class="caption"> |
|
<time> |
日期时间 | datetime属性 | machine可读时间格式 |
<address> |
联系地址 | itemprop=”address” | schema.org结构化数据 |
SEO价值：搜索引擎能更好理解页面结构,提升排名。
其他实用标签
| 作用 | 使用场景 | 注意事项 | |
|---|---|---|---|
<div> |
通用块级容器 | 布局分区 | CSS定位主力 |
<span> |
内联容器 | 文字局部样式 | inline-block转换 |
<canvas> |
图形绘制 | 数据可视化/游戏开发 | getContext(‘2d’) API |
<svg> |
矢量图形 | iconfont/复杂图形 | viewBox坐标系 |
<template> |
客户端模板 | JavaScript动态渲染 | content未渲染时隐藏 |
<slot> |
Web组件插槽 | Vue/React框架 | name属性命名插槽 |
<details> |
可折叠详情框 | Q&A交互设计 | open属性默认展开 |
<summary> |
details的标题 | click事件触发展开 | |
<wbr> |
可选换行点 | longwordbreak机会 | print媒体有效 |
记忆策略与工具推荐
- 分类记忆法：按功能模块分组记忆（如表单→输入控件→按钮）
- 对比记忆法：区分相似标签（
<strong>vs<b>,<em>vs<i>） - 实践强化法：通过仿站项目重复使用标签（推荐Bootstrap官网）
- 可视化工具：① DevTools元素审查 ② Chrome插件”WhatRuns”查看真实网站标签使用频率
- 速查手册：打印MDN Web Docs的HTML参考页随身携带
常见问题解答（FAQs）
Q1: 我总记不住某些标签是否需要闭合？怎么办？
A: 遵循两条原则：① 大多数标签需要闭合（如<p></p>）；② 空标签永不闭合（如<img />, <br />）,例外情况可通过IDE插件自动补全检测。
Q2: 为什么有时写的标签在浏览器中显示不正常？
A: 常见原因：① 标签嵌套错误（如<li><ul>非规嵌套）；② 缺少必需属性（如<img>未加alt）；③ CSS冲突覆盖了默认样式，建议使用浏览器开发者工具（F12
