关于小悟志网站地图归档友情链接联系Feed

云上小悟 + 

首页 » 网站建设 »

<img>元素的使用

网站建设
2017年9月15日 / 38次阅读
标签:HTML

文章《<img>元素的使用》的特色图片

HTML的<img>元素表示一张图片,这个元素跟<br/><hr/>一样,也有结束标签(closing tag)。

<img>元素的正确使用方法是:

<img src=""  alt="" width="" height="" />

src和alt属性是必须的,最后使用“/”关闭。这叫,在开始标签中关闭元素。(还能搞清除HTML元素和标签的区别?)

width和height是未来满足SEO的,这个在本文最后详细说明。

这只是一个小细节,无关痛痒,几乎所有浏览器都默认不关闭<img>也没什么大不了的。就连HTML验证对此也视而不见。

谁知道以后呢?

 

<img>的src和alt是必须的。src支出了图片的路径,这个必须;alt用来在图片不能显示的时候,显示出来给用户看。。。额。。。这是W3C的说法。alt真正的价值是SEO。用户才不会看呢,搜索引擎才会看,alt就像是给图片用文字做了一点说明。

 

H5的时代,HTML和原来的XHTML合并了,因此H5也有了严格的语法格式。

在 HTML 中,<img> 标签没有结束标签。例如:

<img src="" alt="" >

在 XHTML 中,<img> 标签必须被正确地关闭。

<img src="" alt="" />

 

SEO为什么建议使用height和width属性?

为了加快页面加载速度。

您在浏览网页的时候,可能会遇到这种情况:随着页面中的图像加载并成功显示,页面上的内容会随之发生不规律的移动,影响您的阅读。这种情况就是因为页面上的图像没有定义height和width属性而导致的。

如果没有定义图片的height和width属性,那么浏览器为了能够显示每一个加载的图像,它需要先下载图像,然后解析出图像的高度和宽度,并在显示窗口留出相应的屏幕空间,这样就会导致浏览器不断地重新计算/调整页面的布局,这可能会延迟文档的显示,并导致页面重绘。

因此,建议使用<img>的 height 和 width 属性来指定图像的尺寸。这样的话,浏览器在下载图像之前就为其预留出了空间,从而可以加速文档的显示,还可以避免文档内容的移动而引起页面重绘。

但是,需要注意的是:不要通过 height 和 width 属性来缩放图像。如果通过 height 和 width 属性来缩小图像,那么用户就必须下载大容量的图像(即使图像在页面上看上去很小)。正确的做法是,在网页上使用图像之前,应该通过软件把图像处理为合适的尺寸。当然,这个准则在实际应用中也有例外,例如笔者就认为,小比例的图像缩放应该是允许的,此外,如果页面上需要加载同一张图像的不同尺寸的显示,因为浏览器对同一个图像只会请求一次,因此此时就建议使用height 和 width 属性来缩放图像。

本文链接:http://www.maixj.net/wz/img-16477
云上小悟 麦新杰(QQ:1093023102)

相关文章

评论是美德

《<img>元素的使用》有5条评论

无力满足评论实名制,评论对非实名注册用户关闭,有事QQ:1093023102.

  • 麦新杰

    html head部分的meta和link,似乎不需要关闭。 [ ]

    • 麦新杰

      在 XHTML、XML 以及未来版本的 HTML 中,所有元素必须被关闭。 [ ]

    • 麦新杰

      但是w3的html验证,并没有检查对所有空元素的关闭,包括img元素也没有检查。 [ ]

  • 麦新杰

    在 XHTML、XML 以及未来的 HTML 版本中,不允许使用没有结束标签(闭合标签)的 HTML 元素。 [ ]

  • 麦新杰

    HTML 元素(element)指的是从开始标签(start tag)到结束标签(end tag)的所有代码。 [ ]


前一篇:
后一篇:

栏目精选


©Copyright 麦新杰 Since 2014 云上小悟独立博客版权所有 备案号:苏ICP备14045477号-1

网站二维码
拍拍贷
go to top