第2章 块级元素

习题解答

隐藏所有答案

编程题

1. 制作如图 2-21 所示的课程表。
图 2-21 课程表

这道题考查的是 table 表格 的综合运用，重点在 rowspan（跨行合并）。仔细观察截图可以发现：左侧的"上午"跨了 2 行，"下午"也跨了 2 行；表头第一个单元格显示"时间\日期"，右边是"一"到"五"。所有课程内容都填"语文"。

思路很简单：先画好表头行，再逐行填内容。遇到需要合并的单元格，就在第一行写 rowspan="2"，然后下一行就少写一个 <td>（因为被上面吃掉了）。

完整代码如下：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>课程表</title>
</head>
<body>
    <!-- 标题居中显示 -->
    <h3 style="text-align:center">课程表</h3>

    <!-- border="1" 显示边框，cellspacing="0" 让边框合并不留缝隙 -->
    <table border="1" cellspacing="0" cellpadding="5" style="margin:0 auto">
        <!-- 表头行 -->
        <tr>
            <th colspan="2">时间\日期</th>
            <th>一</th>
            <th>二</th>
            <th>三</th>
            <th>四</th>
            <th>五</th>
        </tr>

        <!-- 上午第1节：rowspan="2" 让"上午"占两行 -->
        <tr>
            <td rowspan="2">上午</td>
            <td>9:30-10:15</td>
            <td>语文</td>
            <td>语文</td>
            <td>语文</td>
            <td>语文</td>
            <td>语文</td>
        </tr>
        <!-- 上午第2节：因为"上午"已经 rowspan 占位，这行少写一个 td -->
        <tr>
            <td>10:25-11:10</td>
            <td>语文</td>
            <td>语文</td>
            <td>语文</td>
            <td>语文</td>
            <td>语文</td>
        </tr>

        <!-- 下午第1节：rowspan="2" 让"下午"占两行 -->
        <tr>
            <td rowspan="2">下午</td>
            <td>14:30-15:15</td>
            <td>语文</td>
            <td>语文</td>
            <td>语文</td>
            <td>语文</td>
            <td>语文</td>
        </tr>
        <!-- 下午第2节 -->
        <tr>
            <td>15:25-16:10</td>
            <td>语文</td>
            <td>语文</td>
            <td>语文</td>
            <td>语文</td>
            <td>语文</td>
        </tr>
    </table>
</body>
</html>

要点说明：

  • rowspan="2" 表示该单元格纵向合并 2 行。写了 rowspan 的那一行算第 1 行，下面被合并的行里就不要再写对应位置的 <td>，否则表格会错位。
  • colspan="2" 表示横向合并 2 列，表头的"时间\日期"就是把前两列合并成一个。
  • cellspacing="0" 让单元格之间没有间隙，边框看起来像一条线而不是双线。
  • border="1" 给表格加上可见的边框（实际开发中推荐用 CSS 来设置边框样式）。
  • style="margin:0 auto" 让表格水平居中。

参见 2.3.1 基本表格、2.3.2 跨行跨列表格

2. 制作如图 2-22 所示的注册表单。
图 2-22 注册表单

这道题综合考查了 form 表单里各种控件的用法。从截图中可以看到：用户名（text）、密码（password）、性别（radio 单选）、爱好（checkbox 多选）、学历（select 下拉）、生日（date 日期选择）、自我介绍（textarea 大文本框），最后是注册和重置两个按钮。

关键点：同一组 radio 的 name 要相同才能实现"只选一个"；checkbox 则是各自独立、可以多选。

完整代码如下：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>表单</title>
</head>
<body>
    <form action="" method="post">

        <!-- 用户名：type="text" 是最常见的单行文本框 -->
        <p>
            <strong>用户名：</strong>
            <input type="text" name="username" placeholder="请输入用户名" size="30" />
        </p>

        <!-- 密码：type="password" 输入时显示圆点，保护隐私 -->
        <p>
            <strong>密码：</strong>
            <input type="password" name="password" placeholder="请输入密码" size="30" />
        </p>

        <!-- 性别：type="radio" 单选按钮，同一 name 只能选一个 -->
        <p>
            <strong>性别：</strong>
            <input type="radio" name="gender" value="male" /> 男
            <input type="radio" name="gender" value="female" /> 女
        </p>

        <!-- 爱好：type="checkbox" 复选框，可以同时选多个 -->
        <p>
            <strong>爱好：</strong>
            <input type="checkbox" name="hobby" value="swimming" /> 游泳
            <input type="checkbox" name="hobby" value="reading" /> 读书
            <input type="checkbox" name="hobby" value="movie" /> 看电影
            <input type="checkbox" name="hobby" value="gaming" /> 玩游戏
            <input type="checkbox" name="hobby" value="basketball" /> 篮球
            <input type="checkbox" name="hobby" value="chess" /> 围棋
        </p>

        <!-- 学历：select 下拉列表 -->
        <p>
            <strong>学历：</strong>
            <select name="education">
                <option value="">----请选择学历----</option>
                <option value="high">高中</option>
                <option value="college">大专</option>
                <option value="bachelor">本科</option>
                <option value="master">硕士</option>
                <option value="doctor">博士</option>
            </select>
        </p>

        <!-- 生日：type="date" 日期选择器 -->
        <p>
            <strong>生日：</strong>
            <input type="date" name="birthday" />
        </p>

        <!-- 自我介绍：textarea 多行文本域 -->
        <p>
            <strong>自我介绍：</strong><br />
            <textarea name="intro" rows="10" cols="60"></textarea>
        </p>

        <!-- 注册和重置按钮 -->
        <p>
            <input type="submit" value="注册" />
            <input type="reset" value="重置" />
        </p>

    </form>
