第三篇：HTML 核心标签（下）——链接、图片与容器

一、回顾与本篇目标

在上一篇中，你学会了六级标题、换行、水平线和注释，并且理解了块级元素（独占一行）和行内元素（共处一行）的本质区别。

但一个网页如果只有文字，它更像一篇 Word 文档，而不是一个真正的“网站”。“网站”之所以叫“网”，是因为它有链接，能把不同的页面编织在一起。此外，网页还需要展示图片、组织列表，以及用容器把内容分组。

本篇的目标：

1. 学会使用超链接 <a>，理解不同 href 的写法
2. 学会使用图片 <img>，理解 src 和 alt 的含义
3. 掌握无序列表 <ul> 和有序列表 <ol>
4. 理解通用容器 <div>（块级）和 <span>（行内）
5. 彻底搞懂 class 和 id 的区别

学完这一篇，你就能做出一个带链接、带图片、结构分明的完整页面。

二、超链接标签：<a>

超链接是 HTML 的灵魂。没有它，互联网就只是一堆孤立的文档。

基本语法

<a href="目标地址">链接文字</a>

• <a>：英文 anchor（锚）的缩写。
• href：英文 hypertext reference（超文本引用）的缩写，是 <a> 标签最重要的属性，用来指定点击后跳转到的目标地址。
• 链接文字：写在 <a> 和 </a> 之间的内容，是用户肉眼可见、可以点击的文字。

最简示例：

<a href="https://www.baidu.com">点击跳转到百度</a>

在浏览器中，这行文字会显示为蓝色带下划线的可点击链接。鼠标移上去，箭头会变成手型。点击后，浏览器会跳转到百度首页。

href 的四种写法

1. 绝对 URL：链接到外部网站

<a href="https://www.example.com/page.html">外部链接</a>

以 http:// 或 https:// 开头，指向互联网上的一个完整地址。用于链接到其他网站。

2. 相对路径：链接到本站内的其他页面

<a href="about.html">关于我</a>
<a href="posts/first-post.html">第一篇文章</a>
<a href="../index.html">返回首页</a>

• about.html：同一文件夹下的文件。
• posts/first-post.html：当前文件夹下的 posts 子文件夹里的文件。
• ../index.html：.. 表示上一级文件夹。

相对路径是制作多页面网站的基础，它让你的页面之间可以互相跳转。

3. 锚点链接：跳转到当前页面的某个位置

<!-- 在页面某处定义一个锚点 -->
<h2 id="section2">第二章</h2>

<!-- 点击后滚动到该位置 -->
<a href="#section2">跳转到第二章</a>

# 后面跟的是目标元素的 id 值。这种方式常用于“目录”功能。

4. 邮件链接：点击后打开邮件客户端

<a href="mailto:someone@example.com">发送邮件</a>

mailto: 后面跟邮箱地址，点击后会自动打开用户电脑上的默认邮件程序。

<a> 是行内元素

这一点非常重要：链接是行内元素。它不会独占一行，可以和周围的文字排在同一行。

示例：

<p>欢迎访问<a href="https://example.com">我的网站</a>，这里有更多内容。</p>

在浏览器中，“我的网站”四个字是蓝色链接，但它前后的文字“欢迎访问”和“，这里有更多内容”与它排在同一行。这就是行内元素的典型行为。

三、图片标签：<img>

基本语法

<img src="图片地址" alt="替代文字">

• <img> 是单标签，没有闭合标签。
• src：英文 source（来源）的缩写，指定图片文件的地址。可以是网络图片的绝对 URL，也可以是本地文件的相对路径。
• alt：英文 alternative text（替代文本）的缩写。当图片因为任何原因无法显示时，浏览器会显示这段文字。此外，屏幕阅读器会朗读 alt 内容，帮助视障用户理解图片含义。搜索引擎也会通过 alt 来判断图片内容。

示例 1：网络图片

<img src="https://www.example.com/photo.jpg" alt="一张风景照片">

示例 2：本地图片

假设你的 index.html 文件旁边有一个名为 images 的文件夹，里面有一张 cat.jpg：

<img src="images/cat.jpg" alt="一只橘猫">

alt 为什么重要

• 无障碍访问：视障用户使用屏幕阅读器浏览网页时，阅读器会读出 alt 的内容，让他们知道这张图片是什么。
• SEO：搜索引擎通过 alt 文本来理解图片内容，有助于图片搜索排名。
• 容错：当网络故障、图片被删除或路径写错时，alt 文字会显示在图片位置上，让用户不至于完全不知道这里是什么。

注意：如果图片纯粹是装饰性的（比如背景花纹），可以写 （空的 alt 属性），这样屏幕阅读器会跳过它。但作为初学者，养成给每张图片写有意义的 alt 的习惯非常重要。

宽高控制（初步）

你可以直接在 <img> 标签里用 width 和 height 属性来设定图片的显示尺寸，单位是像素：

<img src="photo.jpg" alt="照片" width="300" height="200">

