在这个关于HTML中的图像(img)的入门教程中,我们将探索一些易于使用的创造性应用程序,进一步提高您在web页面上有效使用图像的能力。此外,我们将探索您可以使用的图像类型,以及如何最好地优化图像,使您的网页加载容易。

虽然网站是为了提供信息而建立的,但它也是一个可以而且应该具有美感的地方。一个没有图片的网站只是一个文本页面。作为人类,我们需要文字和视觉意象以一种共生的方式重合。当然,文本如何用图片来展示也同样重要。然而,确保正确使用图像是一种技术艺术形式,本教程将提供如何在HTML中正确添加图像的指导。

有哪些类型的图像?

在适合网页设计的图像世界中,只有两种图像是真正重要的:JPG和PNG。让我们看看两者之间的区别,看看它们是如何运作的。

JPG图像文件类型

一个JPGimage是指摄影图像。图像分辨率越高,清晰度越好,但这也意味着文件尺寸越大。JPG格式(也称为JPEG)是1992年由联合摄影专家小组创建的。

一个JPG应该使用在任何情况下,它是重要的有一个较小的文件大小的照片图像呈现。jpg很容易通过导出到一个更小的文件大小来“收缩”。这不仅对网络图像有用,而且对于一个更小的文件大小的图像来说是必不可少的,因为它可以更快地加载到网页中。由于世界上许多地区(但不是所有地区)都在增加宽带网络连接,文件大小变得不那么重要了,但对于那些仍然有较慢的互联网连接的人,他们肯定会感谢您的考虑。

PNG文件类型

一个PNG.文件格式是在1990年年中创建的,以替换GIF图像文件类型。GIF有局限性。这些限制提示创建了PNG。

与JPGS支持透明度不同,对JPG文件类型的一个重要益处是PNG。这允许您在不规则形状的物体周围具有透明背景,并避免概述图像的白色(或其他彩色)框。如果您需要透明的背景,则将成为您的Go-Image类型。另外,在呈现附图,插图,图表,图表等时,PNG优选在JPG上基本上,推荐是对于不是摄影图像的任何图像,使用PNG文件类型。

使用HTML访问图像

提示:组织HTML图像是非常重要的,在设计和构建web页面时就应该从一开始就做好。网页上的所有图片都应该放在一个名为“images”的文件夹中。

一旦你在“images”文件夹中有了你的图片,你可以使用以下方法将这些图片拉到你的网页中:

image name代码中的文件名和文件类型

src属性(source属性)告诉浏览器在哪里找到图像以及要找到哪个图像。

提示:记住以下几点:

  • 时刻注意较低的大写信你的文件名称。在上面的示例中,如果将初始帽放在OceanWave1.jpg中,因此它读取了OceanWave1.jpg,则无法找到图像。
  • 一定要把映像扩展文件类型在你的形象名字上。如果你没有做到这一点,你的形象将不会被发现。
  • 一定要使用正确的图像扩展文件类型这样你就不会意外命名一个带有PNG扩展的JPG文件。如果发生这种情况,您的图像将无法找到。

图像大小

处理图像的另一个重要方面是能够调整它们的大小。一旦你把图片放到你的网页上,它们可能不是你想要的精确的大小。能够改变大小对于定制你的网页布局是必要的。

使用数值确保屏幕上的精确图像尺寸

当我们使用一个数值时,我们指的是像素的数量。由于您的显示器是1920 x 1080,这意味着您有1920像素宽1080像素高。在下面的例子中,我们有一个图像是600像素宽通过400像素高。代码如下所示:

图像在分辨率和尺寸中出现完美。

提示:在设置这些值之前,您应该知道图像的确切宽度和高度。如果您未正确设置值,则最终将扭曲扭曲的图像。

日出的海浪

如果输入的数值不正确,图像可能会失真。如果我们把这些数字混在一起,输入500像素的宽度和600像素的高度,代码将是这样的:

图像会被扭曲成这样:

畸变海浪照片

将图像设置为表示区域的百分比

使用百分比作为值并不直接应用于图像本身。如果我设置宽度和高度的值都为50%,这不会减少一半的图像。

它所做的是读取网页上的空间,并根据演示区域调整图像的大小。

例如,如果你把这个唯一的页面上的元素,你的浏览器将尝试使用这张图片占用50%的页面的宽度,因此它可能比原始大小,而不是一半的原始大小与您预期的一样。

提示:如果使用百分比方法呈现比原始尺寸大于原始大小,则您的图像可能会显示像素化,这意味着它已经丢失了分辨率,并且不再像其原始形式出现的清晰和清洁一样清晰。

图像显示为50%和25%

图像的边界

呼叫并定义图像边框

如果你想在你的图像周围添加边框,只需定义边框和边框宽度。

边界代码显示

结果如下:

海浪照片与边界周围的图像

在更高级的教程中,我们将进入自定义这些图像周围的边界帧的领域。

alt属性以及它为什么重要

alt属性被添加到HTML中作为替代描述。这是对可访问性的考虑,它为无法看到图像的用户(例如,如果他们视力受损)提供有意义的信息。有一些程序可以帮助视障人士为用户朗读屏幕上的文字。

该程序将读取alt文本,以便用户可以了解页面上的图像类型,即使它们可能无法看到它们。了解从视觉受损人员的观点有望让您了解为什么写入良好的Alt文本描述图像对用户对网页的理解至关重要。

HTML代码很简单,可以很容易地添加如下:

图像代码显示

还看到:利润率和填充用于Web自定义选项以增强文本块。使用您的网络图像与边距和填充结合使用,以创建一个更令人惊叹的网页。

下一个地方?

此介绍HTML图像应提供一个起点,以进一步查询HTML提供的无限创意方面。我们将继续探索下一个博客中的HTML设计领域。我们希望这一介绍激起了您的兴趣,并激励您进一步探索和潜入网络设计世界。

参加我们的纳米级编程入门188金宝搏安不安全今天节目!

开始学习