【H5 前端开发笔记】第 06 期：HTML常用标签 (2) —— 文本标签、图片标签
（2026 最新版 · 实战笔记 · 可直接复制使用）
本期我们重点学习网页中最常用、最基础的两大类标签：文本标签 和 图片标签。这些标签是构建页面内容的“砖块”。
一、文本标签（Text Tags）
1. 标题标签（Heading Tags）—— h1 ~ h6
<h1>一级标题（最重要的标题，一个页面建议只用一次）</h1>
<h2>二级标题（章节标题）</h2>
<h3>三级标题（小节标题）</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题（最不重要）</h6>
规范建议：
- 标题要按层级顺序使用，不要跳级（例如不要直接用 h1 后跟 h3）
- h1 通常用于页面主标题，SEO 权重最高
2. 段落标签 <p>
<p>这是一个普通的段落文本。段落之间会自动产生间距。</p>
<p>这是第二个段落。</p>
3. 强调与格式化文本标签（语义化优先！）
| 标签 | 语义含义 | 视觉效果 | 推荐使用场景 | 示例 |
|---|---|---|---|---|
<strong> | 强烈重要、强调 | 加粗 | 关键词、警告、重点内容 | <strong>注意</strong> |
<em> | 强调（语气） | 斜体 | 需要突出语气的文字 | <em>一定要</em> |
<b> | 单纯加粗（无语义） | 加粗 | 只想加粗，不想强调语义 | <b>粗体</b> |
<i> | 斜体（无语义） | 斜体 | 图标、专有名词、外文 | <i>Italic</i> |
<u> | 下划线 | 下划线 | 较少使用（易与链接混淆） | <u>下划线</u> |
<del> | 删除线（已删除） | 删除线 | 优惠价、错误信息 | <del>¥999</del> |
<ins> | 下划线（插入） | 下划线 | 新增内容 | <ins>¥799</ins> |
<small> | 附属细则、小字 | 字体变小 | 版权、免责声明 | <small>© 2026</small> |
<mark> | 高亮标记 | 黄色背景 | 搜索结果高亮 | <mark>重要</mark> |
<span> | 无语义内联容器 | 无默认样式 | 配合 CSS 样式 | <span class="price">99</span> |
2026 推荐写法（语义化优先）：
<p>本商品 <strong>限时特价</strong>，原价 <del>¥1299</del>，现仅需 <ins>¥799</ins>。</p>
4. 其他常用文本标签
<br> <!-- 换行（自闭合标签） -->
<hr> <!-- 水平分割线（自闭合标签） -->
<!-- 预格式化文本（保留空格和换行） -->
<pre>
这段文字会 保留 所有空格
和换行格式。
</pre>
<!-- 引用 -->
<blockquote>
<p>这是一段引用文字。</p>
</blockquote>
<!-- 缩写 -->
<abbr title="HyperText Markup Language">HTML</abbr>
二、图片标签 <img>（重点掌握）
1. 基本语法
<img src="图片路径" alt="图片描述" >
2. <img> 常用属性（2026 推荐写全）
| 属性名 | 含义说明 | 是否推荐 | 示例 |
|---|---|---|---|
src | 图片路径（必需） | 必须 | src="images/photo.jpg" |
alt | 图片无法显示时的替代文字（必需！） | 强烈推荐 | alt="产品宣传图" |
title | 鼠标悬停时显示的提示文字 | 推荐 | title="点击查看大图" |
width | 图片宽度（像素或百分比） | 推荐 | width="800" |
height | 图片高度 | 推荐 | height="450" |
loading | 懒加载（性能优化） | 强烈推荐 | loading="lazy" |
decoding | 解码方式 | 推荐 | decoding="async" |
sizes / srcset | 响应式图片（进阶） | 进阶 | 后续课程讲解 |
3. 完整推荐写法
<!-- 基础推荐写法 -->
<img src="images/product.jpg"
alt="2026 新款小米15 手机"
title="小米15 Pro"
width="800"
height="600"
loading="lazy">
<!-- 使用相对路径（项目内部） -->
<img src="./images/banner.jpg" alt="首页横幅">
4. 图片格式快速指南（2026）
.jpg / .jpeg：照片、色彩丰富图片.png：需要透明背景、图标、LOGO.webp：2026 年主流格式（体积小、质量高）.svg：矢量图标（可无限放大不失真）
三、本期综合示例（可直接复制）
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>第06期 - 文本与图片标签</title>
</head>
<body>
<h1>欢迎来到小米官网</h1>
<h2>最新产品</h2>
<p>小米15 系列搭载 <strong>第三代骁龙8</strong>，性能再次突破。</p>
<img src="images/xiaomi15.jpg"
alt="小米15 手机正面图"
title="小米15"
width="800"
height="500"
loading="lazy">
<hr>
<p>原价 <del>¥5999</del>，限时特惠价仅需 <ins>¥4999</ins>，数量有限，<mark>速抢</mark>！</p>
</body>
</html>
四、本期练习（建议全部完成）
- 写一个产品介绍页面，包含 h1、h2、至少 3 个段落
- 使用
<strong>、<em>、<del>、<ins>、<mark>各一次 - 插入 2 张图片（一张本地相对路径，一张网络绝对路径），写好 alt 和 title
- 添加一条水平分割线和一个引用块
五、笔记总结（重点记忆）
- 标题标签 h1~h6 要按层级使用，h1 一个页面建议只用一次
- 语义化优先：用
<strong>而不是<b>，用<em>而不是<i> <img>标签必须写src和alt属性- 图片建议加上
width、height、loading="lazy"提升性能 - 相对路径是项目内部引用的主要方式
第 07 期预告：《HTML 常用标签 (3) —— 列表标签（无序列表、有序列表、定义列表）与表格标签》
需要我立即补充以下任意内容，请直接说：
- 本期完整可运行的「产品介绍页」示例代码（带注释）
- 图片懒加载 + srcset 响应式图片进阶写法
- 第 01~06 期笔记合并版（完整前端基础笔记）
- 本期练习的标准参考答案
继续你的 H5 前端学习之旅！第 06 期笔记到此结束，文本和图片部分已经掌握得很扎实了！✨
