<img>元素

一、不种格式图片的使用

1.JPEG格式—照片和复杂图像使用

  • 适合连续色调图像,例如照片
  • 包含颜色丰富多达1600万种不同颜色
  • 缩小文件大小会“丢失”图像信息,“有损”格式
  • 不支持透明度
  • 文件较小,适合WEB高效显示
  • 不支持动画

2.PNG或GIF格式—单色图像、LOGO和几何图形使用

  • PNG或GIF适合单色图像和线条构成的图像,例如logo、剪贴画和图像中的小文本
  • PNG可以包含上百万种不同的颜色的图像。PNG有3种:PNG-8、PNG-24、PNG-32,取决于需要表示多少种颜色。
  • GIF可以表示最多256种不同颜色的图像
  • PNG和GIF都是“无损”格式。PNG会压缩文件大小,不会丢失图像信息。
  • PNG和GIF都支持“透明”,但GIF只支持一种颜色“透明”
  • 于相应的JPEG格式的相比,PNG文件更大一些,但也取决使用的颜色数,跟GIF相比可能更小也可能更大。
  • GIF往往要比PNG格式的更大一些
  • GIF格式支持动画

二、<img>元素

  • < img src="图像的相对路径/URL">,<img>是一个void元素。
    <img>是一个内联元素,不换行。
    例子:
< img src="images/drinks.gif" alt=" ">   文件的相对路径
< img src="http://www.coffee.com/drinks.gif">
  • 当访问者浏览网页时,图像没有正常显示,可用alt元素描述图像的信息
    alt属性是<img>元素中必要的属性
    例子:
< img src="images/drinks.gif" alt="这是一杯饮料的图片">

效果:

alt效果
  • 调整图片的大小
    width属性表示图像在浏览器显示的宽度
    height属性表示图像在浏览器显示的高度
    例子:
< img src="images/drinks.gif" width="50" height="100" alt=" ">
  • 当Web页面有大量图片时,则可以创建图片的缩略图作为链接,这样使你的网页加载更快,用户点击缩略图可以查看图片的原图。
    太大的图像对于浏览器,下载和显示都很慢。
    例子:
<a href="html/seattle_video_med.html">
      < img src="thumbnails/seattle_video_med.jpg">
</a>

这样<img>元素的图像放在<a>元素中作为一个链接,图像的链接放在<a>元素中的href属性中。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容