通过html代码给网页添加图片需要注意的事项

看看今天互联网上的任何一个网站，你都会发现它们有一些共同之处。其中一个特点就是图片被广泛应用。正确的图片给网站的展示增加了太多的东西，其中的一些图片，如公司的标志，非常有助于品牌提升以及营销业绩提升等。若要向网页中添加图像、图标或图形，需要在网页的HTML代码中使用该<img>标签，放在HTML中希望图形显示的位置。虽然说起来简单，但是如果不借助一些html文本编辑器或者成熟的cms管理系统，向网站添加图片就必须用到html代码。如果你已经掌握基础的html和css编程知识，又想用程序给我网站添加图片，那就不得不掌握通过html代码给网页添加图片需要注意的事项。

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

第一个属性是“src”。这就是您想要在页面上显示的图像文件。在我们的示例中，我们使用名为“logo.png”的文件。这是Web浏览器在呈现站点时显示的图形。您还会注意到，在此文件名之前，我们添加了一些附加信息“/image/”。这是文件路径。初始正斜杠告诉服务器查看目录的根目录。然后，它将查找名为“image”的文件夹，最后查找名为“logo.png”的文件。使用名为“图像”的文件夹存储站点的所有图形是一种非常常见的做法，但您的文件路径将更改为与您的站点相关的任何内容。

第二个必需的属性是“alt”文本。这是在图像由于某种原因无法加载时显示的“替换文本”。此文本在我们的示例中显示为“Company Logo”(公司徽标)，如果图像加载失败，将显示此文本。为什么会这样？各种原因：

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

这些只是为什么我们指定的图像可能会丢失的几种可能性。在这些情况下，将显示我们的ALT文本。Alt文本也被屏幕阅读器软件用来向视力受损的访问者“读取”图像。因为他们看不到像我们这样的图像，所以本文让他们知道图像本身是什么。这就是为什么ALT文本是必需的，为什么它应该清楚地说明什么是图像！

一个常见的误解是ALT文本是为了搜索引擎的目的。这不是真的。虽然搜索引擎确实会阅读这些文本来确定图像是什么(请记住，他们也不能“看到”您的图像)，但是您不应该只为了吸引搜索引擎而编写Alt文本。作者清除为人类准备的ALT文本。如果您还可以将一些关键字添加到吸引搜索引擎的标签中，这很好，但始终要确保ALT文本通过说明图像对于任何看不到图形文件的人来说是什么，从而达到其主要目的。

IMG标签还有另外两个属性，当您在Web页面上放置图形时，您可能会看到这两个属性-宽度和高度。例如，如果您使用所见即所得编辑器(比如Dreamweaver)，它会自动为您添加此信息。这里有一个例子：

“宽度”(Width)和“高度”(Height)属性告诉浏览器图像的大小。然后，浏览器知道要在布局中分配多少空间，并且可以在图像下载时转到页面上的下一个元素。在HTML中使用此信息的问题是，您可能并不总是希望您的图像以该大小显示。例如，如果您有一个响应网站，其大小根据访问者屏幕和设备大小而变化，则您还希望您的图像具有灵活性。如果您在HTML中声明固定大小是什么，您将发现很难用响应式CSS媒体查询来覆盖它。因此，为了保持样式(CSS)和结构(HTML)的分离，建议您不要向HTML代码中添加宽度和高度属性。