HTML标签实战：文本语义化与图片响应式优化指南

做 H5 前端开发，每天都在和 HTML 常用标签打交道。上一期我们把页面骨架、标题、段落、换行这些基础结构过了一遍，这一期继续往下走，重点聊文本标签和图片标签。这两类标签几乎是每个页面都躲不开的：文字需要结构化，图片需要正确加载和展示。很多新手觉得它们太简单，随手写个 <b>加粗</b>、<img src="xx.jpg"> 就完事了，结果后面做项目时不是语义乱套，就是图片在移动端糊成一片。这期笔记就把这些坑一个一个填掉，适合刚学完基础标签、正准备写第一个完整页面的前端新人，也适合想回头补补语义化细节的同学。

1. 文本标签：不只是排版，更是语义表达

1.1 文本标签速查：先知道有哪些

HTML 里的文本标签数量不少，但真正常用的就那么十几个。我先列一个速查表，方便你随时回来翻：

这里有个细节：绝大多数文本标签都是行内元素，但 blockquote 和 pre 是块级元素，span 本身没有任何语义。你把 span 当“万能口袋”没问题，但前提是 strong、em、del 这些自带语义的标签都已经被你考虑过了，而不是第一反应就用 span 加 CSS。

1.2 语义化是重点：strong 和 b、em 和 i 你选谁

strong 和 b 在浏览器里看起来都是粗体，em 和 i 看起来都是斜体，所以很多人直接混着用。但在 HTML 语义体系里，它们完全是两回事。

strong 表示“这个内容本身很重要”，重要是内容层面的，不是视觉层面的。屏幕阅读器遇到 strong 会用更重的语气读出，搜索引擎也会更重视。b 呢？它只是“把文字变粗吸引眼球”，不管内容重要性。比如你写：“明天下午 三点 开会”，这里的“三点”是句子里的重点，应该用 <strong>。但如果你只是把页面左上角的“限时特惠”加粗，并不想强调某个词，用 <b> 反而更合适。

em 和 i 的区分也类似。em 表示句子里的重音，读出来会变化语气；i 则是纯粹的视觉斜体，常用于外文单词、专业术语、图标字体。比如“我真的很喜欢吃 i pizza 上面的 i basil”，这里的斜体只是为了区分外来词，不需要加重语气，用 i 才对。

我在实际开发里的习惯是：拿不准的时候默认用 strong 和 em，因为语义标签向下兼容视觉上的加粗斜体，但你永远可以把样式改回来。反过来，如果你一开始就用 <b> 表示重点，后面想给重点词换颜色、换背景，CSS 选择器会很难写得有逻辑。

1.3 文本标签用错的几个典型场景

先看删除线。del 表示“这个内容被删除了”，比如文档修改记录；s 表示“这个内容已经过时、不再准确”，比如电商的原价。你写“原价 199 元，现价 99 元”时，语义上应该是 <s>199</s> 而不是 <del>199</del>。浏览器显示效果都一样，但读屏软件和 SEO 理解起来完全不同。

再看 sup 和 sub。它们本身没问题，但会破坏行高。比如写“面积是 9m²”，直接用 <sup>2</sup>，周围行距容易被撑得很难看。我的做法是给 sup、sub 单独加 CSS：

css复制sup, sub {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}
sup {
  top: -0.5em;
}
sub {
  bottom: -0.25em;
}

这样既保留了上标下标语义，又不会把行高弄得乱七八糟。

还有个经典误区：为了文字加粗，直接套 <h1> <h2> 标题标签。标题是文档结构，不是字体工具。你页面上根本不需要那么多标题，但为了“字号大一点、粗一点”就把内容写成标题，会让整个文档大纲像被揉过的纸，搜索引擎分不清哪里是真正的章节标题。

最后提一下 blockquote 和 q。q 是行内短引用，浏览器会自动加引号；blockquote 是块级引用，适合一大段引文。不要因为懒得写引号，就把所有引用都塞进 blockquote，也不要手动在 q 里再加引号，变成双引号。

2. 图片标签：从 img 到响应式图片

2.1 img 标签基础：src、alt、width、height

图片标签的核心是 <img>，它是一个“替换元素”，本身没有内容，内容来自 src 指向的外部资源。没有 src 的 <img> 什么都不是，所以这是必填属性。

alt 是替代文本，图片加载失败时显示，读屏软件也会读它。很多人觉得 alt 可有可无，实际上它对可用性和 SEO 都很重要。你放一张“产品功能截图”，alt 写成“产品后台-数据看板截图”，用户图片挂了也能知道这里本来是什么。如果图片只是装饰性的，比如一个圆角分割线，alt="" 反而更好，因为读屏会直接跳过，不会啰嗦地读“图片”。

