我们现在能写的东西里,大概也就水平线不是纯文字的内容了。这明显让我们感到了索然无味,仿佛买到了没有调料包的泡面。那么这一章我们就来学一下如何在页面中插入图片吧。

插入图片,也只是一个标签就可以解决的问题。因为他不需要对某一段内容进行标记,只要说清楚在哪个位置插入图片即可。图片的英文怎么说来着?image,不过五个字母太长了,缩写一下吧 img 就挺好的。(程序员是有多懒,这次不许黑老鼠,毕竟这个也不是老鼠发明的啊~

不过吸取了上次写链接时候的经验,你一定立刻想到,我们只知道位置是不够的。说了在哪里插入,还没有说插入什么呢?(这糟糕的台词

所以我要把图片标签用单独的一章来讲,因为他也有一些属性需要介绍,不过这次比较简单,我们对照着链接的属性去学习就可以了。链接需要一个 href 属性来描述要链接到什么地方;而图片需要一个 src 属性来描述插入哪一张图片。

那现在我们就可以去写一下了:

<img src="https://www.baidu.com/img/bd_logo1.png">

这里我到百度首页去复制了一下 Logo 的图片地址。现在大家可以把代码写下来,试一试效果,这个写起来也是非常简单的。可能有同学会问,我电脑里有一张特别漂亮的图片,我想把它插入到网页里,这个地址该怎么写?Emmm……这个问题我们要在后面再讲(溜了溜了……

对于图片,我们当然不需要考虑它在不在新标签页打开,因为那是链接的事情,至于如何给图片加链接,大家应该都已经会了吧?

<a href="https://www.baidu.com/" title="可惜百度不会给我广告费的">
  <img src="https://www.baidu.com/img/bd_logo1.png">
</a>

好了言归正传,我们看到链接里还有一个属性 title,那么图片中有没有类似的属性呢?是有的,alt 就是了。于是有同学立刻表示,哦,我明白了:

<img src="https://www.baidu.com/img/bd_logo1.png" alt="这是百度的 Logo">

嗯,写的非常好,值得被点赞哦。但是你马上又抱着板砖回来找我了:把鼠标放上去,半个小时没敢动,啥提示也没出来呀?

这个属性虽然是用来描述这个图片的,但是它并不是用来在鼠标划过的时候进行提示。那它有什么用呢?毕竟图片和当前的网页分属于两个文件,就可能出现这种情况,虽然我们的网页是可以访问的,但是由于某种原因,那张图片找不见了。那网页中这张图片就没得显示了,类似的情况,大家在上网的时候肯定也遇到过。这很尴尬,因为图片是带有一定信息量的,缺了这部分信息,可能让网页变得难以理解起来。但是我们常讲的一个词是可用性,因为缺少一张图片,让网页变得无法理解,那可用性就比较低了。如果在网页无法显示这种图片的时候,能够在图片位置显示文字来描述一下,这张应有的图片是些什么内容,网页的可用性是不是就大大的提高了?虽然并不好看,但至少不影响理解,算是一种退而求其次的保障。alt 属性就是负责这个作用的。

alt 属性是那么的不起眼,其实太多前端会忽略去写它,或者忽略去对它进行设置。可是我想讲,这个东西真的很重要。是的,现在的网站,图片无法找到的情况越来越少了。但是,大家考虑过视障用户吗,他们又靠什么来了解这张图片的内容呢?所以除了装饰性的图片(应该写 alt=""),还是尽量把这个属性写上吧。有文章说 title 属性不会被屏幕阅读器理会,但是我试了一下 Windows 下面的讲述人,好像也是会读出来的。总之,养成好的习惯,方便更多的人。

【本章助记卡片:卡片 for 第十四章