零基础学编程第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写与不写,对我们用眼睛上网的人来说,没有差别。

  • 发表于:
  • 原文链接http://kuaibao.qq.com/s/20171219G0AGYA00?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。

扫码关注云+社区

领取腾讯云代金券