这会强制图片以 300 像素宽、200 像素高显示。不过，更专业的做法是交给 CSS 来控制尺寸，HTML 只负责结构和语义。这一点我们在 CSS 篇会详细讲。

<img> 是行内替换元素

图片虽然是行内元素（可以和文字排在同一行），但它比较特殊，属于“行内替换元素”——你可以给它设置宽高。这一点在 CSS 进阶时会深入讨论。现在你只需要记住：图片和文字可以放在同一行。

四、列表标签：<ul>、<ol>、<li>

列表是组织信息的常用结构。HTML 提供了两种列表。

无序列表 <ul>

ul 是 unordered list 的缩写。每个列表项前面默认显示一个圆点（项目符号）。

<ul>
  <li>苹果</li>
  <li>香蕉</li>
  <li>橙子</li>
</ul>

效果：

• 苹果
• 香蕉
• 橙子

有序列表 <ol>

ol 是 ordered list 的缩写。每个列表项前面默认显示数字序号。

<ol>
  <li>第一步：打开编辑器</li>
  <li>第二步：编写 HTML 代码</li>
  <li>第三步：保存并预览</li>
</ol>

效果：

1. 第一步：打开编辑器
2. 第二步：编写 HTML 代码
3. 第三步：保存并预览

列表项 <li>

li 是 list item 的缩写。它必须嵌套在 <ul> 或 <ol> 里面，不能单独使用。<li> 是块级元素，每个列表项会独占一行。

列表的嵌套

你可以在一个列表项里再放一个完整的列表，形成层级结构：

<ul>
  <li>水果
    <ul>
      <li>苹果</li>
      <li>香蕉</li>
    </ul>
  </li>
  <li>蔬菜
    <ul>
      <li>白菜</li>
      <li>萝卜</li>
    </ul>
  </li>
</ul>

浏览器会自动为嵌套列表改变项目符号样式（外层的圆点，内层可能是空心圆），并适当缩进。

五、通用容器：<div> 和 <span>

这两个标签本身没有任何视觉含义，它们的作用是把内容分组，为 CSS 和 JavaScript 提供“抓手”。

<div>：块级容器

• 全称：division（分区）。
• 类型：块级元素，独占一行。
• 用途：将一组相关的块级内容包裹在一起，形成一个整体区块。网页布局的骨架——导航栏、主体内容区、侧边栏、页脚——几乎都是用 <div> 来搭建的。

<div>
  <h2>最新文章</h2>
  <p>这是一篇文章的摘要……</p>
  <p>这是另一篇文章的摘要……</p>
</div>

<span>：行内容器

• 全称：span（跨度）。
• 类型：行内元素，不会换行。
• 用途：在一段文字中，给某几个字或词加个“包装”，以便单独设置它们的样式或让 JS 选中它们。

<p>今天的温度是<span>28</span>摄氏度。</p>

用肉眼在浏览器里看，<span> 不会产生任何视觉变化，它就像一层透明的膜。但一旦你给 <span> 加上 class 并用 CSS 去控制，它包裹的那几个字就可以变成红色、变大、加粗——而周围的文字不受影响。

六、class 和 id 属性

前面我们多次提到 class 和 id，现在正式解释它们的含义和区别。它们是 HTML 最重要的两个通用属性，任何标签都可以拥有它们。

class：类名

• 可以重复：同一个类名可以用在多个元素上。
• 一个元素可以有多个类名：用空格隔开，比如 class="btn primary large"。
• 主要用途：给 CSS 作为选择器，给一组元素施加相同的样式。

<p class="highlight">这段文字需要高亮显示。</p>
<p class="highlight">这段文字也需要高亮显示。</p>
<p>这段文字不需要高亮。</p>

之后在 CSS 里写 .highlight { background: yellow; }，前两段就会有黄底，第三段不受影响。

id：唯一标识

• 在一个页面中必须唯一：同一个 id 值不能出现两次。就像身份证号，一个页面里只能有一个 id="header"。
• 主要用途：给 JavaScript 作为定位某个特定元素的精确钩子，也可以用作锚点链接的目标。

<h1 id="main-title">网站主标题</h1>
<!-- 页面其他地方不能再用 id="main-title" -->

class vs id 速记对比

对比项	class	id
可重复性	多个元素可以共用同一个类名	一个页面中，一个 id 值只能用一次
多值	一个元素可以有多个类名	一个元素只能有一个 id
CSS 选择器	用 .（点号）开头，如 .highlight	用 #（井号）开头，如 #main-title
主要用途	样式控制、批量操作	JS 精确定位、锚点跳转

命名建议

• 使用有意义的英文单词，描述内容或功能，而不是描述外观。好名字：nav、footer、error-message。坏名字：red-text、big-font（以后如果颜色和大小变了，名字就不对了）。
• 多个单词用连字符 - 连接，这是 HTML/CSS 领域的主流习惯：main-content、card-title。
• 不要用中文命名，虽然浏览器能解析，但不规范。

七、本篇综合实战：一张个人名片

