第 02 节 · 常用标签与超链接

📌 版本信息：基于 HTML Living Standard（WHATWG 维护，2026-09-06 核对） 📚 来源：MDN HTML 基础 ｜ MDN <a> 文档 ｜ MDN <img> 文档

当资料页需要图文并茂

简历页搭好骨架后，下一件自然的事是往里面放材料：自我介绍段落、技能列表、一张能展示作品的图、一张技能对比表，以及跳转到官方文档和 GitHub 的链接。这些东西不是“好看的装饰”，而是一份资料页最基本的信息组织方式。

本节从这张“图文资料页”出发，把文字标签、列表、图片、表格和超链接一次认全，重点放在路径和链接上。

这一节讲什么

本节讲常用内容标签（标题、段落、列表、图片、表格）和超链接，以及它们背后共用的一套路径规则。学完这一节可以做到：

• 写出结构清晰的多级标题、段落、强调文字和三种列表
• 正确插入带 alt 的图片，说清图片与文字在页面里的协作关系
• 做出一个带表头、表体、说明文字的数据表格
• 掌握外链、站内链、锚点、邮箱链接，并说清 target="_blank" 为什么要配合安全属性
• 面对 ./、../、/ 和完整网址，能判断该用哪一种

两个先行的概念：块级与行内、语义与外观

HTML 里的元素按显示习惯大致分两级：块级元素独占一行，像段落、标题、列表、表格；行内元素在文字流里接着排，像 <strong>、<em>、<a>、<img>。这个划分不用背，它是理解“为什么元素换行、为什么某些标签能放进段落里”的入口。后面第 05 节讲盒模型时，会重新审视“块”和“行内”的真正含义。

另一个更重要的区分是语义与外观：<strong> 默认加粗、<em> 默认斜体，但它们的含义是“重要”和“强调”，不是“粗体”和“斜体”。屏幕阅读器会把 <strong> 重读，搜索引擎也会把强调内容看得更重。所以写法上的选择不是视觉问题，而是信息含义问题：需要强调就用语义标签，只需要改变外观就把任务交给 CSS。

文字标签

<!-- 标题：h1 到 h6，重要性依次递减 -->
<h1>页面主标题</h1>
<h2>章节标题</h2>
<h3>小节标题</h3>

<!-- 段落：浏览器自动在段落之间留空隙 -->
<p>这是一个段落。源码里怎么换行不重要，连续的空白都会被合并成一个空格。</p>

<!-- 行内语义标签 -->
<p>
  <strong>重要内容</strong>、
  <em>强调语气</em>、
  <mark>高亮标记</mark>、
  行内代码 <code>npm install</code>、
  <del>过时做法</del>、
  <ins>新做法</ins>
</p>

<!-- 换行与分隔 -->
<br />  <!-- 强制换行：诗歌、地址这类“换行本身有意义”的场合才用 -->
<hr />  <!-- 主题分隔线：表示上下两块内容切换了话题 -->

两个容易用错的点：

• 一个页面通常只放一个 <h1>。标题体系是在描述文档大纲，不是给文字调字号；想要大字号是 CSS 的职责。
• <b> 和 <i> 在现代 HTML 中依然存在，但正文里更推荐 <strong> 和 <em>，因为后者携带语义。能表达“为什么加粗”的标签，比只表达“怎么显示”的标签多一层信息。

三种列表

列表的三种形态对应三种不同的信息关系：

<!-- 无序列表：项目之间没有先后顺序 -->
<ul>
  <li>Leaflet —— 轻量二维</li>
  <li>OpenLayers —— 全功能二维</li>
  <li>Cesium —— 三维地球</li>
</ul>

<!-- 有序列表：步骤、排名、时间线 -->
<ol>
  <li>安装 Node.js</li>
  <li>配置镜像源</li>
  <li>创建 Vite 项目</li>
</ol>

<!-- 定义列表：术语与解释成对出现 -->
<dl>
  <dt>WMS</dt>
  <dd>Web Map Service，服务器出图片的地图服务</dd>
  <dt>WFS</dt>
  <dd>Web Feature Service，返回矢量要素、可编辑的服务</dd>
</dl>

列表可以嵌套：在 <li> 里再放一个 <ul> 或 <ol>，就能做出“分类下面还有子项”的结构，地图应用的图层树很适合这种写法。

图片 <img>

