上期文章：

panda456：初识CSS：原来它这么好用（2）​zhuanlan.zhihu.com许多网页都有色彩绚丽的图片，接下来我来教大家如何在HTML文档里插入图片。

插入图片图片的标签是，且必须添加src（source）属性，用来插入链接以指向图片，达到插入图片的效果。例如，我链接了位于同一文件夹的示例.jpg这张图片：

注意：上面的这个例子中，标签没有内容，因此也可以写成，甚至可以忽略尾标签，写成在结尾打上斜杠「/」，然后打上右尖括号「>」，建议打完标签字母/属性值后隔一个空格再打斜杠。 另外，你还可以写完整的路径：

在之后的文章中，我会详细讲解文件路径的用法。你甚至可以链接到网络上的图片，下面的例子中，我链接到了W3School上的一张图片：

添加alt属性虽然我们能用双眼感受这绚丽多彩的世界，虽然我们能顺畅地浏览着网上的图片（甚至视频），但在设计网页时还得照顾以下特殊群体：

盲人或视力障碍人士阅读或学习障碍人士网速较慢的用户或使用不支持显示图片的浏览器如何让他们也能知道有照片的存在呢？最好的办法就是添加alt（替代文本）属性，屏幕阅读器会读出alt的属性值，同时当由于网络质量、指向的文件不存在或文件损坏等因素无法加载图片时，就会显示此属性值，屏幕阅读器也会读出这张图片的替代文本，就像下面这样：

要想实现上面的效果，我可以在之前的基础上添加一个alt属性即可：

快去试试吧。

添加图片的大小有时候，我们要固定一张图片的大小，那么我们可以添加width属性和height属性，当然也可以用CSS设定：

用不同的方法设定图片的大小

下面是用设定元素的属性来达到效果：

下面是用CSS来达到此效果：

强烈建议使用CSS来达到设定图片大小的效果，因为CSS易于管理和维护。

效果如下图：

由于使用图片需要更长的时间加载和渲染，因此请谨慎使用图片。

下期文章：

panda456：有序列表&无序列表​zhuanlan.zhihu.com