一、HTML 标签核心规则（先记基础）
在学习具体标签前，先明确通用规则，避免写错：
大部分标签成对出现：<标签>内容</标签>（如
段落
）；少数标签自闭合：<标签 />（如、
）；
标签可加属性：<标签 属性="值">内容</标签>（如 百度）；
标签不区分大小写，但规范写法是小写（如
而非
）。
二、常用 HTML 标签分类（按功能整理，重点记）
- 页面结构标签（必背，构成网页骨架）
这类标签定义网页的整体结构，是所有 HTML 文件的基础。
标签 作用 示例
<!DOCTYPE html> 声明文档类型为 HTML5（必须放在第一行） <!DOCTYPE html>
头部，存放元信息（不显示在页面）
设置元数据（编码、视口等）
主体，所有可见内容都写在这里
正文
这类标签负责文字的格式、层级，是页面文本的核心。
标签 作用 示例
-
标题（h1 最大，h6 最小，一个页面建议 1 个 h1）
一级标题
三级标题
段落（自动换行 + 上下间距）
这是一个独立段落
强制换行（单标签）
第一行
第二行
水平线（分隔内容，单标签）
章节1
内容
文字加粗（强调语义，推荐） 重要内容
文字斜体（强调语义） 注释内容
文字下划线 带下划线的文字
行内容器（包裹小段文字，无默认样式）
姓名：张三
块级容器（独占一行，用于布局）
模块标题
模块内容
这类标签用于添加链接、图片、音频 / 视频等外部内容。
标签 作用 核心属性 & 示例
超链接（跳转页面 / 锚点 / 邮箱） href（跳转地址）、target（打开方式）
淘宝
插入图片（单标签） src（图片路径）、alt（替代文本）
插入音频 src、controls（显示控制栏）
插入视频 src、controls、width（宽度）
用于展示一组相关内容，分有序、无序、定义列表三种。
标签 作用 示例
- 无序列表（默认圆点）
- 苹果
- 香蕉
- 有序列表（默认数字）
- 第一步
- 第二步
- 列表项（必须嵌套在 ul/ol 里） 见上面 ul/ol 示例
-
定义列表（名词 + 解释）
- HTML
- 超文本标记语言
-
定义术语（定义列表的标题） 见上面 dl 示例
- 定义描述（术语的解释） 见上面 dl 示例
-
定义列表（名词 + 解释）
- 表格标签（展示结构化数据）
用于制作表格，需配合使用才能完成结构。
标签 作用 示例
表格容器
...
表头单元格（默认加粗居中） 见上面 tr 示例
普通单元格 见上面 tr 示例
表格头部（可选，语义化） 姓名 表格主体（可选，语义化） 张三
用于制作登录、注册、搜索等交互表单，是前端交互的核心。
标签 作用 核心属性 & 示例
表单容器（提交数据必备） action（提交地址）、method（提交方式）
...
输入框（单标签，类型多样） type（类型：text/button/checkbox 等）
多行文本输入框 <textarea rows="5" cols="30">请输入内容
下拉选择框 北京上海
标签（关联输入框，提升易用性） 姓名：
这类标签无默认样式，但能明确内容含义，利于 SEO 和代码维护（替代纯
布局）。
标签 作用 示例
页面 / 模块头部（导航、标题） 导航栏
导航栏（菜单、链接组） 首页
页面主要内容（唯一） 文章
独立文章 / 内容块
章节 / 区块（分组内容）
页面 / 模块底部（版权、联系方式） 版权所有 © 2026
三、新手学习标签的技巧
先记高频标签：优先掌握文本排版、链接、图片、表格这些日常最常用的，语义化、表单可后续逐步学习；
边写边记：在 VS Code 中新建 HTML 文件，把每个标签写一遍并运行，看实际效果（比如写时改src路径，看图片是否显示）；
查手册：记不住属性时，查 MDN（https://developer.mozilla.org/zh-CN/docs/Web/HTML），比如的type有哪些值，不用死记硬背。
总结
HTML 标签按功能分类记忆更高效，核心是先掌握页面骨架、文本排版、链接 / 图片这些基础；
标签的核心是 “语义”，比如
标签 作用 示例
页面 / 模块头部（导航、标题） 导航栏
导航栏（菜单、链接组） 首页
页面主要内容（唯一） 文章
独立文章 / 内容块
文章标题
章节 / 区块（分组内容）
章节1
内容
页面 / 模块底部（版权、联系方式） 版权所有 © 2026
三、新手学习标签的技巧
先记高频标签：优先掌握文本排版、链接、图片、表格这些日常最常用的，语义化、表单可后续逐步学习；
边写边记：在 VS Code 中新建 HTML 文件，把每个标签写一遍并运行，看实际效果（比如写时改src路径，看图片是否显示）；
查手册：记不住属性时，查 MDN（https://developer.mozilla.org/zh-CN/docs/Web/HTML），比如的type有哪些值，不用死记硬背。
总结
HTML 标签按功能分类记忆更高效，核心是先掌握页面骨架、文本排版、链接 / 图片这些基础；
标签的核心是 “语义”，比如
不只是 “大字体”，更是 “页面主标题”，
是 “段落” 而非单纯 “换行”；
成对标签要闭合，自闭合标签加/，属性值要加引号，这些规范能避免大部分基础错误。