🖼️ src 管“从哪拿图片”，alt 管“图片是什么”。两者各司其职，不能互相替代。

<img
  src="./images/map.png"
  alt="武汉市行政区划地图"
  width="400"
/>

三个属性各有各的工作：

属性	作用	漏掉会怎样
src	图片地址	图片不显示
alt	图片的文字替代	图挂了只剩一张破图，屏幕阅读器也无从介绍
width / height	预设尺寸	图片加载时页面布局跳动，阅读体验变差

alt 可以理解成图片的“替补演员”：图片正常时它隐身，图片加载失败、遇到残障辅助工具、被搜索引擎索引时，它就站上场。所以它不应该写“图片”两个字，而应该描述图片内容，比如“武汉市行政区划地图”。

表格 <table>

<table border="1">
  <caption>常见坐标系对比</caption>
  <thead>
    <tr>
      <th>坐标系</th>
      <th>EPSG 代码</th>
      <th>用途</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>WGS 84</td>
      <td>4326</td>
      <td>GPS 经纬度</td>
    </tr>
    <tr>
      <td>Web 墨卡托</td>
      <td>3857</td>
      <td>网络地图瓦片</td>
    </tr>
  </tbody>
</table>

结构口诀：table 包住 thead 和 tbody，行用 tr，表头用 th，数据用 td。<caption> 是整张表的说明文字，相当于表格的标题。

HTML 表格只服务于“真正的表格数据”，比如坐标系对比、服务价格、属性字段清单。用表格拼页面布局是上一个时代的做法，既难维护也没法响应式，布局交给后面的 CSS 模块处理。

超链接 <a>：本节的主角

<a> 是 anchor（锚）的缩写，href 属性决定点击后去往哪里。它最常用的六种形态：

<!-- ① 外部链接：写完整网址 -->
<a href="https://leafletjs.com/">Leaflet 官网</a>

<!-- ② 新标签页打开：必须带上安全属性 -->
<a href="https://openlayers.org/" target="_blank" rel="noopener noreferrer">
  OpenLayers 官网
</a>

<!-- ③ 站内链接：相对路径指向本站其他页面 -->
<a href="./about.html">关于我</a>

<!-- ④ 锚点：跳到本页某个带 id 的元素 -->
<a href="#section-2">跳到第二节</a>
<h2 id="section-2">第二节</h2>

<!-- ⑤ 邮箱链接：唤起系统邮件客户端 -->
<a href="mailto:me@example.com">发邮件给我</a>

<!-- ⑥ 链接包住图片：点图跳转 -->
<a href="https://www.openstreetmap.org/">
  <img src="./osm-logo.png" alt="OpenStreetMap" width="100" />
</a>

为什么 target="_blank" 要搭配 rel="noopener noreferrer"？_blank 表示新标签页，而新页面默认可以通过 window.opener 反过来影响原页面，这是钓鱼和界面劫持的常见入口。noopener 切断这条通道，noreferrer 同时不把来源地址交给新页面。现在的浏览器对带 target="_blank" 的链接基本已经默认启用了同样效果，但显式写出来既兼容旧环境，也表达“这段代码考虑过安全问题”。

锚点的另一端不必是标题，任何元素都能挂 id。但 id 在同一页面必须唯一，否则浏览器会跳到第一个匹配的元素。

相对路径与绝对路径

🧭 判断路径时先问一句：从哪个文件出发？相对路径的特性就是“参照物不同，结果不同”。

假设站点的目录长这样：

my-site/
├── index.html          ← 当前页面
├── about.html
└── images/
    ├── logo.png
    └── maps/
        └── china.png

从 index.html 出发，常见的写法如下：

写法	含义	类型
src="./images/logo.png"	当前目录下的 images/logo.png	相对路径
src="images/logo.png"	同上，./ 可以省略	相对路径
src="./images/maps/china.png"	一层层往下找	相对路径
src="../logo.png"	.. 表示上一级目录	相对路径
src="/images/logo.png"	从站点根目录开始找	根相对路径
src="https://cdn.com/x.png"	完整网址	绝对路径

注意：“少写一个点”的错误：../ 是两个点加一个斜杠，./ 是一个点加一个斜杠。/ 开头的写法依赖服务器根目录，直接双击 HTML 用 file:// 打开时往往失效。另外，Windows 文件系统不区分大小写，线上 Linux 服务器区分，所以本地能显示的图片上线后 404，常见原因就是路径大小写不一致。从今天起把文件名统一改成小写、路径写成相对路径，能少踩一大类坑。

