上一篇
如何记住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
