Captain9911

HTML img 图片

  • Oct 11, 2022

关键词：html, img, 图片

本地图片

<img src="./imgFiles/WX20171220-163206.png" alt="这是图片的替代文本">

远端图片

<img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1216825856,256214582&fm=200&gp=0.jpg" width="320" height="100">

通常设置图片尺寸时，为防止失真变形，只需要设置一个宽度或者高度。

<img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1216825856,256214582&fm=200&gp=0.jpg" width="400">

带链接的图片

<a href="http://www.w3cschool.cn/html/html-tutorial.html">
	<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1513687568786&di=e85e08c937f2fae062bbdd2962097999&imgtype=0&src=http%3A%2F%2Fa.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2Fa8ec8a13632762d0074ea275a9ec08fa503dc68c.jpg" alt="这里是图像的替代文本，将在图片不能正常显示时展示出来" width="320" height="240">
</a>

带边框的图片

<a href="http://www.w3cschool.cn/html/html-tutorial.html">
	<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1514339812&di=fc7857fc48b784317f2d6c635754eb46&imgtype=jpg&er=1&src=http%3A%2F%2Fimg.lookmw.cn%2F170618%2F1497787223.jpg" border="10" alt="当图片不存在时会显示这个" width="100" height="80">
</a>

鼠标悬停时显示内容

<img src="https://image.oldboard.tech/other/WX20171220-163206.png" width="160" height="120" title="鼠标悬停时会显示这个">

示例：

Search