网站建设开发中的图像标签img属性知多少

我们平时在网站上看到图片，而支撑图片显示则需要一系列代码，其中img属性标签尤其重要。HTML的IMG标记主要作用，是控制在网页中插入图片和其他静态图形对象。这个常见的标签支持几个必需的和可选的属性，这些属性增加了您设计一个吸引人的、以图像为中心的网站的能力。IMG有哪些属性标签呢？对于网站开发人员来说，网站建设开发中的图像标签img属性知多少，是衡量其代码编写能力和水平的一个方式，本文会就此展开一些讨论，并告诉你常用或已经一些过时的img标签知识。

完全形成的HTML IMG标记的示例如下所示：

<img src="url">

标签属性说明

SRC. 

获取要在网页上显示的图像所需的唯一属性是SRC属性。此属性标识要显示的图像文件的名称和位置。

ALT.

若要写入有效的XHTML和HTML4，也需要ALT属性。此属性用于为非可视浏览器提供描述图像的文本。浏览器以不同的方式显示替代文本。当您将鼠标放在图像上时，有些显示为弹出窗口，有些显示为右键单击图像时的属性，有些则根本不显示。使用Alt文本可以提供与网页文本不相关或不重要的图像的其他详细信息。但是请记住，在屏幕阅读器和其他纯文本浏览器中，文本将与页面上的其余文本内联读取。为了避免混淆，使用说明性的ALT文本，例如，“关于网页设计和HTML”，而不只是“徽标”。

在HTML5中，ALT属性并不总是必需的，因为您可以使用标题向其添加更多描述。还可以使用此属性指示包含完整描述的ID：

ARIA-DESCRIBEDBY

如果图像纯粹是装饰性的，例如网页顶部的图形或图标，也不需要Alt文本。但如果你不确定，包括ALT文本以防万一。

推荐的IMG属性

WIDTH

和

HEIGHT 

您应该养成始终使用宽度和高度属性的习惯。而且，您应该始终使用真正的大小，而不是用浏览器来调整图像的大小。这些属性加快了页面的呈现速度，因为浏览器可以在设计中为图像分配空间，然后继续下载其余内容，而不是等待整个图像下载。

其他有用的img属性

TITLE

该属性是一个全局属性，可应用于任何HTML元素。此外，Title属性允许您添加有关图像的额外信息。大多数浏览器都支持title属性，但它们使用的方式不同。有些将文本显示为弹出窗口，而另一些则在用户右键单击图像时在信息屏幕中显示文本。您可以使用Title属性来编写有关图像的其他信息，但不要指望此信息是隐藏的或可见的。你绝对不应该用这个来隐藏搜索引擎的关键字。这种做法现在受到大多数搜索引擎的惩罚。

USEMAP

和

ISMAP

 这两个属性设置客户端()和服务器端(ISMAP)映像映射到您的映像。

LONGDESC

此属性支持URL对图像进行更长的描述。此功能使您的图像更容易访问。

已弃用且已过时的img属性

在HTML5中有几个属性现已过时，或在HTML4中已不推荐使用。为了获得最佳HTML，您应该找到其他解决方案，而不是使用这些属性。

BORDER 

 该属性定义图像周围任何边框的宽度(以像素为单位)。它在HTML4中已被弃用CSS，而在HTML5中已过时。

ALIGN 

此属性允许您将图像放置在文本内部，并使文本围绕文本流动。可以将图像向右或向左对齐。在HTML4中，它已被弃用为Float CSS属性，而在HTML5中，它已过时。

HSPACE

 和

VSPACE

 HSPACE和vSpace属性添加水平(HSPACE)和垂直(VSpace)空白。空白将添加到图形的两侧(顶部和底部或左侧和右侧)，因此，如果您只需要在一侧的空间，您应该使用CSS。这些属性在HTML4中已经被弃用，取而代之的是Margin CSS属性，并且它们在HTML5中已经过时。

LOWSRC 

 当图像源非常大，以至于下载速度非常慢时，LOWSRC属性提供了另一种图像。例如，您可能有一个500KB的图像要显示在您的网页上，但500KB需要很长时间才能下载。因此，您可以创建一个小得多的图像副本，可能是黑白的，或者只是非常优化的，并将其放入LOWSRC属性中。较小的图像将首先下载并显示，然后当较大的图像出现时，它将取代低来源的图像。LOWSRC属性被添加到Netscape Navigator 2.0的img标记中。它是DOM级别1的一部分，但随后从DOM级别2中删除。尽管许多网站声称所有现代浏览器都支持该属性，但浏览器对该属性的支持一直不够完善。它在HTML4中没有被弃用，在HTML5中也没有过时，因为它从来不是这两个规范的正式部分。

避免使用该属性，而是优化图像，使其快速加载。页面加载的速度是良好的Web设计的关键部分，大图像会极大地降低页面的速度-即使您使用LOWSRC属性也是如此。