第3章 行内元素

习题解答

🙈 隐藏所有答案

编程题

1. 使用列表元素和超链接元素制作如图 3-25 所示的网页。
图 3-25 列表和超链接

思路分析：

观察截图可以发现，这是一个新闻列表页面：9 条新闻标题排列成无序列表（前面有小圆点），每条新闻都是可以点击的超链接（蓝色带下划线），标题后面紧跟着日期。

所以思路很清晰：用 <ul> 做无序列表，每个 <li> 里放一个 <a> 超链接包裹新闻标题，日期直接跟在链接文字后面就好。

完整代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>列表链接</title>
</head>
<body>
    <!-- 用无序列表 ul 来组织新闻条目 -->
    <ul>
        <!-- 每条新闻用 li 包裹，标题部分用 a 标签做成超链接 -->
        <li><a href="#">到新疆去看花儿，新疆春季旅游好去处</a>2020-08-03</li>
        <li><a href="#">寻找别样的日本风光--从东京一路向南</a>2020-07-20</li>
        <li><a href="#">自驾云南 大理洱海 泸沽湖 丽江玉龙雪山</a>2020-07-20</li>
        <li><a href="#">探秘黔东南，寻觅那多彩的民族风情</a>2020-08-03</li>
        <li><a href="#">着迷那片宝石蓝，回味那些美好-台湾</a>2020-07-20</li>
        <li><a href="#">消失的地平线上的"香巴拉"和"女儿国"——秋游香格里拉、泸沽湖</a>2020-07-20</li>
        <li><a href="#">「电影+美食+后青春期追星」香港 就像一场青春往事</a>2020-08-03</li>
        <li><a href="#">花见三城：京都、奈良、名古屋的26处樱花印象</a>2020-07-20</li>
        <li><a href="#">欧洲经典传奇童话之旅</a>2020-07-20</li>
    </ul>
</body>
</html>

要点说明：

  • <ul> 是无序列表标签，默认会在每个列表项前面加一个小圆点（项目符号）。
  • <li> 是列表项标签，必须放在 <ul> 里面。
  • <a href="#">...</a> 是超链接标签，href="#" 表示空链接（点了不跳转），实际项目中要换成真实的网址。
  • 日期文字放在 <a> 标签外面，所以日期不是链接的一部分，不会变成蓝色。

📖 参见 3.3 超链接元素 a、第2章 列表元素（ul、li）

2. 使用表格和列表制作如图 3-26 所示的清单。
图 3-26 表格、列表（食材清单）

思路分析：

从截图来看，页面很简洁：顶部有一个居中的大标题"学校食堂采购食材清单"，下面是一个嵌套列表——外层是无序列表（主食、水果、肉类三个大类，前面有小圆点），内层是有序列表（具体食材，前面有数字编号 1、2、3...）。

这道题的重点就是列表嵌套：在 <ul> 的 <li> 里面再放一个 <ol>，就能实现"大类用圆点、小项用数字"的效果。

完整代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>表格、列表</title>
</head>
<body>
    <!-- 标题居中显示 -->
    <h2 style="text-align:center">学校食堂采购食材清单</h2>

    <!-- 外层无序列表：三个大类 -->
    <ul>
        <!-- 第一类：主食 -->
        <li>主食
            <!-- 内层有序列表：具体食材，自动编号 1,2,3... -->
            <ol>
                <li>薯条</li>
                <li>包子</li>
                <li>饺子</li>
                <li>面包</li>
                <li>馒头</li>
            </ol>
        </li>

        <!-- 第二类：水果 -->
        <li>水果
            <ol>
                <li>西瓜</li>
                <li>桔子</li>
                <li>哈蜜瓜</li>
                <li>草莓</li>
                <li>葡萄</li>
                <li>香蕉</li>
                <li>苹果</li>
            </ol>
        </li>

        <!-- 第三类：肉类 -->
        <li>肉类
            <ol>
                <li>羊肉</li>
                <li>牛肉</li>
                <li>猪肉</li>
                <li>鸡肉</li>
                <li>北极虾</li>
                <li>生鱼片</li>
            </ol>
        </li>
    </ul>