</body>
</html>

要点说明：

  • <input type="radio"> 单选按钮：同组 name 必须相同（如都叫 gender），这样浏览器才知道它们是一组、只能选一个。
  • <input type="checkbox"> 复选框：每个选项可独立勾选。多个 checkbox 的 name 可以相同（提交时会以数组形式发送）。
  • <select> + <option> 组成下拉菜单。第一个 option 设为提示文字"请选择学历"，value 留空。
  • <textarea rows="10" cols="60"> 定义多行文本域的可见大小，rows 是行数，cols 是列数。
  • type="submit" 提交按钮点击后会发送表单数据；type="reset" 重置按钮会把所有控件恢复到初始状态。
  • placeholder 属性在输入框内显示灰色提示文字，用户开始输入后自动消失。

参见 2.4.1 表单元素 form、2.4.2 输入元素 input、2.4.4 选择栏元素 select、2.4.6 多行文本元素 textarea

3. 使用 <div> 标签组织段落等网页内容，如图 2-23 所示。
图 2-23 使用 div 标签组织网页内容

这道题考查 div 分区元素的使用。div 本身没有任何外观效果，它就像一个"透明收纳盒"，把相关内容装在一起，再通过 CSS 样式来美化。

从截图可以看到：标题"公历来历"是红色粗体、左边有一条竖线装饰；正文是一大段关于公历的介绍；然后是子标题"中国现行农历"（同样红色粗体），下面又是一段文字。整体用 div 把不同区块包起来。

完整代码如下：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>公历来历</title>
</head>
<body>

    <!-- 用 div 把整个内容区域包起来 -->
    <div style="width:90%; margin:10px auto; font-size:14px; line-height:1.8">

        <!-- 第一个区块：公历来历 -->
        <div>
            <!-- 标题：红色粗体，左边有竖线装饰 -->
            <h3 style="color:red; border-left:4px solid red; padding-left:8px">公历来历</h3>
            <p style="text-indent:2em">
                公元前4241年（距今6262年）古埃及人就制定了历法。古代埃及人把每年一度尼罗河水开始泛滥的日子（大约在6月15日潮头到达孟菲斯）定为一年的开始，这一天适逢天狼星与太阳同时出现在地平线上。古代埃及人按尼罗河水的涨落和农作物生长的规律，把一年分为三季（泛滥季、耕种季、收获季），每季分为4个月，一年共12个月，每月30天，岁末增加5天节日，共计365日。这是人类历史上产生的第一部太阳历。但它同回归年即太阳年（地球围绕太阳公转一周的时间）相比有四分之一天的误差，古埃及人已经知道这项历法的缺点。这说明在此之前，古埃及人已经拥有了发达的天文学和数学水平，历法也代表了社会政治上的稳定。
            </p>
        </div>

        <!-- 第二个区块：中国现行农历 -->
        <div>
            <h3 style="color:red; font-size:16px">中国现行农历</h3>
            <p style="text-indent:2em">
                中国现行农历完全是由四百多年前（明末清初）的德国耶稣会教士汤若望主导的教士们所编撰的《时宪历》，并确定了农历中的"二十四节气"。后来清朝顺治皇帝将其更名为《西洋新法历书》，于顺治2年即1645年颁行。一直沿用至今，即为现在的"农历"。
            </p>
        </div>

    </div>

</body>
</html>

要点说明：

  • <div> 是一个"容器"标签，本身不产生任何视觉效果，必须配合 CSS 样式才能看到区块划分。
  • style="border-left:4px solid red; padding-left:8px" 给标题左边加一条红色竖线装饰，padding-left 留出间距让文字不紧贴竖线。
  • text-indent:2em 实现段落首行缩进两个字符，这是中文排版的常见要求。
  • color:red 设置文字为红色，对应截图中红色标题的效果。
  • line-height:1.8 设置行高为字体大小的 1.8 倍，让正文阅读起来更舒适。
  • 多个 div 嵌套使用可以把页面分成逻辑清晰的区块，便于后续用 CSS 分别控制各区块的样式。

参见 2.5 分区元素 div