通过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代码中添加宽度和高度属性。
特别说明
如果您关闭了这些大小调整说明，并且没有在css中指定大小，那么浏览器将以默认的本机大小显示图像。


中国互联网进入“黄昏期”？近年来，竟有这么多大公司走向没落
SEO优化，SEO流程是什么样的？
百度区分原创文章的标准是什么
怎样的广州网站设计才符合搜索引擎优化规则？
产品经理必读：5项提高产品设计的交互模式
购物网站设计如何做才能比较吸引人？
制作网站价格是多少呢？制作网站要花多少钱？
H5自助建站系统使企业网站建设更加灵活