web中的图像

分享于 

7分钟阅读

Web开发

  繁體 雙語
一张图片is一千字。

照片

本文是针对谁的?

你是这篇文章的初学者你是这篇文章的初学者。 !

内容以多种形式出现在站点中: 文本。图像。视频或者音频。 图像是我们能够有效地描述内容的方式之一,它们在网站上增加了很多价值。 没有图像的网站只是无聊 !

在本文中我将教你如何在网络中使用图片,以及你应该在你的头脑中保持的东西,同时使用它们。

让我们开始吧 !

<> 元素

它是网页设计师最常用和最可爱的元素之一。 它是HTML中的第一个媒体元素,而另两个元素是: 视频和音频已经在路上了 ! 类似于某些元素,<img> 是一个空元素,即元素无法保存任何子元素(

<imgsrc="images/beautifullady.jpg"alt="Beautiful Lady"/>

你可以看到以下两个属性: src & alt。一个 <img> 元素应该知道它必须显示什么图像,通过它可以知道的src 属性。 可以在这里属性中指定绝对路径或者 relative 路径。

什么是绝对路径?

绝对路径是完整的URL。 有时你必须在不同的域中显示图像,这时应该使用绝对路径。

<imgsrc="http://otherserver.com/users/knowallguy.jpg"alt="Know all guy"/>

什么是 relative 路径?

如果在同一域中显示图像,请使用 relative 路径。

<imgsrc="../images/small/logo.png"alt="Logo"/>

你甚至可以在 上面 案例中使用绝对路径,但这不是一个好主意 ! 为什么使用绝对路径在同一域中存在大量的图像,需要更改域名,然后更改 src 值。 所以只使用 relative 路径。

alt是重要

我在 <img> 元素中遗漏了一个重要属性,它是 alt 元素。 什么是 alt如果图像不存在,它是将显示的可选文本。

<imgsrc="images/beautifulgirl.jpg"alt="Beautiful Girl"/>

在线中任何事情都可能因网络故障或者读取图像失败而出错。 因这里如果浏览器无法从服务器获取图像,它会显示一个破坏的图像,如下所示

损坏的图像

Fig.a。损坏的图像

如果提供了可选文本,则浏览器将显示该文本,如果无法读取图像。

带有可选文本的破碎图像

Fig.b。带有可选文本的破碎图像

我看到很多人忘记使用它,在过去我也是 ! by你获取的文本is帮助很多屏幕阅读器阅读broken的文本for视力受损的人read的文本。 别忘了 "alt"的东西。

宽度&高度

当你猜测这两个属性控制在浏览器中显示的图像的大小时。

<imgsrc="images/beer.jpg"width="800"height="600"alt="Beer"/>

注意你不需要在宽度&高度属性中指定 "px"。 作为最佳实践,这两个值应该等于图像的真实宽度&高度。 我有一个大的图像说 800 x 600,我想把它作为 400 x 300 显示,这个问题是什么? 根本没有问题 !

如果你在浏览器中指定了相同大小的数据,那么将 800 x 600 大小的图像指定为 400 x 300 将不会带来很大的好处,因为无论你在浏览器中指定什么大小,。 好的建议是使用像Photoshop这样的图像编辑工具将图像调整到 400 x 300,使用它,这确实对你有好处。

图像宽度和高度

Fig.c。一个大小不同于真实图像的<> 元素

Borders

没有边框的图像看起来真好 !

Image borders

带边框的图像,带有带边框的图像,带边框的图像

如何添加边框有一个属性可以帮助你做到这一点? ! 名字叫 border

<imgsrc="images/cute.jpg"width="500"height="368"alt="cute"border="4"/>

上面我们已经指定了值 4px的边框。 第二个图像看起来很酷? 但是你必须知道的是 border 属性被宣布为 deprecated deprecated由W3C的W3C人员。 那么为什么要冒险,用 <p> 或者 <div> 元素包围 <img> 元素,并通过CSS装饰它们以添加边框作为 below。

<pclass="imageborder"><imgsrc="images/cute.jpg"width="500"height="368"alt="cute"/></p>p.imageborder
{
 width: 500px;
 height: 368px;
 padding: 4px;
 background-color: #fff;
 border: solid 1px #eee;
}

缩略图非常棒

很多时候,我们必须在网页中显示图像的集合。

Album

Fig.e 专辑 birds

上面 图像有什么问题? 看起来很酷是的,但是如果我们看到来自服务器的时间来看看。

Time taken

Fig.f。使用较大图像所用的时间

如果你想在网页中显示很多图片,而不是像 上面 那样显示它们,你必须考虑其他的方法。 如何显示小图像( 拇指指甲大小) 绝对不会花费那么多时间来从服务器来。

时间线

Fig.g 使用缩略图图像所用的时间。

但是用户如何看到大图像? 不要担心通过使用 <a> 元素包围 <img> 元素,你可以这样做。

<pclass="imageborder"><ahref="images/crane_big.jpg"title="Crane"target="_blank"><imgsrc="images/crane_small.jpg"width="58"height="58"alt="Beautiful Girl"/></a></p>

因此,该策略在服务器中提供两个版本的图像: 一个是真实大尺寸的图像,另一个是小的缩略图图像。 显示图像集合使用缩略图,仅当用户希望看到 上面 例子或者使用好的jQuery插件时显示大图像。

让我们总结一下

所以总结是

  • 在同一域中引用图像时使用 relative 路径。
  • 为所有图像指定 alt 属性。
  • 在图像的宽度和高度属性中指定 true 大小。
  • 向图像添加边框。
  • 在显示图像集合时使用缩略图。

如果你认为文章有益你,不要忘了给你的评论和投票。


WEB  图像  images  
相关文章