「转行测试开发-HTML」(六)—div和span、图像标签的使用

一行可以放很多个标签，理解为 小盒子，举例如下:

代码如下:

我是一个span标签

我是一个span标签

效果如下:

接下来说一个很重要的标签—图像标签

HTML标签中，使用标签用于定义HTML页面中的图像，是一个单标签。img是image的缩写，src是标签的必须属性，用于指定图像文件的路径和文件名。属性，指的是属于这个图像标签的特性。对于图片，需要将图片和html文件放到一起。

代码图示：

代码如下:

效果如下:

如果我们再加入同样的一行代码，看看显示(加上换行)

代码如图:

代码内容如下:

效果如下:

可以看到 后面不写 / 也是可以的，
后面不写斜杠也行，即使都是用单个的情况。src是source的缩写。

接下来说下图像标签的其他属性:

alt 替换文本，图像不能显示的文字

title 文本，提示文本，鼠标放到图像上，显示的文字，类似于 hover

width 像素，设置图像的宽度(和android中的差不多)

height 像素，设置图像的高度(和android中的差不多)

border 像素，设置图像的边框粗细

具体我们看下实例:

1. alt

代码如下:

alt替换文本，图像显示不出来的时候用文本代替

看下展示效果:

发现 alt后替换文本并没有起作用，图像还是显示的。这是为什么呢？

其实原因很简单，就是先判断src后的图像是否存在，如果存在，就展示图像，如果不存在，就展示文本。上面语句中，图像的地址是正确的，所以会展示图像。可以将图像地址进行修改。我们再试下

代码如下:

alt替换文本，图像显示不出来的时候用文本代替

我们来看看效果，alt后的文本是否能展示

说明我们的测试是正确的。

2.title 提示文本

先看效果:

看下代码和代码展示：

title提示文本

好的，今天先到这里，一会我们继续。