看看今天在线的任何网页，你会注意到它们共享某些共同的东西。 这些共同特征之一是图像。 正确的图像增加了很多网站的介绍。 其中一些图像（如公司的徽标）有助于为网站打上品牌并将该数字实体连接到您的实体公司。
要将图像，图标或图形添加到网页中，您需要在页面的HTML代码中使用该标记。 您可以将IMG标记放置在您的HTML中您想要显示图形的位置。 一旦页面被查看，呈现该页面代码的网络浏览器将用适当的图形替换该标签。 回到我们的公司徽标示例，以下是如何将该图像添加到您的网站：
图像属性
查看上面的HTML代码，您将看到该元素包含两个属性。 它们中的每一个都是图像所必需的。
第一个属性是“src”。 这实际上就是您想要在页面上显示的图像文件。 在我们的例子中，我们使用了一个名为“logo.png”的文件。 这是Web浏览器在呈现网站时显示的图形。
您还会注意到，在此文件名之前，我们添加了一些附加信息“/ images /”。 这是文件路径。 最初的正斜杠告诉服务器查看目录的根目录。 然后它会查找一个名为“images”的文件夹，最后是名为“logo.png”的文件。 使用名为“images”的文件夹来存储所有站点的图形是一种非常普遍的做法，但是文件路径将被更改为与您的站点相关的任何内容。
第二个必需属性是“alt”文本。 这是如果图像由于某种原因无法加载而显示的“替代文本”。 如果图片加载失败，则会在我们的示例中显示“公司徽标”的文字。 为什么会发生？ 各种原因：
- 不正确的文件路径
- 错误的文件名或拼写错误
- 传输错误
- 文件已从服务器中删除
这些只是为什么我们指定的图像可能会丢失的几种可能性。 在这些情况下，我们的替代文字会显示。
屏幕阅读器软件也使用替代文字将图像“读取”给视力受损的访问者。 由于他们无法像我们一样看到图像，因此这些文字让他们知道图像本身是什么。 这就是为什么ALT文本是必需的，为什么它应该清楚地说明图像是什么！
对alt文本的一个常见误解是它是为了搜索引擎的目的。 这不是真的。 虽然谷歌和其他搜索引擎确实阅读这些文字以确定图片是什么（请记住，他们无法“看到”您的图片），但您不应该编写替代文字来吸引搜索引擎。 作者明确了针对人类的文字。 如果您还可以在标签中添加一些吸引搜索引擎的关键字，这很好，但请始终确保替代文本的主要用途是通过说明无法看到图形文件的人的图像。
其他属性
IMG标签还有另外两个属性，当您在网页上放置图形时，您可能会看到其中的一些属性 - 宽度和高度。 例如，如果您使用Dreamweaver之类的所见即所得编辑器，它会自动为您添加此信息。 这是一个例子：
WIDTH和HEIGHT属性告诉浏览器图像的大小。 浏览器然后知道布局中要分配多少空间，并且可以在图像下载时移动到页面上的下一个元素。 在HTML中使用此信息的问题是，您可能并不总是希望以完全相同的尺寸显示图像。 例如，如果您有一个响应式网站，其大小根据访问者屏幕和设备大小而变化，那么您也会希望图像具有灵活性。 如果您在HTML中声明固定大小，您会发现很难用响应式CSS媒体查询进行覆盖。 出于这个原因，为了保持样式（CSS）和结构（HTML）的分离，建议您不要将宽度和高度属性添加到HTML代码中。
一个注意事项：如果您确实关闭了这些尺寸指示，并且未在CSS中指定尺寸，则浏览器无论如何都将以默认的原始尺寸显示图像。
由Jeremy Girard编辑