易错点

• 超链接写对了，锚点没对上：href="#xxx" 要找的 id="xxx" 不存在，或页面里有多个相同 id，点击后要么没反应，要么跳错位置。写完检查一次 id。
• 外链新窗口却没写安全属性：target="_blank" 和 rel="noopener noreferrer" 是一对搭档，只写前者等于把原页面的 window.opener 暴露出去。
• 图片只写了 src：图片本身看得到，但加载失败时一片空白，“图挂了”这件事连张说明都没有。alt 看起来是备选，实际是信息的一部分。
• 用错层级：从 images/maps/ 里的页面引用根目录的 logo.png，需要 ../../logo.png，少一个 .. 就找不到文件。写路径时可以对照目录树数层级。
• 用表格排版：表格擅长表达行列数据，不擅长做页面布局。用表格拼页面会让代码充满无语义的单元格，且移动端几乎没法收拾。

动手练习：02 图文混排页

配套文件：02-web-basics/examples/02-图文混排页.html。这页的主题直接取自业务流程：把常见地图底图服务整理成一页资料，用标题、段落、图片、表格和链接把“天地图、高德、OpenStreetMap”这些概念串起来。

练习页本身没有任何依赖。当前图片用的是 picsum.photos 在线占位图，网络通畅时能直接看到；如果不方便联网，按 TODO 3 换成一张本地图片即可。

文件里的 TODO 和参考答案：

<!-- TODO 1：天地图外链新窗口打开，并补安全属性 -->
<a href="https://www.tianditu.gov.cn/"
   target="_blank"
   rel="noopener noreferrer">
  天地图官网
</a>

<!-- TODO 2：补两个锚点导航 -->
<a href="#table">表格</a>
<a href="#links">相关链接</a>

<!-- TODO 3：换成本地图片。
     把任意一张图放进 examples/ 并命名为 my-map.jpg，
     再替换 src，alt 写图片的真实内容。 -->
<img src="./my-map.jpg" alt="一张本地地图截图" width="400" />

<!-- TODO 4：表格补一行 OpenStreetMap 数据 -->
<tr>
  <td>OpenStreetMap</td>
  <td>WGS 84</td>
  <td>完全免费</td>
</tr>

为什么练习选“底图服务”当主题？因为这是 WebGIS 第一个真正绕不开的信息结构：不同服务的坐标系、免费程度、适用场景都需要用表格对比，而它们的官网天然就是外链列表。写完这一页，相当于有了一份可以长期维护的学习资料页。

通关标准：

• 页面包含多级标题、两种列表、一张带 alt 的图、一个表格、四种以上链接
• 顶部导航的锚点能跳转到对应区块，回到顶部也有效
• 故意写错一个 src，能看到 alt 文字出现，并能解释原因
• 能说清 ./、../、/ 三种前缀的区别

自测题

1. <strong> 和 <b> 在浏览器里都可能显示成加粗，为什么更推荐前者？
2. alt 属性的作用有哪些？
3. target="_blank" 为什么要搭配 rel="noopener noreferrer"？
4. 从 images/maps/ 文件夹里的页面引用站点根目录下的 logo.png，相对路径怎么写？
5. 为什么说“别用表格做页面布局”？

参考答案

1. <strong> 带“重要”的语义，屏幕阅读器会重读，搜索引擎也能理解；<b> 只是视觉上的加粗。选择标签时优先考虑含义，而不是默认样式。
2. 图片加载失败时提供替代文字；屏幕阅读器朗读页面内容；给搜索引擎解释图片含义。
3. 防止新标签页通过 window.opener 反向操控原页面；noreferrer 还不把来源地址泄露给新页面。
4. ../../logo.png。从 maps 上到 images 需要一次 ..，再上到站点根目录需要第二次 ..。
5. 表格的语义是行列数据，不是页面骨架；用表格排版代码冗长、难以响应式，对屏幕阅读器也是灾难。页面布局是 CSS 的职责。

下一步

内容材料齐了，但页面目前只会“展示信息”。下一节学表单与输入控件，让页面能把查询半径、登录账号、上传文件这类输入收上来——地图应用里那些查询面板，就是从表单开始的。