Show 奋斗的小小ц 于 2019-09-30 13:27:56 发布 1218 收藏 1版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。 以下为实现代码
在一开始时,Web
仅有文本,那真的是很无趣。幸运的是,没过多久网页上就能嵌入图片和其他有趣的内容了。虽然还有许多其他类型的多媒体,但是从地位比较低的 怎样将一幅图片放到网页上?我们可以用 举个例子来看,如果你有一幅文件名为 如果这张图片存储在和 HTML 页面同路径的
以此类推。 备注: 搜索引擎也读取图像的文件名并把它们计入 SEO。因此你应该给你的图片取一个描述性的文件名: 你也可以像下面这样使用绝对路径:
但是这种方式是不被推荐的,这样做只会使浏览器做更多的工作,例如重新通过 DNS 再去寻找 IP 地址。通常我们都会把图片和 HTML 放在同一个服务器上。 警告: 大多数图片是有版权的。不要在你的网页上使用一张图片,除非:
侵犯版权是违法并且不道德的。此外,在得到授权之前永远不要把你的 我们上面的代码会展示如下的结果页面:
备注:
像 备选文本下一个我们讨论的属性是
测试
那么,为什么我们需要备选文本呢?它可以派上用场的原因有很多:
你到底应该在
本质上,关键在于在图片无法被看见时也提供一个可用的体验,这确保了所有人都不会错失一部分内容。尝试在浏览器中使图片不可见然后看看网页变成什么样了,你会很快意识到在图片无法显示时备选文本能帮上多大忙。 备注: 想知道更多,可以看我们的备选文本指南 宽度和高度你可以用宽度和高度属性来指定你的图片的高度和宽度(你可以用多种方式找到你的图片的宽度和高度,例如在 Mac 上,你可以用 Cmd + I 来得到显示的图片文件的信息)回到我们的例子,你可以这样做:
在正常的情况下,这不会对显示产生很大的影响,但是如果图片没有显示(例如用户刚刚开始浏览网页,但是图片还没有加载完成),你会注意到浏览器会为要显示的图片留下一定的空间:
这是一件好事情——这使得页面加载的更快速更流畅。 然而,你不应该使用 HTML 属性来改变图片的大小。如果你把尺寸设定的太大,最终图片看起来会模糊;如果太小,会在下载远远大于你需要的图片时浪费带宽。如果你没有保持正确的宽高比,图片可能看起来会扭曲。在把图片放到你的网站页面之前,你应该使用图形编辑器使图片的尺寸正确。 备注: 如果你需要改变图片的尺寸,你应该使用CSS而不是 HTML。 Image titles 图片标题类似于超链接,你可以给图片增加
这会给我们一个鼠标悬停提示,看起来就像链接标题:
图片标题并不必须要包含有意义的信息,通常来说,将这样的支持信息放到主要文本中而不是附着于图片会更好。不过,在有些环境中这样做更有用,比如当没有空间显示提示时,也就是在图片栏中。 然而,这并不是推荐的——title 有很多易访问性问题,主要是基于这样一个事实,即屏幕阅读器的支持是不可预测的,大多数浏览器都不会显示它,除非您在鼠标悬停时(例如:title 无法访问键盘用户),如果你对更多的信息感兴趣,阅读The Trials and Tribulations of the Title Attribute by Scott O'Hara. 动手练习:嵌入一张图片好,轮到你了!在这个动手练习中,我们希望你可以做一个简单的嵌入图片练习。你有一个基本的 https://raw.githubusercontent.com/mdn/learning-area/master/html/multimedia-and-embedding/images-in-html/dinosaur_small.jpg 之前我们说过永远不要从其他服务器热链接图片,但这次只是出于学习目的,所以我们会允许你这么做一次。 我们还希望你可以:
如果你遇到了错误,你可以按 reset 按钮来重置。如果你遇到了困难无法完成,按下 Show solution 按钮来看一下答案。
通过为图片搭配说明文字的方式来解说图片说到说明文字,这里有很多种方法让你添加一段说明文字来搭配图片。比如,没有人会阻止你这么做:
这是可以的, 有一个更好的做法是使用 HTML5 的
这个 备注: 从无障碍的角度来说,说明文字和
注意
动手练习:创建一个 figure在这个动手练习的部分中,我们希望你把本章节中的上一个动手练习完成的代码拿过来,把它转换为一个 figure:
如果你遇到了错误,你可以按 reset 按钮来重置。如果你遇到了困难无法完成,按下 Show solution 按钮来看一下答案。
CSS 背景图片你也可以使用 CSS 把图片嵌入网站中(JavaScript 也行,不过那是另外一个故事了),这个 CSS 属性
按理说,这种做法相对于 HTML 中插入图片的做法,可以更好地控制图片和设置图片的位置,那么为什么我们还要使用 HTML 图片呢?如上所述,CSS 背景图片只是为了装饰 — 如果你只是想要在你的页面上添加一些漂亮的东西,来提升视觉效果,那 CSS 的做法是可以的。但是这样插入的图片完全没有语义上的意义,它们不能有任何备选文本,也不能被屏幕阅读器识别。这就是 HTML 图片有用的地方了。 总而言之,如果图像对您的内容里有意义,则应使用 HTML 图像。如果图像纯粹是装饰,则应使用 CSS 背景图片。 总结目前到此为止,我们详细介绍了图片和说明文字,在下篇文章中,我们将进一步看看如何使用 HTML 在网页上嵌入音频和视频。
本章目录 |