width 和 height 建议每次都写。它们让浏览器在图片加载前就能预留出空间，减少页面布局跳动，也就是常说的 CLS（Cumulative Layout Shift）。写法是纯数字，单位默认像素：

html复制<img src="cat.jpg" alt="一只橘猫" width="640" height="480">

这里有个小误区：如果 width 和 height 的比例和图片原始比例不一致，浏览器会直接拉伸变形。所以在 HTML 里写这两个属性时，一定要从图片真实尺寸等比例取。后面想做成响应式，再用 CSS 覆盖。

2.2 图片格式怎么选：JPG、PNG、GIF、WebP、SVG

很多前端新人拿到一张图就往上丢，不考虑体积和格式，结果首页打开要好几秒。图片格式的选择，本质上是在“画质”和“体积”之间做平衡。

实际操作时，我一般这么判断：照片和复杂场景优先 JPG 或 WebP；截图和带透明的 UI 素材用 PNG 或 WebP；图标和 Logo 能用 SVG 就用 SVG，因为它不是像素图，放大缩小都不会糊，还能直接改颜色；动图如果帧数少、颜色少，GIF 够了，但复杂动图优先 WebP，体积能小一大截。

如果你还在用最原始的 JPG/PNG 直接丢页面，建议先做一次压缩。现在的在线压缩工具已经很成熟，很多压缩到 70% 质量肉眼看不出区别，体积却小一半。尤其是移动端 H5，用户流量不是无限套餐，能省一点是一点。

2.3 高清屏适配：srcset、sizes、picture

在手机上经常遇到一个问题：图片在普通屏看着清楚，在 Retina 屏上就发虚。原因是高清屏的物理像素密度更高，一个 CSS 像素可能对应 2 个甚至 3 个物理像素。你放一张 200px 宽的图片，在 DPR 2 的屏幕上拉伸到 200 个 CSS 像素，实际等于需要 400px 的物理像素数据，不够就糊了。

最简单的解法是用 srcset 准备 2x 图：

html复制<img src="photo-640.jpg" srcset="photo-1280.jpg 2x" alt="示例图片">

这句话告诉浏览器：默认加载 640px 宽的图，如果设备 DPR 是 2，就加载 1280px 宽的图。很适合头像、Logo、小图标这些固定尺寸的图片。

复杂一点的场景还需要 sizes。比如一个列表页，图片在手机上是 100% 宽度，在电脑上只占 50% 宽度。这时候光靠 srcset 不够，还要告诉浏览器图片在不同断点下占多宽：

html复制<img
  srcset="photo-320.jpg 320w,
          photo-640.jpg 640w,
          photo-1280.jpg 1280w"
  sizes="(max-width: 600px) 100vw, 50vw"
  src="photo-640.jpg"
  alt="示例图片">

这里 320w 表示图片文件的实际宽度是 320 像素。浏览器会根据设备的视口宽度、DPR 和 sizes 里的 CSS 宽度，选出最合适的图。注意 sizes 别漏写，否则浏览器默认按 100vw 处理，如果你的图片实际只占一半屏幕，就会白白下载大图。

如果要做格式降级，比如优先展示 WebP，不支持就回退 JPG，可以用 <picture> 元素：

html复制<picture>
  <source srcset="photo.webp" type="image/webp">
  <source srcset="photo.jpg" type="image/jpeg">
  <img src="photo.jpg" alt="示例图片">
</picture>

picture 里面的 <img> 是必须保留的，它负责最终展示、alt 属性和降级兜底。浏览器从上往下找第一个能识别的 source，所以 WebP 要放在 JPG 前面。这套东西看着复杂，但小项目大部分时候只需要 srcset 的 2x 写法就够了，别一上来就全上。

2.4 图片加载体验：懒加载与布局稳定性

页面里图片一多，尤其是长滚动页面，加载速度就被拖垮了。现代浏览器的原生懒加载很简单：

html复制<img src="work-1.jpg" alt="项目截图" loading="lazy">

loading="lazy" 会让图片在滚动到视口附近时才加载，首屏不加载，省流量也快。要注意两点：第一，首屏图片不要加 lazy，否则它可能会被延迟加载，影响首屏内容展示；第二，老浏览器不支持这个属性时会直接加载图片，不影响显示，只是没有懒加载效果。

布局稳定性方面，除了写 width 和 height，还可以配合 CSS 的 aspect-ratio：

css复制img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
}

另外，<img> 是行内元素，默认按文字基线对齐，底部会留出几像素空白。这个问题在布局里非常常见，图片底部总有一条白缝。解决方法很简单：

