HTML5 从入门到精通：连接世界——超链接与图片，还有表格初探

摘要：本文是 HTML5 零基础系列的第三篇。你将学习如何使用超链接 <a> 在不同页面之间跳转，或者在同一页面内定位（锚点）；学习插入图片 <img> 并掌握图片格式（jpg、png、gif、webp）的选择；理解相对路径与绝对路径的区别，避免图片或链接打不开的尴尬；最后初步接触表格标签 <table>、<tr>、<td>、<th>，学会制作简单的数据表格。

一、前言

在上一篇中，我们学习了文本格式化标签、列表、容器 <div> 和 <span>，以及字符实体。但真正的网页不能只停留在单页面------我们需要通过超链接 让页面之间互相连接，通过图片让网页更生动，还需要用表格来展示数据。今天我们就来填补这些空白，让你的网页从一个孤立的文档变成一个信息网络。

二、超链接 `<a>` 标签 ------ 互联网的"桥梁"

2.1 基本语法

超链接使用 <a> 标签（a 代表 anchor，锚点），最核心的属性是 href（Hypertext Reference，超文本引用），用来指定链接的目标地址。

html 复制代码

<a href="目标地址">链接文本或图片</a>

点击链接文本或图片后，浏览器会跳转到 href 指向的地址。

示例：最简单的跳转到百度首页。

html 复制代码

<p>点击下面链接打开百度：</p>
<a href="https://www.baidu.com">前往百度搜索</a>

2.2 `target` 属性 ------ 控制打开方式

target 属性指定在哪个窗口或标签页中打开链接。常用值：

值	作用
`_self`	在当前页面跳转（默认值）
`_blank`	在新标签页或新窗口中打开
`_parent`	在父级框架中打开（用于框架页面，较少用）
`_top`	在整个窗口中打开（跳出所有框架）

示例：让链接在新标签页打开，避免覆盖当前页面。

html 复制代码

<a href="https://www.bilibili.com" target="_blank">去B站看视频（新标签页）</a>

2.3 相对路径与绝对路径 ------ 链接到本地文件

当链接指向你自己网站内的其他页面时，不需要写完整的网址，只需要写相对路径。

绝对路径 ：完整的 URL，例如 https://www.example.com/about.html。
相对路径：基于当前文件所在文件夹的位置来描述目标文件。

html 复制代码

假设文件夹结构如下：
my_site/
├── index.html
├── about.html
├── contacts/
│   └── info.html
└── images/
    └── logo.png
#在 index.html 中链接到同一级目录下的 about.html：
<a href="about.html">关于我们</a>
#在 index.html 中链接到 contacts 文件夹内的 info.html：
<a href="contacts/info.html">联系方式</a>
#在 contacts/info.html 中链接回 index.html：
<a href="../index.html">返回首页</a>
../ 表示上一级目录。

示例：在 Sublime Text 中创建上述文件夹和文件，写一个简单的导航。

index.html 内容：

html 复制代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>我的小站 - 首页</title>
</head>
<body>
    <h1>欢迎来到我的网站</h1>
    <p><a href="about.html">关于我们</a> | <a href="contacts/info.html">联系方式</a></p>
    <p><a href="https://www.baidu.com" target="_blank">外部链接：百度</a></p>
</body>
</html>

about.html 和 contacts/info.html 可以写简单的内容，用于测试跳转。

2.4 锚点链接 ------ 同一页面内跳转

如果页面内容很长，我们可以设置锚点，点击链接后直接滚动到页面中的某个位置。

步骤：

为要跳转到的目标元素设置 id 属性。

链接的 href 属性写 #id名。

示例：

html 复制代码

<body>
    <h1>长文章目录</h1>
    <p>
        <a href="#section1">第一章：HTML简介</a><br>
        <a href="#section2">第二章：标签语法</a><br>
        <a href="#section3">第三章：链接与图片</a>
    </p>

    <h2 id="section1">第一章：HTML简介</h2>
    <p>这里是第一章的内容......（此处省略500字）</p>

    <h2 id="section2">第二章：标签语法</h2>
    <p>这里是第二章的内容......（此处省略500字）</p>

    <h2 id="section3">第三章：链接与图片</h2>
    <p>这里是第三章的内容......（此处省略500字）</p>
</body>

额外技巧 ：如果希望点击链接回到页面顶部，可以使用 href="#"（会跳转到页面顶部，同时可能添加一个空锚点）。更现代的做法是 href="#top" 或直接写 href="#"。

三、图片 `<img>` 标签 ------ 让网页图文并茂

3.1 基本语法

<img> 是单标签，核心属性：

src：图片文件的路径（相对路径或绝对路径）。
alt：替代文本，当图片无法显示时展示，同时也是屏幕阅读器的依据，对 SEO 和无障碍访问很重要。

示例：

html 复制代码

<img src="images/logo.png" alt="网站logo">

3.2 图片路径写法

图片与 HTML 在同一文件夹：src="photo.jpg"
图片在子文件夹：src="images/photo.jpg"
图片在上一级文件夹：src="../photo.jpg"
使用绝对路径（外部图片）：src="https://example.com/pic.jpg"（注意：外部图片可能因防盗链无法显示）

