在网页设计中，内容可以以多种形式呈现：文本、图像、视频或音频。图像是描述内容的有效方式之一，它为网站增添了许多价值。没有图像的网站会显得枯燥乏味！在本文中，将教如何在网页中使用图片以及在使用它们时应该记住的事项。让开始吧！
这是网页设计师最常使用且喜爱的元素之一。它是HTML中的第一个媒体元素，而另外两个：视频和音频也即将到来！就像一些元素一样，是一个空元素，这意味着该元素不能包含任何子元素。
在上面的例子中，可以看到两个属性：src和alt。元素应该知道它要显示的图片是什么，通过src属性它就可以知道。可以在这个属性中指定绝对路径或相对路径。
绝对路径是完整的URL。有时需要在不同的域中显示图片，那时应该使用绝对路径。
如果在同一域中显示图片，请使用相对路径。
甚至可以在上述情况下使用绝对路径，但这不是一个好的主意！为什么？如果在同一个域中使用大量图片，并且有一天需要更改域名，那么必须扫描所有页面并更改src值。所以只使用相对路径。
在元素中遗漏了一个重要的属性，那就是alt。alt是什么？它是备用文本，如果图片不存在，它将被显示。
在网上，由于网络故障或读取图片失败，任何事情都可能出错。所以如果浏览器无法从服务器获取图片，它会显示一个破碎的图片，如下所示：
图a. 一个破碎的图片
如果提供了备用文本，那么浏览器在无法读取图片时会显示该文本。
图b. 一个带有备用文本的破碎图片
看到很多人忘记了使用它，在过去的日子里也是！通过添加一点文本，将获得的帮助是帮助许多屏幕阅读器读取破碎图片的备用文本，以帮助视力受损的人。所以永远不要忘记alt属性。
正如所猜测的，这两个属性控制着图片在浏览器中显示的大小。
注意不需要在width和height属性中指定"px"。作为一个最佳实践，这两个值应该等于图片的实际宽度和高度。为什么？有一张更大的图片，比如说800 x 600，想以400 x 300显示，那有什么问题吗？没有问题！
通过指定一个800 x 600大小的图片到400 x 300，并没有得到太多的好处，因为无论在浏览器中指定的大小是多少，服务器都会发送相同数量的数据。所以好建议是使用任何图像编辑工具（如Photoshop）将图片调整为400 x 300的大小，然后使用它，这确实对有好处！
图c. 一个元素，其大小与实际图片不同
没有边框的图片看起来真的不太好！
图d. 有边框和没有边框的图片
如何添加边框？有一个属性可以帮助做到这一点！它的名字叫border。