1.3 图像标签

1.3 图像链接

1.3.1 基础语法

基础语法: <img src="图像地址" alt="替代文字(无法加载)/">

拓展语法: img src="图像地址" alt="替代文字(无法加载) title="悬停文字" width="设置图片宽度(像素)" height="设置图片高度(像素)"

参数	效果
src	图片地址
alt	当图片无法加载时, 显示的替代文字
title	鼠标悬停在图片上时, 显示的提示性文字
width	设置图片宽度(绝对值), 推荐设置
height	设置图片高度(绝对值), 推荐设置

1.3.2 src参数

图片地址可以是本地图片地址, 如img="./image/01.jpg", 也可以是网页图片, 如img="https://www.runoob.com/images/tryitimg.gif".

图片可以是 .jpg .png .bmp .gif 等图片格式.

1.3.3 alt参数

替代文字参数alt, 当图片加载不出来(网页图片过多导致加载卡慢), 图片地址失效/错误时, 将会显示一个破碎的图片并输出这个alt参数里的值.

<img src="1.jpg" alt="图片"/>

1.3.4 title参数

鼠标悬停文字, 譬如 .

1.3.5 自定义宽高

(runoob.com) 指定图像的高度和宽度是一个很好的习惯。如果图像指定了高度宽度，页面加载时就会保留指定的尺寸。如果没有指定图片的大小，加载页面时有可能会破坏HTML页面的整体布局。

需要注意一点的是, width和height参数定义的是图片的宽高而不是缩放, 它们会强制将图片拉伸.

若要进行图片的缩放应使用css标签: zoom:50% 或者 transform: scale(0.5).