实操：在 my_site 文件夹下新建 images 文件夹，放入一张 test.jpg。然后在 index.html 中写：

html 复制代码

<img src="images/test.jpg" alt="测试图片">

3.3 图片的宽度和高度属性

在 <img> 标签中直接使用 width 和 height 属性来控制图片显示尺寸（单位是像素）。但注意：这属于 HTML 表现属性，不是 CSS。我们只是临时使用。

html 复制代码

<img src="images/logo.png" alt="logo" width="200" height="100">

如果只指定其中一个属性，另一个会按比例自动缩放。建议指定宽高可以避免图片加载时页面布局抖动。

3.4 常见图片格式

格式	特点	适用场景
JPEG / JPG	有损压缩，不支持透明，文件较小	照片、复杂图像
PNG	无损压缩，支持透明，文件较大	图标、截图、需要透明背景的图片
GIF	支持动画，只支持256色	简单动画、表情包
WebP	现代格式，兼顾压缩和透明，浏览器支持度高	兼顾质量和体积，推荐使用

示例：展示四种格式的图片。

html 复制代码

<p>JPEG 示例：<img src="photo.jpg" alt="风景照"></p>
<p>PNG 示例：<img src="icon.png" alt="图标"></p>
<p>GIF 示例：<img src="cat.gif" alt="动画猫"></p>
<p>WebP 示例：<img src="banner.webp" alt="横幅"></p>

3.5 图片作为超链接

把 <img> 放在 <a> 标签中间，点击图片即可跳转。

示例：

html 复制代码

<a href="https://www.baidu.com" target="_blank">
    <img src="images/baidu_logo.png" alt="点击访问百度" width="150">
</a>

四、表格 `<table>` 标签 ------ 整齐展示数据

表格用于展示二维数据，比如成绩表、价格表、日程表等。在 HTML5 中，表格不应该用于页面布局（那是 CSS 的事），但仍然是非常有用的数据展示工具。

4.1 表格的基本结构

标签	含义
`<table>`	定义整个表格
`<tr>`	table row，定义一行
`<td>`	table data，定义单元格内容
`<th>`	table header，表头单元格（加粗居中）
`<caption>`	表格标题（可选）

示例：一个简单的 2 行 2 列表格。

html 复制代码

<table border="1">   <!-- border属性临时用来显示边框，实际工作中用CSS，这里仅为了教学看到边界 -->
    <caption>学生成绩表</caption>
    <tr>
        <th>姓名</th>
        <th>分数</th>
    </tr>
    <tr>
        <td>小明</td>
        <td>95</td>
    </tr>
    <tr>
        <td>小红</td>
        <td>88</td>
    </tr>
</table>

注意：border="1" 是一个演示用的 HTML 属性，作用是给表格添加边框，方便观察。在实际开发中应该使用 CSS 来控制边框，但本系列暂未讲到 CSS，所以暂时允许使用 border 属性。

4.2 合并单元格（colspan 和 rowspan）

colspan：跨列合并。例如一个单元格横向占用多列。
rowspan：跨行合并。例如一个单元格纵向占用多行。

示例：合并第一行的两列为一个单元格。

html 复制代码

<table border="1">
    <caption>课程表</caption>
    <tr>
        <th>时间段</th>
        <th>周一</th>
        <th>周二</th>
    </tr>
    <tr>
        <td>上午</td>
        <td>数学</td>
        <td>语文</td>
    </tr>
    <tr>
        <td>下午</td>
        <td colspan="2">体育（合班）</td>
    </tr>
</table>

跨行示例：

html 复制代码

<table border="1">
    <caption>团队成员</caption>
    <tr>
        <th>姓名</th>
        <th>特长</th>
    </tr>
    <tr>
        <td rowspan="2">张三</td>
        <td>HTML5</td>
    </tr>
    <tr>
        <td>CSS3</td>
    </tr>
    <tr>
        <td>李四</td>
        <td>JavaScript</td>
    </tr>
</table>

4.3 表格的高级结构：`<thead>`、`<tbody>`、`<tfoot>`

为了让表格结构更清晰，可以将表头、主体、表尾分组。

<thead>：包裹表头行（通常包含 <th>）。
<tbody>：包裹数据主体，可以有多个。
<tfoot>：包裹表尾行（如汇总、平均值）。

示例：

html 复制代码

<table border="1">
    <caption>季度销售额</caption>
    <thead>
        <tr>
            <th>季度</th>
            <th>销售额（万元）</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Q1</td>
            <td>120</td>
        </tr>
        <tr>
            <td>Q2</td>
            <td>135</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>总计</td>
            <td>255</td>
        </tr>
    </tfoot>
</table>

五、综合实操：创建一个简单的"图片画廊"页面并包含链接和表格

新建 gallery.html，内容如下：