css复制img {
  display: block;
}

如果是一排图片之间有空白，那多半是 HTML 换行产生的空格，可以让父容器 font-size: 0，或者干脆用 Flex/Grid 布局。

3. 实操：写一个个人介绍页

3.1 页面规划与文件准备

理论说了不少，我们直接上手做一个“个人介绍页”。场景很简单：一个刚入行的前端，用自己的页面展示头像、技能、近期作品和一段学习感悟。这正好能把上文的文本标签、图片标签都用上。

先规划目录结构：

text复制my-profile/
├── index.html
└── img/
    ├── avatar.jpg
    ├── avatar@2x.jpg
    ├── work-1.jpg
    └── work-1@2x.jpg

avatar.jpg 准备一张正方形头像，建议原始图片 400x400 以上；work-1.jpg 准备一张作品截图，建议 800x450 以上。我这里都预留了 @2x 版本，用来演示高清屏适配。

页面结构我拆成四块：头像和姓名、一句介绍和技能、近期作品、一段引用和补充信息。这样每一块语义清晰，后面写代码不打架。

3.2 完整代码演示

下面是一份可以直接打开运行的 index.html。代码里加了少量 CSS，重点还是看 HTML 标签的使用。

html复制<!doctype html>
<html lang="zh-cn">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>老周的个人介绍页</title>
  <style>
    body {
      max-width: 720px;
      margin: 40px auto;
      padding: 0 16px;
      font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
      line-height: 1.7;
      color: #333;
    }
    img {
      max-width: 100%;
      height: auto;
      display: block;
    }
    .avatar img {
      border-radius: 50%;
    }
    .tags span {
      display: inline-block;
      background: #e8f0fe;
      color: #1a56db;
      border-radius: 999px;
      padding: 2px 10px;
      margin-right: 6px;
      font-size: 14px;
    }
    figure {
      margin: 16px 0;
    }
    figcaption {
      color: #666;
      font-size: 14px;
    }
  </style>
</head>
<body>
  <main>
    <section class="avatar">
      <h1>老周</h1>
      <img
        src="img/avatar.jpg"
        srcset="img/avatar@2x.jpg 2x"
        alt="老周的个人头像"
        width="160"
        height="160"
      >
    </section>

    <section class="intro">
      <p>我是一名 H5 <strong>前端开发</strong>，最近在系统整理 <em>HTML 常用标签</em>的学习笔记。这是我的第 6 期内容，正好聊到<mark>文本标签和图片标签</mark>。</p>
      <p>一句话介绍自己：<q>用代码把界面做出来不是本事，把结构写清楚才算入门。</q></p>
    </section>

    <section class="skills">
      <h2>掌握技能</h2>
      <p class="tags">
        <span>HTML</span>
        <span>CSS</span>
        <span>JavaScript</span>
      </p>
    </section>

    <section class="works">
      <h2>近期作品</h2>
      <figure>
        <img
          src="img/work-1.jpg"
          srcset="img/work-1@2x.jpg 2x"
          alt="个人博客首页截图"
          width="640"
          height="360"
          loading="lazy"
        >
        <figcaption>个人博客首页，<cite>H5 前端开发笔记</cite>系列文章截图</figcaption>
      </figure>
      <p>最近在补 <abbr title="Cascading Style Sheets">CSS</abbr> 布局，忙得连水都忘了喝。</p>
    </section>

    <section class="quote">
      <blockquote>
        <p>真正的前端，不是把标签背下来，而是知道每个标签为什么存在。</p>
      </blockquote>
      <p>我一直把这句话贴在编辑器上方。技能不重要？<del>其实很重要</del><ins>其实非常重要</ins>。</p>
      <p>这是我的办公桌：面积 9m<sup>2</sup>，桌上只有一杯咖啡和一本 <cite>CSS 权威指南</cite>。</p>
    </section>
  </main>
</body>
</html>

3.3 关键代码拆解：每个标签为什么这么写

先看头像图片。src 指向 img/avatar.jpg，后面跟了一个 srcset="img/avatar@2x.jpg 2x"。因为头像显示宽度是 160px，普通屏 160px 图就够，但高清屏需要 320px 图才不糊。我给 avatar@2x.jpg 的 2x 就是为了解决这个。alt 写“老周的个人头像”，读屏用户也能知道这里是什么。

<h1>老周</h1> 是页面唯一的一级标题，代表这个页面的核心主体。不要为了样式好看再加第二个 h1，一个页面最好只有一个主标题。

