很多 HTML 标签都是英文单词缩写 / 简写，看懂全称，你就能立刻理解这个标签是干嘛的，再也不用死记硬背！
重点说明：
- HTML 标签写代码只用简写，不能写全称！浏览器只识别简写。
- 全称只是用来理解含义，帮助记忆。
- 所有标签大小写不敏感，规范全部使用小写
<p>不要<P>。
下面分类整理：文档结构、文本、链接图像、列表、表格、容器、表单、头部、脚本等。
一、页面基础骨架标签（最核心）
html全称：HyperText Markup Language 中文：超文本标记语言 作用：网页根标签，所有内容包裹在里面
html
<html></html>head全称：head（本身就是完整单词，不是缩写） 中文：头部 作用：存放页面配置，页面不可见内容
html
<head></head>body全称：body（完整单词） 中文：身体、主体 作用：网页可见内容全部放这里
html
<body></body>meta全称：metadata 中文：元数据（描述数据的数据） 作用：字符编码、网页描述、移动端配置
html
<meta charset="UTF-8">title全称：title（完整单词） 中文：标题 作用：浏览器标签栏文字
html
<title>网页标题</title>!DOCTYPE全称：Document Type 中文：文档类型 作用：声明这是 HTML5 文档，必须放在第一行
html
<!DOCTYPE html>二、文本、标题相关标签
h1 ~ h6全称：heading 中文：标题 h1 一级标题，h2 二级...h6 六级
h = heading
html
<h1>一级大标题</h1>
<h2>二级标题</h2>p全称：paragraph 中文：段落
html
<p>这是一段文字</p>br全称：break 中文：打断、换行 作用：强制文字换行（单标签）
html
第一行<br>第二行hr全称：horizontal rule 中文：水平分隔线 horizontal = 水平；rule = 线条
html
<hr>三、文本语义格式化标签
b全称：bold 中文：加粗（仅视觉加粗）
html
<b>粗体文字</b>strong完整单词 strong，不是缩写 含义：强烈重要内容（语义加粗，推荐优先使用）
html
<strong>重要警告</strong>i全称：italic 中文：斜体（视觉斜体）
html
<i>斜体文字</i>em全称：emphasis 中文：强调（语义斜体）
html
<em>需要重点强调</em>del全称：delete 中文：删除，文字带删除线
html
<del>旧价格</del>ins全称：insert 中文：插入文字，带下划线
html
<ins>新价格</ins>sub全称：subscript 中文：下标 示例 H₂O
html
H<sub>2</sub>Osup全称：superscript 中文：上标 示例 2³
html
2<sup>3</sup>mark完整单词：mark，标记 作用：文字高亮底色
html
<mark>高亮文字</mark>四、链接、图像标签
a全称：anchor 中文：锚 历史来源：早期用来页面锚点，现在做超链接 属性hrefhref = hypertext reference 超文本引用
html
<a href="https://www.baidu.com">百度</a>img全称：image 中文：图片 属性： src = source 资源地址 alt = alternative 替代文本（图片加载失败显示）
html
<img src="cat.jpg" alt="小猫">五、列表标签
ul全称：unordered list 中文：无序列表（圆点列表） 内部只能放li
html
<ul>
<li>苹果</li>
</ul>ol全称：ordered list 中文：有序列表（数字序号列表）
html
<ol>
<li>第一步</li>
</ol>li全称：list item 中文：列表项（ul、ol 里面的每一条内容）dl全称：definition list 中文：定义列表dt全称：definition term 中文：定义名词 / 术语dd全称：definition description 中文：术语描述解释
html
<dl>
<dt>HTML</dt>
<dd>超文本标记语言</dd>
</dl>六、表格标签
table完整单词 table：表格tr全称：table row 中文：表格的一行
html
<tr></tr>td全称：table data 中文：表格普通单元格th全称：table header 中文：表格表头单元格（自动加粗居中）
拓展属性： colspan = column span 跨列 rowspan = row span 跨行
html
<table border="1">
<tr>
<th>姓名</th>
<td>小明</td>
</tr>
</table>七、布局容器标签
div全称：division 中文：分区、区块 网页布局最常用的盒子（块级元素，独占一行）
html
<div>盒子内容</div>span完整单词 span：跨度、小段范围 行内容器，包裹少量文字，不会自动换行
html
<span>一小段文字</span>八、表单相关标签（后期会学，先记）
form全称：form （完整单词）表单 属性actionaction = 执行动作，表单提交地址input全称：input（完整单词）输入框label完整单词 label：标签，绑定输入框文字select完整单词：下拉选择框option全称：option：选项（下拉框里面条目）textarea全称：text area，文本区域（多行输入框）
九、脚本与样式标签
script完整单词 script：脚本 作用：嵌入 JavaScript 代码
html
<script>alert('你好')</script>link完整单词 link：链接 用来引入外部 CSS 文件 属性rel= relationship（关系）
html
<link rel="stylesheet" href="style.css">style完整单词 style：样式 书写内部 CSS
html
<style>p{color:red;}</style>noscriptno + script 没有脚本；浏览器关闭 JS 时显示内容
十、语义化标签（HTML5 新增，拓展记忆）
header头部footer页脚nav= navigation 导航栏article文章section区块、章节aside侧边栏
html
<nav>导航菜单</nav>
<header>页面头部</header>十一、非常重要：常用属性全称汇总（写代码天天见）
| 属性 | 全称 | 含义 |
|---|---|---|
href |
Hypertext Reference | 超文本地址 |
src |
Source | 资源路径 |
alt |
Alternative | 替代文本 |
id |
Identifier | 唯一标识 |
class |
Class | 类名 |
rel |
Relationship | 关系 |
target |
Target | 目标窗口 |
charset |
Character set | 字符集 |
✅新手记忆技巧（重点！）
- 看到 h → heading 标题
- 看到 p → paragraph 段落
- 看到 li → list item 列表项
- 看到 tr → table row 表格行
- 看到 td → table data 单元格
- 看到 ul/ol → 无序 / 有序列表
- 看到 div → division 区块盒子
- 看到 a → anchor 锚（链接）
- 看到 img → image 图片
❌新手高频误区（一定要看）
- 代码不能写全称！ 错误：
<paragraph>文字</paragraph>正确：<p>文字</p>浏览器只识别简写标签，写全称直接失效！ - 不要强行以为所有标签都是缩写，
body、style、script、span、mark、form本身就是完整英文单词，没有简写。
综合练习示例（结合全称理解代码）
html
<!DOCTYPE html> <!-- Document Type 文档类型 -->
<html> <!-- HyperText Markup Language -->
<head>
<meta charset="UTF-8"> <!-- metadata 元数据 -->
<title>标签全称演示</title> <!-- title标题 -->
</head>
<body>
<h1>heading一级标题</h1>
<p>paragraph段落。<br>break换行</p>
<hr> <!-- horizontal rule分割线 -->
<ul> <!-- unordered list无序列表 -->
<li>list item列表项</li>
</ul>
<a href="https://www.baidu.com">anchor超链接</a>
<img src="demo.jpg" alt="alternative替代文字">
<div>division布局盒子
<span>span行内小段文字</span>
</div>
</body>
</html>