HTML基础课程登入/注册
在小屏设备上仅提供基本的浏览功能
请使用电脑打开此网页,体验更多强大功能

当用户无法访问你的图像时怎么办

原创作品,未经许可不得转载
在上一节课程中我们已经学会了如何将图像加入到网页中。
作为一名优秀的程序员,你应该考虑到各种可能出现的特殊情形,比如,访问你的网页的用户可能无法访问你的图像,有可能是因为你已经将图像的URL地址改变了,也有可能是因为用户自己的网络环境较差。
当用户无法访问你的图像时,用户看到的将会是一个比较难看的“破裂的图像”。看看下面这个例子:

<img src="http://www.z.cn/abc.jpg"/>
    
上面的代码中,这个URL地址显然是不存在的。运行上面的代码,你看到的将会是类似下图这样的“破裂的图像”:
学HTML,破裂的图像
是的,这样的显示不够友好。
就算用户无法访问这张图像,也应该让他知道这里显示的大概是什么。
<img>标签有个alt属性,它就是用来做这个事的。
将上面的示例修改为:

<img src="http://www.z.cn/abc.jpg" alt="张三丰"/>
    
运行结果将会是下面这样的:
学HTML,图像无法访问时
在“破裂的图像”旁边显出了一行文字,显示的文字正是alt属性的值。这样,就算用户无法访问该图像时,也能知道这张图像是“与张三丰相关的图像”。
注意上面这个示例的写法,这个<img>元素有两个属性:srcalt。当一个元素同时存在多个属性时,属性的先后顺序是无所谓的,也就是说,上面这个示例中,你可以将alt属性写在src属性的前面。
因此,上面的示例也可修改为这样:

<img alt="张三丰" src="http://www.z.cn/abc.jpg"/>
    
当一个元素同时存在多个属性时,属性之间需用空格分隔。
设置alt属性还有更多作用,比如有利于搜索优化、有利于盲人阅读、等等。作为初学者,我们可以先不用管这些。
练习
14/22
http://localhost/