介绍段落里用了 <strong>前端开发</strong> 和 <em>HTML 常用标签</em>。前者强调我的职业身份，后者突出我正在整理的内容主题，都是有实际语义的强调。mark 标出“文本标签和图片标签”，正好呼应本期主题。如果你什么都不强调，全篇都加粗，那等于没强调。

技能标签我用 <p class="tags"> 包了三个 <span>。为什么不用 <ul>？因为这不是条目列表，只是一组并列的标签，span 配合 CSS 变成胶囊形状就够了。如果你以后做站内搜索，想把这组标签做成列表，再换 ul 也不迟。

作品图用 <figure> 包起来，里面是 <img> 和 <figcaption>。图注“H5 前端开发笔记系列文章截图”和图片绑定在一起，以后移动整体不会乱。loading="lazy" 放在作品图上，因为它不在首屏首屏位置，可以延迟加载。这里 cite 放在图注里引用了作品名，语义上完全正确。

blockquote 里的那句话是独立成段的长引用，适合块级引用。后面那句“技能不重要？del 其实很重要 ins 其实非常重要”，虽然有点玩梗，但确实展示了两个标签：被删除的句子用 del，新插入的修正用 ins。sup 用来写“9m²”，也是标准用法。

3.4 怎么验证你的页面语义没问题

写完之后别急着发。我分享几个自己常用的验证方法。

第一步，彻底禁用 CSS。你可以在浏览器开发者工具的预览里删掉 <style>，然后读一遍页面。如果去掉样式后文字顺序还是清晰的，标题层级也能看出主次，说明 HTML 结构基本合格。如果读起来像“一锅粥”，说明你太依赖视觉去掩盖结构问题了。

第二步，用 HTML 校验器检查。W3C 官方提供的 validation 服务会告诉你有没有标签嵌套错误、属性写错、缺少必填属性。新手页面能一次通过的其实不多，看到报错别慌，改就是了。

第三步，有条件的话开一下读屏软件，模拟视力障碍用户访问。Mac 的 VoiceOver、Windows 的讲述人都会按 HTML 语义读页面。这时候你会听到 strong 语气变化、abbr 会读出全称、figure 会把图和图注放在一起读。听到这些，才算你真的用对了。

4. 常见问题与排查技巧实录

4.1 图片裂了：路径、大小写和网络状态

图片不显示是新手遇到最多的问题。我的排查顺序很固定：先按 F12 打开开发者工具，切到 Network 面板，刷新页面，看那张图片的资源请求状态。如果是红色 404，直接双击请求 URL 看图片路径对不对。如果状态码是 200 但浏览器里不显示，再检查是不是图片损坏或格式不受支持。

本地路径的坑主要在相对路径。记住：src 是相对于当前 HTML 文件的目录去解析的。比如 index.html 在项目根目录，img 文件夹也在根目录，写法就是 img/avatar.jpg。如果你的 HTML 在 pages/about.html，图片在根目录的 img 下，那就得写成 ../img/avatar.jpg，多写一层 .. 回到上级目录。

另一个常见问题是文件名大小写。服务器上的文件和本地文件系统不一样，很多线上环境是区分大小写的。你本地写 Avatar.jpg 能显示，部署到服务器上人家只有 avatar.jpg，就裂了。所以我建议图片文件名从头到尾统一用小写加短横线，比如 orange-cat.jpg，不要用中文、空格和其他特殊字符。

还有一种是外部图片被防盗链拦截。如果你用的图片来自别人的网站，请求头里通常带 Referer，对方服务器看到不是自家域名就可以拒绝，状态码可能是 403。这时候要么换图片源，要么征得对方同意。这不是你代码能解决的问题。

4.2 文本标签“不生效”：样式被覆盖和字体缺字

很多同学问：我明明写了 <strong>，怎么页面上没加粗？第一反应去检查 CSS。现在很多项目会引入 reset 样式或 normalize 样式，可能会把 strong { font-weight: normal; } 重置掉。如果你在浏览器开发者工具里看到这个规则，说明不是标签错了，是样式冲突。解决方法是重新给 strong 设置 font-weight: bold;，或者调整你的 reset 规则，不要把所有标签一刀切。

还有一种情况是字体本身的问题。某些中文字体或系统字体不包含真正的粗体字形，浏览器会用算法合成伪粗体，效果可能不明显。你可以在 CSS 里指定 font-family，或者接受这个视觉结果，不用过于纠结。

mark 标签默认是黄底黑字，但很多风格化 CSS 会清掉背景色。如果你发现 mark 没高亮，先查 background-color 是不是被覆盖了。反过来，如果你希望 mark 的背景色更柔和，直接给它写 CSS 就行，语义上还是“标记”。