下面这段代码综合运用了本篇学习的全部标签。请你手敲一遍，仔细体会每个标签的角色：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>个人名片</title>
  <style>
    /* 给页面加点简单的美化，看不懂没关系，CSS 篇会详解 */
    body {
      background: #f5f5f5;
      font-family: sans-serif;
      display: flex;
      justify-content: center;
      padding-top: 60px;
    }
    .card {
      background: white;
      width: 350px;
      padding: 30px;
      border-radius: 10px;
      box-shadow: 0 2px 10px rgba(0,0,0,0.1);
      text-align: center;
    }
    .card img {
      width: 100px;
      border-radius: 50%;
      margin-bottom: 16px;
    }
    .card h2 {
      margin-bottom: 4px;
    }
    .card .title {
      color: #666;
      font-size: 14px;
      margin-bottom: 16px;
    }
    .card ul {
      text-align: left;
      padding-left: 20px;
    }
    .card a {
      color: #4a90d9;
      text-decoration: none;
    }
    .card a:hover {
      text-decoration: underline;
    }
  </style>
</head>
<body>

  <div class="card">
    <!-- 头像区域 -->
    <img src="https://via.placeholder.com/100" alt="头像">

    <!-- 基本信息 -->
    <h2 id="name">张三</h2>
    <p class="title">前端开发初学者</p>

    <!-- 简介 -->
    <p>你好！我是<span class="highlight">张三</span>，正在系统学习前端开发。</p>

    <!-- 技能列表 -->
    <h3>正在学习的技能</h3>
    <ul>
      <li>HTML 基础语法</li>
      <li>CSS 选择器与布局</li>
      <li>JavaScript 编程</li>
    </ul>

    <!-- 联系方式 -->
    <h3>联系我</h3>
    <p>
      <a href="mailto:zhangsan@example.com">发送邮件</a>
       | 
      <a href="https://github.com">GitHub</a>
    </p>
  </div>

</body>
</html>

代码解析（请对照阅读）：

• 整个名片被一个 <div class="card"> 包裹，这是一个块级容器，用来把名片内容集中在一起，方便整体控制（比如白色背景、圆角、阴影）。
• <img> 标签展示了头像图片，alt 写了“头像”。
• <h2 id="name"> 给姓名标题设了一个唯一的 id，以后 JS 可以精准找到它。
• <p class="title"> 使用了 class 来标识这是“职称”文字，CSS 用 .title 给它设置了灰色小字。
• <span class="highlight"> 包裹了简介中的名字，虽然我们暂时还没在 CSS 里给 .highlight 写样式，但这个结构为后续操作留好了钩子。
• <ul> 和 <li> 列出了技能清单。
• <a> 链接分别是邮件链接（mailto:）和外部网站链接。

你可以把这段代码复制到 .html 文件里，在浏览器中打开看看效果。然后尝试修改图片地址、姓名、技能列表，把它变成你自己的名片。

八、本篇动手练习

练习 1：链接练习

新建 practice3-1.html，写出以下三个链接：

1. 一个跳转到百度首页的链接。
2. 一个跳转到同一个文件夹下 about.html 的链接（你可以先建一个空的 about.html 文件）。
3. 一个邮件链接，点击后打开邮件客户端，收件人为你自己的邮箱地址。

练习 2：图片练习

新建 practice3-2.html，在页面中插入一张图片。然后故意把 src 写错，刷新页面，观察 alt 文字是否正常显示。

练习 3：列表练习

新建 practice3-3.html，用无序列表写出你最喜欢的三部电影，用有序列表写出你今天的学习计划（至少三步）。然后在无序列表里嵌套一个子列表。

练习 4：名片改造

打开第七节的综合代码，把它改造成你自己的个人名片。修改姓名、头像（可以换成你喜欢的任何网络图片链接）、技能列表和联系方式链接。

九、本篇小结

这一篇你学会了：

• <a> 超链接：href 的四种写法（绝对 URL、相对路径、锚点、邮件），以及链接是行内元素。
• <img> 图片：单标签，src 指定来源，alt 提供替代文本，对无障碍和 SEO 至关重要。
• <ul>（无序）和 <ol>（有序）列表，以及 <li> 列表项，可以嵌套。
• <div>（块级容器）和 <span>（行内容器）用于分组内容，为 CSS 和 JS 提供抓手。
• class（可重复，用于样式）和 id（唯一，用于精确定位和锚点）的区别和命名规范。

现在，你已经掌握了 HTML 最核心的标签集合。从无到有写出一个结构完整的网页——带标题层级、段落、链接、图片、列表、有组织的容器和 class/id 标识——这件事你已经可以做到了。

下一篇预告

HTML 篇到此结束。下一篇，我们将正式进入 CSS 入门。你会学到：CSS 写在哪里（内联、内部、外部样式表），三种基本选择器（标签选择器、类选择器、ID 选择器），以及如何用 color、font-size、background 等属性把白纸黑字的页面变得美观。准备好告别默认样式，真正“打扮”你的网页吧。

前端·零基础入门专题，每周更新。