HTML学习篇（五）图片

最新推荐文章于 2023-02-01 20:01:28 发布

haobrother

最新推荐文章于 2023-02-01 20:01:28 发布

阅读量173

点赞数

分类专栏：学习笔记文章标签： img picture

本文链接：https://blog.csdn.net/weixin_44247959/article/details/86446244

版权

20 篇文章 0 订阅

订阅专栏

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>

关注