第十四章 图片

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

插入图片，也只是一个标签就可以解决的问题。因为他不需要对某一段内容进行标记，只要说清楚在哪个位置插入图片即可。图片的英文怎么说来着？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 属性是那么的不起眼，其实太多前端会忽略去写它，或者忽略去对它进行设置。可是我想讲，这个东西真的很重要。是的，现在的网站，图片无法找到的情况越来越少了。但是，大家考虑过视障用户吗，他们又靠什么来了解这张图片的内容呢？所以除了装饰性的图片（应该写 ），还是尽量把这个属性写上吧。有文章说 title 属性不会被屏幕阅读器理会，但是我试了一下 Windows 下面的讲述人，好像也是会读出来的。总之，养成好的习惯，方便更多的人。