8000字回顾所有的HTML标签~
前端开发，无论H5，C3，JS还是JQuery、Vue、Angular等框架亦或Ajax、Webpack等技术工具，多数理解容易记忆难，虽然现在查询资料非常方便，但如果在学习时就带着使用的目的去了解，可能更为容易建议深刻的记忆。本站回归H5中大部分还未被弃用的标签~
目录
一、文档结构标签
1.!DOCTYPE
2.html
3.head
4.title
5.body
6.meta
7.link
8.style
9.script
10.noscript
二、语义化结构标签
1.header
4.main
5.article
6.section
7.aside
8.address
9.h1-h6
三、内容分组标签
1.div
2.span
3.p
4.hr
5.br
6.pre
7.blockquote
8.q
9.figure
10.figcaption
四、文本格式化标签
1.em
2.strong
3.i
4.b
5.u
6.s
7.mark
8.small
9.sub/sup
10.time
五、列表标签
1.ol
2.ul
3.li
4.dl
5.dt
6.dd
六、表格标签
1.table
2.caption
3.thead
4.tbody
5.tfoot
6.tr
7.th
8.td
9.colgroup
10.col
七、表单标签
1.form
2.input
3.textarea
5.label
6.select
7.option
8.optgroup
9.fieldset
10.legend
11.datalist
12.output
13.progress
14.meter
八、多媒体标签
1.audio
2.video
3.source
4.track
5.embed
6.object
7.iframe
8.img
九、交互与动态内容标签
1.details
2.summary
3.dialog
4.canvas
5.svg
十、其他标签
1.a
2.map
3.area
4.template
5.slot
6.bdi
7.wbr
8.ruby
9.rt
10.rp
十一.冷门标签
1.bdo
2.ins和delete
3.addr
4.dfn
5.kbd
6.samp
7.var
一、文档结构标签
直接建立一个空白的txt文件，改掉后缀~
1.!DOCTYPE
声明文档类型为 HTML5。没什么可说的，必选项~
2.html
根元素，包裹整个 HTML 文档。lang属性用于定义文档的语言（如 lang="en" 或 lang="zh-CN"）。通常情况下设置为zh-CN即可：
<html lang="zh-CN">注意这是双标签~
3.head
包含元数据（如标题、样式表链接、字符集声明等）。没什么属性，仅仅作为容器包含其他元素。也是双标签。
4.title
定义文档标题，显示在浏览器标签页上。在head标签内部，同样是双标签，没什么属性：
<title>Lyric群青总结</title>5.body
包含网页的可见内容。双标签，包含一些属性，但是早已过时用CSS代替，了解一下即可：
6.meta
单标签，定义文档的元数据（如字符集 charset="UTF-8"、视口设置 viewport）。
- charset：指定字符编码，一般设置为UTF-8即可
- http-equiv：模拟 HTTP 头部，用于模拟 HTTP 响应头（即服务器返回的 HTTP 头部字段），允许 HTML 文档直接控制某些浏览器行为。最常见的用途是 页面重定向（刷新跳转） 和 内容安全策略（CSP）。
- 视口设置（响应式开发必备），作用是确保网页能够正确适配不同尺寸的移动设备屏幕，避免默认的桌面版布局在手机上显示过小或需要手动缩放。没有正确设置 viewport 的网页在移动端会显得“缩小”，而正确设置后内容会直接适应屏幕宽度，显著提升用户体验。
<meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="Content-Security-Policy" content="default-src 'self'">7.link
链接外部资源（如 CSS 文件、图标）。用于引入图标和外联样式表等等：
这里博主直接使用了绝对路径：
<link rel="icon" href="D:\QQ浏览器暂存盘\navigation.png">8.style
定义内部 CSS 样式。在H5中基本上废弃了全部属性，默认就是CSS样式。双标签。
9.script
单标签：嵌入或引用 JavaScript 代码。
本帖不详细关注加载脚本的性质，只关注网页结构构造。
10.noscript
当浏览器不支持脚本时显示的内容。无属性，仅作为容器：
<noscript><p>请启用 JavaScript 以获得完整功能！</p>
</noscript>如上将一个基础的html文件搭建好了~
二、语义化结构标签
HTML5 引入了一系列语义化标签，这些语义化标签不仅使HTML结构更清晰，也有助于搜索引擎优化(SEO)和辅助技术(如屏幕阅读器)更好地理解网页内容。
1.header
页面或区块的页眉——标题、Logo、导航。支持所有全局属性（如 class, id, style 等）。同样支持全局属性。
2.footer
页面或区块的页脚——版权、联系方式等。同样支持全局属性。
3.nav
表示导航链接的集合。同样支持全局属性。
4.main
表示文档的主要内容，一个页面应该只有一个 <main> 元素。同样支持全局属性。
5.article
表示独立的自包含内容，如博客文章、新闻故事等。同样支持全局属性。
6.section
表示文档中的一个主题内容分组。支持所有全局属性。
7.aside
表示与周围内容相关但不是主要内容的部分，如侧边栏、广告等。支持所有全局属性
8.address
表示文档或文章的联系信息。支持所有全局属性。
9.h1-h6
标题标签，按照h1-h6逐渐变小。
将上述标签融汇贯通一下（这里只粘贴了body里面的内容）：
<header><h1>职业足球联赛</h1><nav><ul><li><a href="/">主机首页</a></li><li><a href="https://jslhyh32.blog.csdn.net">关于作者</a></li></ul></nav></header><main><article><header><h2>德国足球甲级联赛</h2><p>作者: Lyric群青</p></header><section><h3>拜仁慕尼黑</h3><p>拜仁慕尼黑足球俱乐部注册协会是一家位于德国巴伐利亚州首府慕尼黑市的综合体育运动协会，成立于1900年2月27日，旗下最著名的是拜仁慕尼黑足球俱乐部（Fußball-Club Bayern München，简称“拜仁慕尼黑”或“拜仁”）。</p></section><section><h3>多特蒙德</h3><p> 多特蒙德足球俱乐部（Borussia Dortmund），成立于1909年12月19日，是一家位于德国北莱茵-威斯特法伦（北威）州多特蒙德市的足球俱乐部，绰号“大黄蜂”，主场西格纳尔·伊杜纳公园球场。</p></section><footer><p>标签: 足球, 德甲</p></footer></article><aside><h3>门票购买</h3><ul><li><a href="#">24/25赛季德甲</a></li><li><a href="#">24/25赛季欧冠</a></li></ul></aside></main><footer><p>© 2025 Lyric群青</p><address>联系方式: <a href="#">contact@example.com</a></address></footer>格式方面没有太大的效果，但对于开发者之间的协调工作增加了友好度。
三、内容分组标签
1.div
通用容器，用于分组和布局，可以理解为盒子，无特定语义。双标签~
2.span
行内（inline）容器，用于对文本或小部分内容进行样式或脚本控制。属性方面和div相同，也是双标签~
浅显地说，span作为行内元素，通常用于多个元素放在一行的情况；而div作为块级元素，常用于一个元素放一行的情况。
3.p
定义段落，默认有上下边距。双标签，不建议使用属性，而是使用CSS修改样式~
4.hr
水平分割线，用于内容分隔。单标签，同样建议使用CSS。另外插句题外话，因为现在是H5的版本，允许单标签不闭合。当然写成自闭和也是可以的，即加反斜杠。但xml中必须自闭合。作为新版本的特性，建议单标签不要写反斜杠~
5.br
强制换行，无闭合标签。
6.pre
保留文本中的空格和换行（常用于代码或格式化文本）。同样可使用id等CSS属性。通常用于保留原文本格式的场景~
7.blockquote
引用大段内容（浏览器默认缩进）
搜索引擎 会识别 <blockquote>，可能认为你的内容更权威（因为引用了可靠来源）。
屏幕阅读器 会提示用户这是引用内容，提升可访问性。
<blockquote cite="https://example.com/source"><p>引用的文字内容...</p>
</blockquote>8.q
用于表示行内短引用，浏览器通常会自动在内容前后添加引号（不同语言环境可能显示不同样式的引号）。
9.figure
包裹独立内容（如图片、代码、图表等），通常与 <figcaption> 配合使用。
10.figcaption
为 <figure> 提供标题或说明。
总结对比一下：
| 标签 | 类型 | 用途 | 关键属性 |
|---|---|---|---|
<div> | 块级 | 通用容器 | class, id, style |
<span> | 行内 | 小范围样式控制 | class, id, style |
<p> | 块级 | 段落 | class, id, style |
<hr> | 块级 | 水平分割线 | 无（样式用 CSS） |
<br> | 行内 | 强制换行 | 无 |
<pre> | 块级 | 保留格式文本 | class, id, style |
<blockquote> | 块级 | 长引用 | cite |
<figure> | 块级 | 独立内容容器 | class, id, style |
<figcaption> | 块级 | <figure> 的标题 | class, id, style |
然后在之前的demo上做出相应的修改：
四、文本格式化标签
1.em
表示需要强调的文本（默认斜体）。
2.strong
表示非常重要或紧急的内容（默认加粗）。
3.i
纯斜体样式，常用于技术术语、外文短语等。
4.b
纯加粗样式，无语义强调。所谓的语义强调即为b和i这样的标签本身并不能直接给出明确的意义，
因此要优先语义化标签：如 <em>、<strong>、<time> 能为屏幕阅读器和SEO提供更多信息。
5.u
下划线文本（谨慎使用，易与超链接混淆）。
6.s
删除线，表示不再准确或有效的内容。
7.mark
高亮标记（默认黄色背景），用于突出显示关键词。如果想修改颜色使用CSS的background-color即可~
8.small
小号字体，常用于免责声明、注释等。
9.sub/sup
下标（如化学式）或上标（如幂运算）。这个算是有些实际意义的操作：
<div>JSL<sub>1325</sub></div>其实用LateX的一些语法更为方便，需要在 <head> 标签中引入 MathJax 库。
10.time
标记时间或日期，datetime 属性提供机器可读格式（如 YYYY-MM-DD）。
整体上比较简单，都是写辅助文档格式化的标签~
五、列表标签
1.ol
-
表示项目的有序集合，通常渲染为带编号的列表。
-
子元素只能是
<li>标签。
存在如下属性：
2.ul
-
表示项目的无序集合，通常渲染为带项目符号的列表。
-
子元素只能是
<li>标签。
3.li
-
表示列表中的一个项目。
-
必须放在
<ul>或<ol>中。
在ol中，可通过value属性设置单个li的编号~
4.dl
-
包含术语及其描述的列表。
-
直接子元素只能是
<dt>或<dd>。
5.dt
-
表示描述列表中的术语/标题。
-
必须放在
<dl>中。 -
后面通常跟着一个或多个
<dd>。
6.dd
和dt的关系有些像表格中的表头和表项~
-
表示描述列表中术语的描述内容。
-
必须放在
<dl>中。 -
前面通常有一个
<dt>。
同样也很简单，dl系列的列表适用于术语的专项描述~
六、表格标签
1.table
定义表格容器。
2.caption
表格标题，显示在表格上方。
3.thead
分组表格内容，便于样式和脚本操作。和下面的tbody和tfoot成套使用，实际上是表格专属的语义增强标签，均支持通用HTML属性（如 class, id）
4.tbody
表格主体数据。
5.tfoot
汇总或脚注行（即使放在代码最前也会渲染在底部）。
6.tr
定义表格中的一行。
7.th
表头单元格（默认加粗居中）。
8.td
普通数据单元格。
需要注意的是，横向还是纵向的表格，可以通过自定义表头位置的方式来实现~
9.colgroup
批量定义列样式（如宽度、背景色）。包裹一组列~
10.col
定义单个列的属性（无结束标签）。
使用标准：
-
语义化：用
<thead>、<tbody>分组内容。 -
无障碍：为复杂表格添加
scope或headers。 -
样式分离：避免使用
border、bgcolor等废弃属性，改用CSS。 -
响应式设计：对小屏幕表格考虑使用
overflow-x: auto。
七、表单标签
用户与服务器交互的关键元素，涉及到最多的标签数量：
1.form
2.input
输入控件，关键属性type决定该input控件为哪种类型：
其他关键属性：
3.textarea
多行文本输入框。
4.button
可点击按钮，同样由type属性决定按钮的值：
button类型的普通按钮可用于自定义JavaScript，有时亦可使用其他控件绑定回调事件。
5.label
关联表单元素的标签（提升可访问性）。使用时需要用 for 属性绑定输入框的 id，或包裹输入元素。
6.select
下拉列表。
7.option
下拉列表中的每一项~
8.optgroup
用于给某一组列表项加一个标签分类~
9.fieldset
表单元素分组~
10.legend
定义分组标题~
<fieldset><legend>登录信息</legend><input type="text" name="username">
</fieldset>同样在视觉上和语义上便利了用户和开发者~
11.datalist
为 <input> 提供预定义选项列表（类似搜索提示）。需要用input的 list 属性关联input和datalist的id属性。
<input list="browsers" name="browser">
<datalist id="browsers"><option value="拜仁慕尼黑"><option value="多特蒙德">
</datalist>12.output
显示计算结果（需配合JS）。
13.progress
任务进度条（动态）。
14.meter
静态标量值（如磁盘用量）。
八、多媒体标签
1.audio
在网页嵌入音频~
2.video
嵌入视频：
3.source
为前两者资源提供备选文件格式，确保浏览器兼容性~
4.track
为视频或音频添加字幕、说明等。
5.embed
传统嵌入插件内容（如 Flash），现代浏览器已弃用，建议改用 <iframe> 或原生 HTML5 媒体标签。
6.object
传统嵌入插件内容（如 Flash），现代浏览器已弃用，建议改用 <iframe> 或原生 HTML5 媒体标签。
7.iframe
嵌入其他网页（如地图、视频等）。
需要注意：
8.img
嵌入图片：
九、交互与动态内容标签
1.details
可折叠的详细信息块。存在属性Open（布尔属性）：若存在，默认展开内容。
2.summary
为 <details> 定义可见标题。在detail内嵌的内容中必须位于最前面~
<details><summary>1+1=?点击查看答案~</summary><p>1+1=2</p></details>3.dialog
对话框或模态窗口。需要注意浏览器兼容情况~
4.canvas
绘图画布（需 JavaScript 操作）。
5.svg
嵌入矢量图形（使用 SVG 语法）。
十、其他标签
1.a
超链接（href 定义目标 URL）。
a还可以和别的标签比如内容分组标签进行嵌套使用。
2.map
定义图像映射，与<img>和<area>配合，定义可点击区域。name为映射命名，与<img>的usemap关联。
3.area
定义图像映射的可点击区域。
4.template
定义可重复使用的 HTML 模板。
5.slot
Web 组件的占位符（与 Shadow DOM 配合）。name：命名插槽（与自定义组件内容匹配）。
6.bdi
隔离双向文本（如混合语言内容）。用于隔离一段可能方向性不确定的文本，使其不影响周围文本的布局方向。
7.wbr
建议浏览器在长单词或URL中可换行的位置。
8.ruby
注音文本（如日文假名，配合 <rt> 使用）。
9.rt
为 <ruby> 添加注音。
<ruby>漢 <rp>(</rp><rt>hàn</rt><rp>)</rp>
</ruby>10.rp
在不支持 <ruby> 的浏览器中显示后备括号。
十一.冷门标签
1.bdo
双标签，用于控制文字的展示方向。
<bdo dir="rtl">这段文字将从右向左显示</bdo>但更好的方式是用CSS的相关属性：
<p style="direction: rtl;">这段文字将从右向左显示</p>2.ins和delete
<ins> 是 HTML 中用于标记文档中插入内容的标签，通常与 <del> 标签（表示删除内容）一起使用，用于显示文档的修改记录或版本差异。
<p>会议时间：<del datetime="2023-05-10">5月10日</del><ins datetime="2023-05-12">5月12日</ins>
</p>3.addr
定义缩写。当光标长置时会展现title中放置的全名~
<abbr title="HyperText Markup Language">HTML</abbr> 是用于创建网页的标准标记语言。4.dfn
<dfn> 是 HTML 中用于标记 术语定义 的标签（全称 "definition"），通常用于在文档中首次引入或解释某个专业术语、缩写词或概念。浏览器默认会以斜体显示（但可通过 CSS 修改）。
<p><dfn>HTML</dfn> 是超文本标记语言的缩写。</p>5.kbd
kbd是 HTML 中用于标记 键盘输入 或 用户操作的按键 的标签（全称 "keyboard"）。它通常用于技术文档、教程或说明中，表示需要用户按下的键或组合键。浏览器默认会以等宽字体（monospace）显示，并可能添加边框或背景样式。
<p>按 <kbd>Enter</kbd> 键确认。</p>6.samp
是 HTML 中用于标记 计算机程序输出 或 示例输出结果 的标签（全称 "sample"）。它通常用于展示程序运行结果、命令行输出或系统生成的消息。浏览器默认会以等宽字体（monospace）显示。
<p>程序输出：<samp>Hello, World!</samp></p>7.var
是 HTML 中用于标记 变量 或 数学表达式中的变量 的标签（全称 "variable"）。它通常用于编程文档、数学公式或表示可替换的占位符内容。浏览器默认会以斜体显示。
<p>解方程：<var>x</var> + 2 = 5</p>8. menu
是 HTML 中用于定义命令菜单或工具栏的标签，适合创建上下文菜单、工具栏或表单命令列表。已被大多数现代浏览器弃用~
<menu><button type="button" onclick="save()">保存</button><button type="button" onclick="load()">加载</button><button type="button" onclick="print()">打印</button>
</menu>如上即将所有的标签总结完毕。