替代文字有什么用？

替代文字（alt 属性）用文字描述图片。读屏软件会把它读出来，图片载入失败时也会显示它。好的描述用简短的话说明图片显示了什么、为什么在这里，而不是写文件名。

怎样让网页上的图片保持比例？

先用新宽度除以原宽度求出缩放因子，再用同一个因子乘以原高度。或者只设置宽度，让高度自动跟随。没有检查比例就同时填两个数字，正是图片变形的原因。

每个 img 元素都需要 alt 属性。有意义的图片要写真正的描述。纯装饰的图片可以用空的 alt，也就是两个引号中间什么都不写，读屏软件就会跳过它。具体请按试题的要求。

在页面上放一张图片需要三样东西：正确的路径、保持比例的尺寸，以及描述它的替代文字。试题给了图片文件的网页任务都会考到这项技能，它把不改变宽高比地调整图片大小中的比例知识，和相对链接中的路径连接起来。

<img src="images/hall.jpg" width="300" height="200" alt="Club members setting up chairs in the school hall">

img 元素没有结束标签。

虚构的照片 hall.jpg 是 1200 × 800 像素。任务要求宽度为 300 像素。

第 1 步： 缩放因子 = 300 ÷ 1200 = 0.25。

第 2 步： 新高度 = 800 × 0.25 = 200。

第 3 步： 检查：300 ÷ 200 = 1.5，1200 ÷ 800 = 1.5。比例一致。

第 4 步： 照片显示社团成员在摆椅子。代码是：

<img src="images/hall.jpg" width="300" height="200" alt="Club members arranging chairs in the school hall">

常见的失误是直接把任务里的两个数字填进去，没有计算。

<img src="images/hall.jpg" width="300" height="300" alt="image">

这里有两处错误。高度 300 不符合比例：300 ÷ 300 = 1，不是 1.5，所以礼堂看起来又高又窄。而“image”对读屏软件的用户没有任何帮助。

改正：高度改为 200，并写出像“Club members arranging chairs in the school hall”这样的描述。如果任务只规定了宽度，也可以不写高度，让浏览器自动保持比例。

1. 一张图片是 900 × 600，宽度要改成 450。保持比例的高度是多少？

显示答案

缩放因子 = 450 ÷ 900 = 0.5。高度 = 600 × 0.5 = 300。

2. 一张图片是 1600 × 1000，宽度要改成 400。求新高度。

显示答案

缩放因子 = 400 ÷ 1600 = 0.25。高度 = 1000 × 0.25 = 250。

3. 对一张手绘海报的照片，哪个 alt 更好：alt="poster1.jpg" 还是 alt="Hand-painted poster announcing the photo club exhibition"？

显示答案

第二个。它说明了图片显示什么、为什么在页面上。第一个只是重复了文件名。

接下来学习如何按任务要求检查页面的表格和版面功能：检查所需的表格或版面功能，不依赖过时做法。回到单元指南，并用实操任务与证据检查器确认你的尺寸。

学生可能把尺寸算对了，却忘了写描述，而评分者会单独检查这一项。我们的老师会在一对一 ICT 线上补习中两项一起带你过。