</body>
</html>

要点说明：

  • <ul> 是无序列表（Unordered List），列表项前面显示小圆点。
  • <ol> 是有序列表（Ordered List），列表项前面自动显示数字编号 1、2、3...。
  • 嵌套写法：把 <ol> 写在 <li> 标签内部（注意不是和 <li> 并列，而是在里面），浏览器就会自动缩进显示子列表。
  • 题目说"使用表格和列表"，但从截图效果来看主要是嵌套列表实现的。如果要加表格边框包裹，可以在外面套一个 <table>，把整个列表放在一个单元格 <td> 里。

📖 参见第2章 列表元素（ul、ol、li 的嵌套用法）

3. 使用图片元素和超链接元素制作如图 3-27 所示的网页。
图 3-27 图片和超链接

思路分析：

截图里是 3 行 3 列、共 9 张美食图片，每张图片都是可以点击的超链接。这就要用到"图像作为超链接热点"的写法：把 <img> 标签放在 <a> 标签里面，这样点击图片就能跳转。

布局上，因为 <img> 默认是行内元素，多张图片会自动排在一行，超过容器宽度就会自动换行，所以不需要额外的布局代码。

完整代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>美食图册</title>
</head>
<body>
    <!-- 9 张美食图片，每张用 a 标签包裹，点击可跳转 -->
    <!-- 注意：这里用占位色块代替实际图片，实际使用时请替换为真实图片路径 -->
    <p>
        <!-- 第1行：3张图片 -->
        <a href="#">
            <!-- 替换为实际图片：<img src="images/food1.jpg" alt="美食1" width="200" height="150" /> -->
            <div style="width:200px;height:150px;background:#ccc;display:inline-block;"></div>
        </a>
        <a href="#">
            <div style="width:200px;height:150px;background:#ccc;display:inline-block;"></div>
        </a>
        <a href="#">
            <div style="width:200px;height:150px;background:#ccc;display:inline-block;"></div>
        </a>
    </p>
    <p>
        <!-- 第2行：3张图片 -->
        <a href="#">
            <div style="width:200px;height:150px;background:#ccc;display:inline-block;"></div>
        </a>
        <a href="#">
            <div style="width:200px;height:150px;background:#ccc;display:inline-block;"></div>
        </a>
        <a href="#">
            <div style="width:200px;height:150px;background:#ccc;display:inline-block;"></div>
        </a>
    </p>
    <p>
        <!-- 第3行：3张图片 -->
        <a href="#">
            <div style="width:200px;height:150px;background:#ccc;display:inline-block;"></div>
        </a>
        <a href="#">
            <div style="width:200px;height:150px;background:#ccc;display:inline-block;"></div>
        </a>
        <a href="#">
            <div style="width:200px;height:150px;background:#ccc;display:inline-block;"></div>
        </a>
    </p>
</body>
</html>

如果有实际图片文件，代码应该是这样的：

<!-- 用 a 包裹 img，实现图片超链接 -->
<a href="链接地址">
    <img src="images/food1.jpg" alt="美食图片1" width="200" height="150" />
</a>

要点说明：

  • <a href="..."><img .../></a> 就是"图片超链接"的标准写法——把 <img> 放在 <a> 里面。
  • <img> 标签的 src 属性指定图片路径，alt 属性是图片加载失败时显示的替代文字，width 和 height 设置图片尺寸。
  • 多张 <img> 是行内元素，会自动横向排列，满一行后自动换行，所以天然形成了 3×3 的网格布局。
  • 示例中用灰色占位色块 <div> 替代了实际图片，同学们练习时替换成真实图片路径即可。

📖 参见 3.2 图像元素 img、3.3 超链接元素 a（第2点：用图像作为超链接热点）

