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