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


来源:网站优化外包 作者:坪山网站建设公司 日期:2019-02-01 浏览:

我们平时在网站上看到图片,而支撑图片显示则需要一系列代码,其中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属性也是如此。
深圳市圣玺网络技术有限公司提供坪山区域的营销网站建设、品牌网站设计、企业网站改版制作、网站优化外包、网络营销推广、百度霸屏、SEO按天按效果付费等互联网广告服务!
本文由网上采集发布,不代表本站立场,转载联系作者并注明出处:http://www.webgaiban.cn/wzyh/1704.html

X

截屏,微信识别二维码

微信号:15019448256

(点击微信号复制,添加好友)

  打开微信