HTML学习篇(五) 图片

<img>标签

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

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

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

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

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

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

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

 

后备文本

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

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

 

带描述的图片

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

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

 

猜你喜欢

转载自blog.csdn.net/weixin_44247959/article/details/86446244