img元素
我们可以使用 img元素
告诉浏览器来显示一张图片。
<img>
元素将一份图像嵌入文档;- img是image单词的所以,是
图像、图像
的意思; - 事实上img是一个
可替换元素( replaced element )
;
img有两个常见的属性
src属性
:source单词的缩写,表示源;
✓ 是必须的,它包含了你想嵌入的图片的文件路径。alt属性
:不是强制性的,有两个作用;
✓ 作用一:当图片加载不成功(错误的地址或者图片资源不存在),那么会显示这段文本;
✓ 作用二:屏幕阅读器会将这些描述读给需要使用阅读器的使用者听,让他们知道图像的含义;
某些其他属性目前已经不再使用
- 比如width、height、border
图片的路径
设置img的src时,需要给图片设置路径
- 网络图片:一个URL地址;
✓ 网络图片的设置非常简单,给一个地址即可; - 本地图片:本地电脑上的图片,和html一起部署到服务;
本地图片的路径有两种方式
- 方式一:绝对路径(几乎不用);
✓ 从电脑的根目录开始一直找到资源的路径;
- 方式二:相对路径(常用);
✓ 相当于当前文件的一个路径;
✓.
代表当前文件夹(1个.
),可以省略;
✓..
代表上级文件夹(2个.
);
对于网页来说,不管什么操作系统(Windows、Mac、Linux),路径分隔符都是 /,而不是 \
图片的格式
img元素支持的图片格式非常多