看看今天网上的任何一个网页，你都会发现它们有一些共同点。这些共同特征之一是图像。正确的图片为网站的展示增添了很多内容。其中一些图像，如公司的徽标，有助于为网站树立品牌，并将数字实体与实体公司联系起来。

如何使用html将图像添加到网页

要向网页添加图像、图标或图形，需要在网页的HTML代码中使用标记。你把

src属性

查看上面的HTML代码，您将看到元素包含两个属性。它们中的每一个都是图像所必需的。

第一个属性是“src”。这就是您希望在页面上显示的图像文件。在我们的示例中，我们使用一个名为“logo.png”的文件。这是web浏览器渲染站点时将显示的图形。

您还会注意到，在此文件名之前，我们添加了一些附加信息，“/images/”。这是文件路径。初始的正斜杠告诉服务器查找目录的根。然后它将查找名为“images”的文件夹，最后查找名为“logo.png”的文件。使用名为“images”的文件夹存储站点的所有图形是一种非常常见的做法，但您的文件路径将更改为与站点相关的任何文件。

alt属性

第二个必需属性是“alt”文本。这是由于某种原因无法加载图像时显示的“备用文本”。在我们的示例中，如果图像无法加载，将显示该文本，该文本的内容为“公司徽标”。为什么会这样？各种原因：

• 不正确的文件路径
• 文件名不正确或拼写错误
• 传输误差
• 文件已从服务器中删除

这些只是我们指定的图像可能丢失的几种可能性。在这些情况下，将显示alt文本。

什么是用于(alt text used for)？

屏幕阅读器软件还使用Alt text向视力受损的访问者“读取”图像。因为他们不能像我们一样看到图像，所以本文让他们知道图像本身是什么。这就是为什么需要alt文本，为什么它应该清楚地说明图像是什么！

对alt文本的一个常见误解是，它是为了搜索引擎的目的。事实并非如此。虽然谷歌和其他搜索引擎确实通过阅读这些文本来确定图像是什么（记住，他们也不能“看到”你的图像），但你不应该仅仅为了吸引搜索引擎而编写alt文本。作者清除了为人类准备的alt文本。如果您还可以在标签中添加一些对搜索引擎有吸引力的关键字，这很好，但始终要确保alt文本满足其主要目的，即为无法看到图形文件的任何人说明图像的内容。

其他图像属性

这个

标签还有两个其他属性，当您在网页上放置图形时，您可能会看到它们——宽度和高度。例如，如果您使用所见即所得编辑器（如Dreamweaver），它会自动为您添加此信息。下面是一个例子：

这个

和

属性告诉浏览器图像的大小。然后，浏览器确切地知道布局中要分配多少空间，并且可以在图像下载时移动到页面上的下一个元素。在HTML中使用此信息的问题在于，您可能并不总是希望图像显示为该确切大小。例如，如果您有

响应式网站

其大小根据访客屏幕和设备大小而变化，您还希望图像具有灵活性。如果您在HTML中声明固定大小是什么，您将发现很难使用响应式

CSS媒体查询

. 因此，为了保持样式（CSS）和结构（HTML）的分离，建议不要在HTML代码中添加宽度和高度属性。

注意：如果您不使用这些尺寸说明，并且没有在CSS中指定尺寸，浏览器将以默认尺寸显示图像。

杰里米·吉拉德编辑