最后提醒一下：不要因为一个标签“看起来没效果”就急着换标签。small 在不同浏览器里的字号可能不同，strong 在某个字体下粗得不明显，这些都不是标签“失效”，而是默认样式受环境影响。你先确认语义，再谈样式。

4.3 图片变形、模糊、底部有空隙

图片变形，十有八九是 width 和 height 的比例和原图不一致。HTML 属性里写死了“宽 200、高 200”，但原图是 2:1 的横图，浏览器只会机械地拉伸。想控制显示容器又不想变形，用 CSS 的 object-fit：

css复制img {
  width: 200px;
  height: 200px;
  object-fit: cover;
}

object-fit: cover 会按容器比例裁切图片，类似背景图的 background-size: cover。这样图片不会扭曲，只是会裁掉一部分。如果你希望完整显示整张图，可以用 contain，但两边会留白。

图片模糊，通常是显示尺寸大于原始分辨率。原图 200px 宽，你把它放到 CSS 里变成 400px，不糊才怪。解决办法是替换更清晰的原图，或者按高清屏准备 2x 图。记住，srcset 里的 2x 只是给浏览器一个“候选”，不会自动把图变大变清晰，真正的清晰度依赖文件本身的像素数。

底部空隙的问题上面也提过。<img> 默认是行内元素，会跟文字基线对齐，导致底部留出几像素的空白。你可以在全局 CSS 里写上：

css复制img {
  display: block;
}

如果图片要放在文字中间保持行内效果，也可以设置 vertical-align: middle 或 bottom，会比默认的基线对齐好很多。

4.4 响应式图片配置的坑

srcset 和 sizes 看起来简单，但有几个坑很容易踩。第一个坑是写了 srcset 却把 sizes 忘了。浏览器在没有 sizes 时默认按 100vw 计算，也就是它以为图片占满整个屏幕宽度。如果实际布局里图片只有 300px 宽，结果浏览器下载了一张 1280px 的大图，白白浪费流量。

第二个坑是 srcset 里的数字乱写。320w 表示这个图片文件的实际宽度是 320 像素，你必须跟文件真实尺寸一致。有人为了让浏览器选大图，故意写大数字，结果浏览器实际拿到的资源和显示尺寸不匹配，效果很怪。

第三个坑是 picture 元素里面没有保留 <img>。我见过有人只写 <picture> 和 <source>，结果有些浏览器直接什么都不显示。规范要求 <picture> 里的 <img> 必须存在，它才是真正输出给页面的元素，source 只是在它之前做资源选择。

第四个坑是把所有图片都加上 loading="lazy"。懒加载拖到进入视口才开始请求，首屏图片如果也被懒加载，浏览器可能等滚动才加载，首屏就慢了。正确的做法是首屏图片不设置，或者用 eager 明确加载，下方的图片再交给 lazy。

4.5 文本和图片标签的兼容性速查

做 H5 页面时，我会先确认目标用户群到底用什么设备。如果是企业内部项目，浏览器版本很老，就别把 loading="lazy" 当唯一手段，可以搭配一个轻量的懒加载脚本，或干脆不用懒加载。如果是面向 C 端用户的现代移动端页面，这些特性基本都能放心开。

5. 踩了几次坑后，我养成的小习惯

文本标签这块，我现在写代码前会先问自己一句话：这里到底是想“强调含义”，还是只想改变外观？想强调含义，就用 strong 和 em；只想让文字变粗变斜，才考虑 b 和 i。这个习惯帮我减少了很多前后端协作时的尴尬——别人看代码时能一眼分清哪些是页面重点，哪些只是装饰。

图片标签这边，我已经把“默认写 alt”、“默认写 width 和 height”、“默认检查图片体积”变成了肌肉记忆。哪怕是临时写一个 demo，也会顺手把这三个带上。因为我知道，真正上线出问题的时候，不是标签能不能显示，而是图片把页面布局撑乱、把流量吃光、在 Retina 屏上糊成马赛克。

另外建议大家做图片处理时养成一套固定流程：先压缩，再转 WebP，最后配好 2x 图。不要直接把设计稿里的原图拖进页面。同一个项目里，图片规范一旦统一，后面维护起来省心非常多。

最后再分享一个小技巧：给全局图片加一段保底 CSS。

css复制img {
  max-width: 100%;
  height: auto;
}

这句话能解决大多数“图片把父容器撑爆”的问题。别嫌它基础，等你被一张超宽大图折腾到怀疑人生，就会想起这一行代码。这一期的文本标签和图片标签就先聊到这儿，哪天你要是想折腾链接和列表，咱们还能继续聊。