HTML学习篇(五) 图片

HTML学习篇(五) 图片
0

<img> 标签

  img 标签在 HTML 中表示一张图片,它使用src属性来指定图片的路径(JPEG、GIF、PNG、BMP、ICO 格式在主流浏览器应该都支持),width 和height 属性指定图片的宽高,默认以图片自身宽高来显示:

<body>
  <img src="HTML5.png" />
</body>

%E5%9B%BE%E7%89%87

  上图使用了原图默认大小256*256,下面使用 width 和 height 属性指定为64(默认是像素作为单位):

<body>
  <img src="HTML5.png" width="64" height="64"/>
</body>

%E5%9B%BE%E7%89%87

  也可以在 CSS 中使用 width 和 height 来指定图片大小,不过 CSS 需要标明单位为 px 或者使用百分比 %。

  另外,图片也可以设置鼠标悬浮提示语,类似超链接的 title 属性一样:

<body>
  <img src="HTML5.png" width="64" height="64" title="H5 Logo"/>
</body>

%E5%9B%BE%E7%89%87

后备文本

  如果图片不存在或者其他原因造成显示不了,可以使用后备文本来代替图片:

<body>
  <img src="HTML555555.png" width="64" height="64" alt="H5 Logo"/>
</body>

%E5%9B%BE%E7%89%87

带描述的图片

  可以利用 picture 标签来嵌入一个 img 和 figcaption 标签来达到带描述的图片效果,如下:

<body>
  <picture>
    <img src="HTML5.png" width="64" height="64"/>
    <figcaption>H5 Logo</figcaption>
  </picture>
</body>

%E5%9B%BE%E7%89%87

2赞