html 复制代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>我的图片画廊</title>
</head>
<body>
    <h1>欢迎来到图片画廊</h1>
    <p><a href="index.html">首页</a> | <a href="about.html">关于</a> | 画廊（当前）</p>
    <hr>

    <h2>精选图片</h2>
    <p>点击图片可查看大图（示例链接为外部网站）</p>
    <a href="https://www.pexels.com" target="_blank">
        <img src="images/sample1.jpg" alt="示例图片1" width="200">
    </a>
    <a href="https://www.pexels.com" target="_blank">
        <img src="images/sample2.png" alt="示例图片2" width="200">
    </a>

    <h2>图片信息表</h2>
    <table border="1">
        <caption>图片列表</caption>
        <thead>
            <tr><th>缩略图</th><th>文件名</th><th>格式</th><th>描述</th></tr>
        </thead>
        <tbody>
            <tr><td><img src="images/sample1.jpg" width="50" alt="thumb"></td><td>sample1.jpg</td><td>JPEG</td><td>风景照</td></tr>
            <tr><td><img src="images/sample2.png" width="50" alt="thumb"></td><td>sample2.png</td><td>PNG</td><td>图标</td></tr>
        </tbody>
        <tfoot>
            <tr><td colspan="4">更多图片即将添加</td></tr>
        </tfoot>
    </table>

    <h2>回到顶部锚点</h2>
    <p><a href="#">回到页面顶部</a></p>
</body>
</html>

六、Sublime Text 新技巧

快速生成多个标签 ：在 Emmet 中，输入 ul>li*3 然后按 Tab，会生成一个无序列表包含三个 <li>。
快速生成带属性的标签 ：输入 a[href="https://example.com"] 按 Tab，生成 <a href="https://example.com"></a>。
批量重命名标签 ：将光标放在开始标签上，按 Ctrl+Shift+A 选中整个标签内容，然后修改。

七、常见问题与解决方案

7.1 图片不显示？

检查 src 路径是否正确（区分大小写，文件名拼写）。
检查图片是否真的放在该目录下。
检查网络图片是否允许外链（有时需要复制图片地址到浏览器单独测试）。

7.2 链接打不开？

检查 href 是否漏写了协议（如 https://），对于外部链接必须写全。
对于本地文件，检查相对路径是否多一层或少一层目录。

7.3 锚点不工作？

确保目标元素的 id 与链接中的 #id 完全一致（包括大小写）。
确保目标元素存在于页面中，且没有被其他元素遮挡（一般不会）。

7.4 表格边框太丑？

目前我们使用了 border="1" 作为临时方案，后续学习 CSS 后可以用更美观的样式。暂时接受这个简陋边框。

八、本篇文章总结

核心知识点回顾：

超链接 <a>：

href 定义目标地址，target="_blank" 新标签页打开。
相对路径与绝对路径：./ 同级，../ 上级。
锚点链接：<a href="#id"> + 目标元素的 id。

图片 <img>：

src 定义图片路径，alt 替代文本（必需，最好写上）。
宽高属性 width、height（临时用法）。
常见图片格式：JPEG、PNG、GIF、WebP。
图片作为超链接。

表格 <table>：

行 <tr>，单元格 <td>，表头 <th>，标题 <caption>。
合并单元格：colspan、rowspan。
表格结构：<thead>、<tbody>、<tfoot> 增强语义。

综合实操：制作了图片画廊页面，包含图片链接、表格展示图片信息、锚点返回顶部。

如果这篇文章帮你解决了实操上的困惑，别忘记点击点赞、分享，也可以留言告诉我你遇到的其它问题，我会尽快回复。动手练习是掌握编程最快的方法，请务必亲手敲一遍本文的所有示例代码，并截图保存你的成果。你的关注是我坚持原创和细节共享的力量来源，谢谢大家。

HTML5 从入门到精通：连接世界——超链接与图片，还有表格初探

一、前言

二、超链接 <a> 标签 ------ 互联网的"桥梁"

2.1 基本语法

2.2 target 属性 ------ 控制打开方式

2.3 相对路径与绝对路径 ------ 链接到本地文件

2.4 锚点链接 ------ 同一页面内跳转

三、图片 <img> 标签 ------ 让网页图文并茂

3.1 基本语法

3.2 图片路径写法

3.3 图片的宽度和高度属性

3.4 常见图片格式

3.5 图片作为超链接

四、表格 <table> 标签 ------ 整齐展示数据

4.1 表格的基本结构

4.2 合并单元格（colspan 和 rowspan）

4.3 表格的高级结构：<thead>、<tbody>、<tfoot>

五、综合实操：创建一个简单的"图片画廊"页面并包含链接和表格

六、Sublime Text 新技巧

七、常见问题与解决方案

7.1 图片不显示？

7.2 链接打不开？

7.3 锚点不工作？

7.4 表格边框太丑？

八、本篇文章总结

二、超链接 `<a>` 标签 ------ 互联网的"桥梁"

2.2 `target` 属性 ------ 控制打开方式

三、图片 `<img>` 标签 ------ 让网页图文并茂

四、表格 `<table>` 标签 ------ 整齐展示数据

4.3 表格的高级结构：`<thead>`、`<tbody>`、`<tfoot>`