零基础学编程第32课：制作盲人也能读取的图片标签

大家好，我是理想国。

本课程针对零基础学生，学完之后，可以独立编写H5程序。本课程免费，想要报名的学生可以戳《期待已久的编程教学开课了》。

学完本课需要

10

分钟

完成作业仅需0.1分钟

本文花了4小时撰写

一、回顾上堂课

《零基础学编程第31课：画个圈，然后再跳出来》

上堂课讲了很简单的label，属于可学可不学的范畴，只要了解即可。

这堂课将教大家写HTML的图片标签。说实在，在写这堂课时，我有在犹豫，到底要不要花一堂课的篇幅去教图片标签。因为图片标签很简单，只是一个标签，和若干个属性，加一些css。

但是，我想起了之前看过的一篇文章，讲的是盲人如何上网（很诧异对不对，盲人看不见，也可以上网）。其中，就说到，由于很多程序员在写图片标签时，养成了很不好（懒惰）的习惯，经常忽略图片标签一个重要属性alt，造成了盲人在浏览网页时，不知道该图片是关于什么内容。

因此，这堂课，我将花整堂课的篇幅，来为同学们讲解图片标签。

二、图片标签基本结构

首先来讲一下图片的标签的基本结构：

上面这个结构是图片标签的基本构造，我们可以看到：

火车头

火车头里面友两个属性

一个属性是href，另外一个属性是alt

这两个属性必须都要有

href属性里面的值是图片url或是路径：

图片url，如：http://ss.bdimg.com/static/superman/img/logo/bd_logo1_31bdc765.png，这种有http://开头，结尾是.png（或是其他图片格式）的，就是图片url。

图片路径，假设在网站里，图片和网页放在相同的文件夹，图片文件名是demo.jpg，那么图片的路径就是demo.jpg。

图片url，同学们应该比较容易理解，图片路径，可能很多同学不能理解。

我再举个例子，加入我们所看到的网页放在电脑的c盘里，名字叫做index.html。那么，网页的路径就是c:\index.html。c盘里还有个文件夹，叫做img，文件夹里有个图片文件，叫做demo.jpg，那么图片文件的路径就是c:\img\demo.jpg。

当我们用浏览器在浏览网页index.html时：

路径的间隔不是用“ \ ”符号表示，而是用“ / ”符号表示。

网页index.html的路径则为“ / "。

以此类推，在文件夹里的demo.jpg，的路径则为“ /img/demo.jpg ”。

如果看到这里，实在还是不能理解的同学们，不需要转牛角尖，以后你们学到服务端的编程，自然而然就会懂了。

编程这种东西，一开始都不会全懂的，都是似懂非懂。等经验丰富了，累积够了，就变成了只可意会，很难言传的东西。

三、alt不是鸡肋，而是有重要使命

上文关于图片的基本结构，还差一个alt没有讲。我特别开一个大段落，足以见得alt的重要性。

首先，实事求是的说，alt写与不写，对我们用眼睛上网的人来说，没有差别。