html入门教程(初学者) -HTML图像 - 书目录

html入门教程(初学者) -HTML图像

HTML图像

<!DOCTYPE html>

<html>

<head>

	<title>HTML Images</title>

</head>

<body>

	<img src="http://www.html.am/images/samples/4s.jpg" alt="Photo of Rob Roy Glacier">

</body>

</html>

以上是用于将图像嵌入到网页中的代码示例。

HTML图像的工作原理

在HTML中,通过使用<img>标签和src属性(用于指定图像位置)将图像添加到网页。喜欢这个:

<img src="image.jpg" alt="Alternative text">

该<img>标签没有结束标签。只有开始标签是允许的。

图像必须位于指定的位置,否则最终会出现“破碎的图像”。这意味着,如果图像尚不存在于网络上,则需要先将图像上传才能在网络上运行。您可以将图像上传到自己的网站,也可以使用其他网站(如图像存储服务)。只要它存在于网络上,就可以链接到它(除非外部网站已禁用“热链接” – 防止其他网站直接链接到其图像)。

稍后我们将讨论如何将网页和图像上传到网络。

该alt属性

该图像必须具有alt指定的属性。该属性用于提供图像的描述。这很重要,因为可能并非所有用户都能看到图像。

以下是alt属性可以带来好处的一些示例:

  • 用户已在其浏览器上禁用图像。
  • 用户的网络连接速度较慢,图像有时无法加载。
  • 用户正在使用文本到语音软件或语音Web浏览器。这可能是因为用户视力受损,或者可能仅仅是因为用户选择使用此功能让他/她的眼睛休息。也可能是因为用户发现收听长文本块比阅读更容易。在这些情况下,软件会读出任何alt文本,并且图像对用户来说仍然是有意义的。
  • 用户正在使用纯文本浏览器。
  • 图像(或HTML)出现问题导致“损坏的图像”。

属性

除了src和alt属性之外,还有其他几个(可选)特定于此元素的属性(更不用说可用于所有HTML元素的全局属性和事件处理程序内容属性)。

要查看可以与此标记一起使用的完整属性列表,请参阅有关该<img>元素的更多信息。

关于图像位置

图像位置(随src属性提供)必须是有效的URL。一个URL(代表统一资源定位器)是在网络上的资源的位置。这可能是一个网页,图像或其他文件。

嵌入图像时,可以使用绝对URL或相对URL(与创建超链接时相同)。

有关绝对VS相对URL的解释,请参阅上一页HTML链接。

图片大小

您应该尽量避免在HTML中调整图像大小。如果可能,首先将图像调整为正确的尺寸(使用图像编辑器),然后在HTML代码中使用这些尺寸。

因此,例如,如果您需要以200×150的比例显示图像,请在图像编辑器中将其大小调整为相应的大小,以便正好是这些尺寸。不要拍摄300×200的图像,并使用HTML代码将其“挤压”成200×150的图像。

我推荐这个的原因是,当你使用HTML来调整图像大小时,浏览器仍然需要下载完整的文件,而不管你的HTML指定了多大。如果使用HTML来缩小图像显示,则通过下载大文件来浪费用户的带宽,只能以小尺寸显示。如果您使用HTML来以更大的尺寸显示图像,则它会像素化并失去质量。

最好先在图像编辑器中进行大小调整。

链接的图像

您可以像链接文本一样链接图像。只需在开始<a>标签和结束标签之间插入图片代码即可。

有关链接图像的示例,请参见练习3。

背景图片

背景图像是出现在背景中的图像,而其他元素可以出现在前面。

HTML不提供背景图片的功能 – 它没有background-image标签或类似的东西。可以使用CSS(层叠样式表)添加背景图像。以下是使用CSS <h1>通过全局style属性将元素添加到元素的示例。

<h1 style="background: url('http://www.html.am/images/backgrounds/background-image-2.gif');">

	Text in front with background image behind...

</h1>
如果您不明白此代码,请不要担心。我们很快就会介绍样式表,所以这段代码会更有意义。