←返回笔记列表
01 · NOTES / WebGIS 开发

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

2026 年 9 月 1 日

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

📌 版本信息：基于 HTML Living Standard（2026-08-29 核对） 📚 来源：MDN HTML 基础 ｜ MDN <a> 文档

一、这一节的目标

  1. 认全文字类标签：标题、段落、强调、代码
  2. 会用三种列表：无序、有序、定义列表
  3. 会插图片并理解 alt 的意义
  4. 会写表格（表头/行/单元格）
  5. 重点精通 <a> 超链接：外链、内链、锚点、新窗口打开
  6. 分清相对路径和绝对路径

二、文字类标签

<!-- 标题：h1 到 h6，重要性递减 -->
<h1>页面主标题（全页唯一）</h1>
<h2>章节标题</h2>
<h3>小节标题</h3>

<!-- 段落：p 是 paragraph。浏览器自动在段与段之间留空隙 -->
<p>这是一个段落。HTML 不关心你在源码里怎么换行——换多少行都算一个空格。</p>

<!-- 文字级语义标签（都写在段落内部） -->
<p>
  <strong>加粗（语义：重要内容）</strong>，
  <em>倾斜（语义：强调语气）</em>，
  <mark>高亮标记</mark>，
  行内代码 <code>npm install</code>，
  删除线 <del>过时做法</del>，
  下划线插入 <ins>新做法</ins>
</p>

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

⚠️ <b> 和 <strong> 的区别：视觉效果都是加粗，但 <strong> 带"这事很重要"的语义（屏幕阅读器会重读，SEO 也在意）。同理 <i> vs <em>。一律用语义版：<strong> / <em>。

⚠️ 别用标题标签当"调字号工具"：想要大字去学 CSS（第 04 节），标题的使命是表达文档大纲。

三、三种列表

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

<!-- ② 有序列表 ol（ordered list）：步骤/排名 -->
<ol>
  <li>安装 Node.js</li>
  <li>配置镜像源</li>
  <li>创建 Vite 项目</li>
</ol>

<!-- ③ 定义列表 dl（description list）：术语 + 解释，天然适合"名词表" -->
<dl>
  <dt>WMS</dt>
  <dd>Web Map Service，服务器出图片的地图服务</dd>
  <dt>WFS</dt>
  <dd>Web Feature Service，返回矢量要素、可编辑的服务</dd>
</dl>

💡 列表可以嵌套：<li> 里面再放一个 <ul>，做"二级菜单"的骨架。

四、图片 <img>

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

三个属性个个重要：

属性 作用 忘了会怎样
src 图片地址（相对/绝对路径，见第七节） 图片不显示
alt 图片的文字替代：图挂了显示它；屏幕阅读器读它；搜索引擎靠它 可访问性归零，图挂了用户一脸懵
width/height 建议写上（可只写一个，另一个等比缩放） 页面加载时布局跳动（CLS 问题）

<img> 是自闭合元素——它本身就是一个"物件"，不需要包内容。

五、表格 <table>

<table border="1">
  <caption>常见坐标系对比</caption>
  <!-- 表头区：th = table header，自带加粗居中 -->
  <thead>
    <tr>
      <!-- tr = table row 一行 -->
      <th>坐标系</th>
      <th>EPSG 代码</th>
      <th>用途</th>
    </tr>
  </thead>
  <!-- 表体区：td = table data 一个单元格 -->
  <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。

💡 HTML 表格只该用来展示"真正的表格数据"。用表格排版页面布局是上个时代的做法，布局用 CSS（第 06 节 Flex）。

六、超链接 <a>（本节主角）

<a> 是 anchor（锚）的缩写，一个 href 属性（hypertext reference）决定跳到哪。

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

<!-- ② 新标签页打开：加 target + 安全属性 -->
<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 操控你的页面（安全规范，写上就对了）。

七、路径：相对路径 vs 绝对路径（新手 bug 高发区）

my-site/
├── index.html          ← 你在这里
├── about.html
└── images/
    ├── logo.png
    └── maps/
        └── china.png

从 index.html 出发：

写法 含义 类型
src="./images/logo.png" 当前目录下的 images 里的 logo 相对路径
src="images/logo.png" 同上（./ 可省略） 相对路径
src="./images/maps/china.png" 一层层往下 相对路径
src="../logo.png" .. = 上一层目录 相对路径
src="/images/logo.png" 站点根目录开始（服务器模式下） 根相对路径
src="https://cdn.com/x.png" 完整网址 绝对路径

⚠️ 大坑：file:// 协议（直接双击打开）下 / 开头的根相对路径会失效；且 Windows 不区分大小写而 Linux 服务器区分——本地能显示、上线 404 的图片，九成是路径大小写问题。从今天起养成习惯：文件全小写，路径写相对。

八、动手跟练：02 · 图文混排页

配套文件：02-web-basics/examples/02-图文混排页.html（带注释，图片用网络占位图，联网可看）

步骤：

  1. Live Server 打开，通读代码，对照本节确认每个标签
  2. 完成文件里 4 处 TODO：外链加 target 安全属性、补一个锚点导航、换成本地图片、表格加一行数据
  3. 故意把一个 src 写错，观察 alt 文字出现——体会 alt 的价值
  4. Git 提交：git commit -m "02-02 图文混排页"

通关标准：

  • 页面包含：多级标题、两种列表、一张图（有 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 的职责。

十、下一步

砖头认全了，但页面还是"素颜" → 第 03 节：表单与输入控件，学会收集用户输入——以后 WebGIS 项目里"查询条件面板"的全套基本功。

TAGSweb