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

2022-03-18    分类: 网站建设

我们平时在网站上看到图片,而支撑图片显示则需要一系列代码,其中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属性也是如此。

本文题目:网站建设开发中的图像标签img属性知多少
链接分享:https://www.cdcxhl.com/news39/144789.html

网站建设、网络推广公司-创新互联,是专注品牌与效果的网站制作,网络营销seo公司;服务项目有网站建设

广告

声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 创新互联

成都网站建设公司