4. 制作图文混排网页，如图 3-28 所示。
图 3-28 图文混排网页

思路分析：

这道题要做一个"图文混排"的页面，从截图可以看到：

  • 标题"到新疆去看花儿"（粗体居中或靠左）
  • 发布时间：2020-05-17
  • 一张大的风景图片在左侧，文字环绕在图片右边和下方
  • 右侧有一个目录导航列表
  • 下方有多段正文描述新疆的美丽风景

关键技巧是给 <img> 设置 align="left"（或用 CSS 的 float:left），这样文字就会自动环绕在图片右侧，这就是"图文混排"的核心。

完整代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>到新疆去看花儿</title>
</head>
<body>
    <!-- 页面整体用一个大 div 包裹，方便控制宽度 -->
    <div style="width:900px;margin:0 auto;">

        <!-- 左侧主内容区 -->
        <div style="float:left;width:620px;">
            <h3>到新疆去看花儿</h3>
            <p>发布时间：2020-05-17</p>

            <!-- 图片左浮动，文字自动环绕在图片右侧 -->
            <!-- 替换为实际图片：<img src="images/xinjiang.jpg" ... /> -->
            <div style="width:300px;height:200px;background:#ccc;float:left;margin:0 15px 10px 0;"></div>

            <p>新疆，是一个神秘而美丽的地方。每年春天，当冰雪消融、大地回春，
            新疆各地的花儿便次第绽放，将辽阔的土地装扮成一片花的海洋。
            从伊犁河谷的杏花，到天山脚下的野百合，再到塔克拉玛干边缘的胡杨花，
            每一处都美得令人心醉。</p>

            <p>伊犁杏花沟是新疆最负盛名的赏花地之一。三万多亩野生杏树分布在起伏的山坡上，
            每到四月，粉白色的杏花铺满山谷，与远处的雪山相映成趣，如诗如画。
            清晨的薄雾中，牧民赶着羊群从花海中穿过，构成一幅绝美的田园画卷。</p>

            <p>除了杏花沟，天山红花也是新疆春季的一大看点。五六月间，
            天山北坡的草原上，大片大片的红色虞美人竞相盛开，
            远远望去就像给草原铺上了一层红色的地毯，蔚为壮观。</p>

            <p>来新疆看花，不仅能欣赏到大自然的鬼斧神工，
            还能感受到浓郁的民族风情和独特的西域文化。
            无论是自驾穿越独库公路，还是骑马穿行在花海之中，
            都将是一次难忘的旅行体验。</p>
        </div>

        <!-- 右侧目录导航 -->
        <div style="float:right;width:250px;border:1px solid #ccc;padding:10px;">
            <h4>目录导航</h4>
            <ol>
                <li><a href="#">伊犁杏花沟</a></li>
                <li><a href="#">天山红花</a></li>
                <li><a href="#">薰衣草花田</a></li>
                <li><a href="#">胡杨林</a></li>
                <li><a href="#">油菜花海</a></li>
                <li><a href="#">旅行攻略</a></li>
            </ol>
        </div>

        <!-- 清除浮动 -->
        <div style="clear:both;"></div>
    </div>
</body>
</html>

要点说明：

  • float:left 让图片"浮动"到左边，后面的文字会自动环绕到图片的右侧和下方——这就是"图文混排"的核心原理。
  • 也可以用 HTML 属性 <img align="left"> 达到同样的效果，但现在更推荐用 CSS 的 float。
  • margin:0 15px 10px 0 给图片右边和下边留了一点空白，防止文字紧贴着图片，看起来更舒服。
  • 右侧的目录导航用了 float:right，让它浮动到页面右边。
  • 最后的 <div style="clear:both;"> 是"清除浮动"，防止浮动元素影响后面的内容布局。这是使用 float 时的标准做法。
  • 示例中用灰色色块替代了风景图片，同学们练习时替换成实际的图片文件路径即可。

📖 参见 3.2 图像元素 img（img 的 align 属性）、3.3 超链接元素 a