网页制作练习题

这十道原创题由易到难，涵盖单元指南中的页面结构、样式表、相对链接、图片尺寸、替代文字和表格。所有文件、名称和页面都是虚构的。先自己写出答案，再打开解答。

1. HTML 页面中，直接位于 html 里面的两个主要部分是哪两个元素？

显示答案

head（关于页面的信息，包括 title）和 body（显示给读者的内容）。

2. 一个页面有 <h1>Library</h1>，接着 <h4>Opening hours</h4>，再接着 <h2>Contact</h2>。说明结构上的错误和改正方法。

显示答案

页面因为 h4 看起来更小，就从 h1 跳到了 h4。Opening hours 是主标题下的一个部分，应该是 h2。Contact 也是一个部分，所以仍是 h2。大小交给样式表去控制。

3. 写出从 index.html 到 pages/menu.html 的链接。

显示答案

<a href="pages/menu.html">Menu</a>。菜单页在 pages 文件夹里，位于首页的下面，所以路径往下走，不需要 ../。

4. 写出从 pages/menu.html 回到 index.html 的链接。

显示答案

<a href="../index.html">Home</a>。页面在 pages 里面，所以 ../ 往上一层，到达包含 index.html 的文件夹。

5. cafe.jpg 是 1500 × 1000 像素，在页面上宽度必须是 600 像素。保持比例的高度是多少？

显示答案

缩放因子 = 600 ÷ 1500 = 0.4。高度 = 1000 × 0.4 = 400。检查：600 ÷ 400 = 1.5，1500 ÷ 1000 = 1.5。

6. 一张夜晚街头小吃摊的照片，选出最合适的 alt 文字：(a) stall.jpg，(b) Photo，(c) Street food stall lit by lanterns at night。

显示答案

(c)。它描述了图片显示的内容。(a) 只是重复文件名，(b) 没有任何有用信息。

7. 找出错误：h2 { color: blue font-size: 18px; }

显示答案

blue 后面缺少分号，所以第二个声明无法被正确读取。正确写法：h2 { color: blue; font-size: 18px; }

8. 主文件夹里的三个页面和 pages 里的一个页面必须共用主文件夹里的 style.css。写出 pages 里那个页面的链接行，并说明如果标题颜色要改，需要修改几个文件。

显示答案

head 里写 <link rel="stylesheet" href="../style.css">。改标题颜色只需要一次修改，在 style.css 里，因为四个页面共用它。

9. 一个学生用表格把菜单放在页面左边、文字放在右边。说明哪里不对，并提出更好的方法。

显示答案

表格应该用来显示相关数据的行和列，而不是排整个页面。版面和位置属于样式表的工作，这样页面对读屏软件也保持清楚的含义。

10. 把 <center><font color="green">Open today</font></center> 改写成现代的版本，并写出 CSS。

显示答案

HTML：<p class="open">Open today</p>

CSS：

.open {
  text-align: center;
  color: green;
}

center 和 font 标签已经过时，外观改由样式表负责。

如果你做错了

把每个失误记入错题记录与重测队列，然后用实操任务与证据检查器自己做一个小页面。如果同一个错误反复出现，一对一 ICT 线上补习可以让老师直接看你的实际文件。