HTML宝典(第 1 版)
2.6.1 图像
阅读(

HTML基础

HTML元素

结构语义元素

内容分组元素

文本语义元素

链接元素

表格元素

嵌入式元素

图像

可以在网页中放置各种各样的图像,当访问者浏览网页时,浏览器会自动加载图像。不过,加载的时间跟访问者的网络速度、图像尺寸、页面中的图像个数等相关。

HTML中,通过 img 元素向网页嵌入一幅图像。img 元素是一个空元素,需要加“/”来正确关闭。在 img元素中,通过 src 属性来指定图像的URL,可以是绝对URL,也可以是相对URL。

事实上,img 元素并不会将图像本身插入到网页中,而是创建一个外部图像的占位符。因此,当URL属性指定的图像不存在时,页面上只会显示图像的占位符,而无法显示图像。

对用户来说,这种方式并不是特别友好,它们无法正确了解到这幅图像的真正含义。于是,可以通过 alt 属性,来为图像添加一段描述性文本,当图像不能正常显示时,浏览器就会将这段文字显示出来。如:

<img src="img/logo.png" alt="歪脖网" />

这样的话,当图像缺失时,在显示图片的地方,就会显示alt 属性定义的替代文本“歪脖网”,用户就可以了解该图像的作用。并且,屏幕阅读器可以朗读这些文本,帮助视觉障碍的访问者了解图像的内容。

默认情况下,图像会自动按原始尺寸显示。也可以通过 img 元素的 width 和 height 属性,来分别指定图像的宽度和高度,属性的值为数字,默认单位为像素(px)。如:

<img src="img/logo.png" width="175" height="90" alt="歪脖网" />

在设置图像尺寸时,如果只给定 width 或 height 属性中的一个值,则另一个值会根据图像的原始尺寸进行等比缩放。当然,为了实现内容和表现的分离,最好还是通过CSS来设置图像的显示尺寸。

不过要记住,无论是通过CSS,还是通过 width 和 height 属性,都只是改变图像的显示尺寸而已,并不改变图像加载的时间,因为无论尺寸是多少,加载的都是同一幅图像。

在网页中插入图像就这么简单。然而,用户只是看到了一张图像,而无法了解关于图像的更多信息。然而,网页上的大多数图像,都具有一定上下文关系,如图像的标题、背景、内容说明等。

这时,就可以使用语义化的 figure元素,把图像及标题、背景介绍、内容说明等包裹起来,来定义一个图像单元。这样,用户看到的就不是一张孤零零的图片,而是包括图像、标题、内容介绍的一个浑然一体的组合。

在figure元素中,通过 img 元素来定义图像,通过 figcaption 元素定义 figure元素的标题。如:

<figure>
  <p>《蒙娜丽莎》是文艺复兴时代画家芬奇所绘的丽莎·乔宫多的肖像画……</p>
  <img src="img/mengnalisha.gif">
  <figcaption>蒙娜丽莎的微笑</figcaption>
</figure>

上述代码的运行效果如图 2‑48 所示:

figure元素
图2-48 figure元素

当然,并非所有图片都要用 figure元素来包裹,如果纯粹只是为了呈现的图像,就没必要使用figure进行组合,因为img 元素本身也是有语义的。

关于作者

歪脖先生,十五年以上软件开发经验,酷爱Web开发,精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等,著有《HTML宝典》、《揭秘CSS》、《Less简明教程》、《JSON教程》、《Bootstrap2用户指南》、《Bootstrap3实用教程》,并全部在 GitHub 上开源。

如果本教程对您帮助很大,请随意打赏。您的支持,将鼓励我写出更好的教程!

← 键盘方向键翻页 →
返回顶部 手机访问 关注微信 返回底部

扫码访问歪脖网

随时随地,想看就看

关注歪脖网微信

分享 web 知识、交流 web 经验