上期文章：
panda456：初识CSS：原来它这么好用（2）zhuanlan.zhihu.com许多网页都有色彩绚丽的图片，接下来我来教大家如何在HTML文档里插入图片。
插入图片
图片的标签是<img>，且必须添加src（source）属性，用来插入链接以指向图片，达到插入图片的效果。例如，我链接了位于同一文件夹的示例.jpg这张图片：
<img src="示例.jpg" />注意：上面的这个例子中，<img>标签没有内容，因此也可以写成<img src="示例.jpg"></img>，甚至可以忽略尾标签，写成<img src="示例.jpg>，一般来说也不会有问题，因为HTML文档在编写代码时执行的是很宽松的规范，且HTML文档本身的容错能力就非常强大，即使是一个千疮百孔的HTML文档，大多数浏览器都能正常显示，比如下面这个：
<!doCtypE html>
<htMl>
<BodY>
这是一个很糟糕的HTML文档，不过大多数浏览器都会正常显示这句话。当然，作为一个合格的前端工程师，还是要按照W3C发布的HTML推荐标准写代码，因为这样能提高可读性，让所有浏览器正确地理解代码。在不与上述条件冲突的情况下，要力求代码更加简洁，化繁为简，避免浪费用户的带宽，自己看着也更舒服，后期维护也节省时间。像<br>等没有内容的标签，根据XHTML的规定，这种标签也必须按照正确的方法结束。虽然HTML没有XHTML严格，但强烈建议仍然按照XHTML的规定编写代码。例如，上面插入图片的例子还可以写成：
<img src="示例.jpg />在结尾打上斜杠「/」，然后打上右尖括号「>」，建议打完标签字母/属性值后隔一个空格再打斜杠。 另外，你还可以写完整的路径：
<img src="D:pictures示例.jpg" />在之后的文章中，我会详细讲解文件路径的用法。你甚至可以链接到网络上的图片，下面的例子中，我链接到了W3School上的一张图片：
<img src="http://www.w3school.com.cn/i/w3school_logo_white.gif" />添加alt属性
虽然我们能用双眼感受这绚丽多彩的世界，虽然我们能顺畅地浏览着网上的图片（甚至视频），但在设计网页时还得照顾以下特殊群体：
- 盲人或视力障碍人士
- 阅读或学习障碍人士
- 网速较慢的用户或使用不支持显示图片的浏览器
如何让他们也能知道有照片的存在呢？最好的办法就是添加alt（替代文本）属性，屏幕阅读器会读出alt的属性值，同时当由于网络质量、指向的文件不存在或文件损坏等因素无法加载图片时，就会显示此属性值，屏幕阅读器也会读出这张图片的替代文本，就像下面这样：
要想实现上面的效果，我可以在之前的基础上添加一个alt属性即可：
<img src="http://www.w3school.com.cn/i/w3scool_logo_white.gif" alt="来自W3School的图片" />快去试试吧。
添加图片的大小
有时候，我们要固定一张图片的大小，那么我们可以添加width属性和height属性，当然也可以用CSS设定：
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8" />
<title>用不同的方法设定图片的大小</title>
<style>
#ex {
width:100;
height:100;
}
</style>
</head>
<body>
<h1>用不同的方法设定图片的大小</h1>
<p>下面是用设定元素的属性来达到效果：</p>
<img src="https://www.w3school.com.cn/i/eg_mouse.jpg" width="200" height="200" />
<p>下面是用CSS来达到此效果：</p>
<img src="https://www.w3school.com.cn/i/eg_mouse.jpg" id="ex" />
<p>强烈建议使用CSS来达到设定图片大小的效果，因为CSS易于管理和维护。</p>
</body>
</html>效果如下图：
由于使用图片需要更长的时间加载和渲染，因此请谨慎使用图片。
下期文章：
panda456：有序列表&无序列表zhuanlan.zhihu.com
3526
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
