HTML学习笔记：超详细的 HTML 标签体系与应用指南（2026最新实用版）
HTML（HyperText Markup Language）是网页的骨架，2026年主流仍是 HTML5（Living Standard 持续演进），核心标签数量稳定在 约110-145个（视是否计入废弃/极少用标签），其中真正高频使用的只有 30-40个。
本笔记按实际使用频率 + 功能分类组织，便于速查+记忆。重点掌握：语义标签（SEO & 无障碍）、结构标签、文本/格式、媒体/嵌入、表单、表格、元数据。
1. 文档骨架（必须掌握，出现在每个页面）
<!DOCTYPE html> <!-- 声明文档类型，永远写在第一行 -->
<html lang="zh-CN"> <!-- 根元素，lang属性推荐写（辅助屏幕阅读器/SEO） -->
<head>
<meta charset="UTF-8"> <!-- 字符编码，必写 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- 移动端适配，必写 -->
<title>页面标题</title> <!-- 浏览器标签页标题，必写 -->
<link rel="stylesheet" href="style.css"> <!-- 外部CSS -->
<script src="script.js" defer></script> <!-- 外部JS，推荐defer/async -->
</head>
<body>
<!-- 所有可见内容写在这里 -->
</body>
</html>2. 页面结构语义标签（HTML5核心，强烈推荐！SEO+可访问性+维护性翻倍）
这些标签取代了过去的万能 <div class="header">，让代码有“含义”。
| 标签 | 含义（语义） | 典型用法场景 | 常见属性示例 |
|---|---|---|---|
<header> | 引言区 / 头部（logo + 导航 + 标题） | 网站/文章顶部 | role=”banner”（可选） |
<nav> | 导航链接区 | 主菜单、侧边栏导航、面包屑 | aria-label=”主导航” |
<main> | 文档主要内容（唯一一个！） | 页面核心内容区，不能放重复的header/footer | — |
<article> | 独立可复用内容（可单独拆分） | 博客文章、新闻、论坛帖、卡片 | — |
<section> | 主题相关的分组内容 | 章节、介绍块（需加h2-h6标题才有语义） | — |
<aside> | 与主内容间接相关的内容 | 侧边栏、广告、相关文章、引用框 | — |
<footer> | 结尾区（版权、联系方式） | 页面/文章底部 | — |
<figure> + <figcaption> | 自包含的图文（图片+说明） | 插图、代码示例、图表 | — |
页面经典语义结构模板（复制即用）：
<body>
<header>
<h1>网站标题</h1>
<nav>...</nav>
</header>
<main>
<article>
<header>
<h1>文章大标题</h1>
<p>发布时间：<time datetime="2026-02-01">2026年2月1日</time></p>
</header>
<section>
<h2>小节标题</h2>
<p>内容...</p>
</section>
<figure>
<img src="chart.png" alt="销售数据图">
<figcaption>2025-2026销售趋势</figcaption>
</figure>
</article>
<aside>
<h2>热门推荐</h2>
<!-- 侧边内容 -->
</aside>
</main>
<footer>
<p>© 2026 重阳的笔记</p>
</footer>
</body>3. 文本级语义标签（内容细节，SEO和可读性关键）
| 标签 | 语义含义 | 视觉默认效果 | 推荐场景 |
|---|---|---|---|
<h1>~<h6> | 标题层级（h1唯一且最重要） | 加粗增大 | 层级不要跳跃（h1 → h2 → h3） |
<p> | 段落 | 上下margin | 普通正文段落 |
<strong> | 重要/强调（语义强） | 粗体 | 关键词、警告 |
<em> | 强调/语气（斜体语义） | 斜体 | 读起来重音的部分 |
<mark> | 高亮标记（用户搜索结果常用） | 黄色背景 | 搜索关键词高亮 |
<small> | 附属细小文字 | 小字体 | 版权声明、免责、输入提示 |
<time> | 机器可读时间 | 正常 | datetime=”2026-02-01″ |
<code> | 代码片段 | 等宽字体 | 内联代码 |
<pre> | 预格式化文本（保留空格换行） | 等宽 + 保留格式 | 代码块、ASCII艺术 |
<kbd> | 键盘输入 | 框框 | 快捷键：按 Ctrl+C |
<samp> | 系统/程序输出样例 | 等宽 | 终端输出 |
<var> | 数学/编程变量 | 斜体 | x = y + z |
记忆口诀：strong重、em斜、mark黄、small细、time机读、code预kbd样。
4. 媒体与嵌入（现代网页重头戏）
| 标签 | 功能 | 关键属性 | 示例场景 |
|---|---|---|---|
<img> | 图片（自闭合标签） | src, alt（必须！），loading=”lazy” | 所有图片，alt写描述而非“产品图” |
<picture> | 响应式图片（多源） | + media + srcset | 不同屏幕大小/格式（webp/avif） |
<video> | 视频 | controls, autoplay muted, loop | 自适应视频 |
<audio> | 音频 | controls | 播客/背景音乐 |
<iframe> | 嵌入外部页面 | src, title, loading=”lazy”, sandbox | YouTube、地图、广告 |
<figure> | 图表/媒体容器 | 与figcaption配合 | 带说明的图片/代码 |
2026性能Tips：图片永远加 loading="lazy" + decoding="async"，视频加 preload="metadata"。
5. 表单标签（交互核心）
最常用组合：<form> → <label> + <input> + <button>
| 标签 | 用途 | 关键属性/类型 |
|---|---|---|
<form> | 表单容器 | action, method=”post/get” |
<label> | 输入项标签（提升可访问性） | for=”id” 或 包裹input |
<input> | 输入框（最重要！） | type=”text/email/password/tel/number/search/date/file/submit/checkbox/radio/button” |
<textarea> | 多行文本 | rows, cols, maxlength |
<select> + <option> | 下拉菜单 | — |
<button> | 按钮（比input type=submit语义好） | type=”submit/reset/button” |
<fieldset> + <legend> | 分组 + 组标题 | — |
现代写法示例（可访问性最佳）：
<label for="email">邮箱：</label>
<input type="email" id="email" name="email" required placeholder="example@domain.com">6. 表格（数据展示专用）
| 标签 | 作用 |
|---|---|
<table> | 表格容器 |
<thead> | 表头 |
<tbody> | 主体 |
<tfoot> | 表尾（合计行） |
<tr> | 行 |
<th> | 表头单元格（scope=”col/row”） |
<td> | 数据单元格 |
语义Tips：用 <th scope="col"> 或 scope="row" 提升屏幕阅读器体验。
7. 元数据与头部标签（藏在里）
| 标签 | 作用 | 常见写法 |
|---|---|---|
<meta> | 元数据 | charset, viewport, description, keywords（SEO） |
<title> | 页面标题 | 必须 |
<link> | 外部资源 | rel=”stylesheet/icon/preload” |
<script> | JS | defer/async 推荐 |
<style> | 内联CSS | 少用 |
SEO常用meta（2026仍有效）：
<meta name="description" content="一句话描述，150字内">
<meta name="robots" content="index, follow">
<link rel="canonical" href="https://example.com/page">8. 速成记忆口诀 & 优先级排序
必须掌握（每天用）：html, head, body, meta, title, h1-h6, p, strong/em, a, img, ul/ol/li, div（备用）、span（备用）
强烈推荐（现代开发）：header/nav/main/article/section/aside/footer, figure/figcaption, time, mark, details/summary
表单媒体：form/input/label/button, img/picture, video/audio, iframe
少用/了解即可：font/center/big/strike（已废弃）、frame/frameset（远古）、applet（远古）
一句话总结：
用语义标签写结构 → 用class/id加样式钩子 → 用ARIA补无障碍（必要时） → 性能优化（lazy/preload）。
有具体场景想深入（如响应式图片写法、表单验证、ARIA最佳实践、HTML+CSS常见布局模板），直接告诉我，我继续拆解！
