2、行级标签
#### 2.1 图像
图像是网页的主要内容之一,在HTML标签中,img标签用于定义HTML页面中的图像。
(1)语法
```html
<img src="" alt="" width="" height="">
```
(2)标签属性
- src属性
- 作用:用于指定图像文件的路径和文件名
- 注意:是<img>标签的必须属性
- 代码演示
- alt属性
- 作用:指定替换文本,默认不显示,当图像不能正常显示时,显示该文字对图像进行替换,有利于用户体验
- 代码演示
- width/height属性
- 作用:指定图片宽度/高度
- 注意:值可以不带单位默认px,只指定宽或高属性其中一个,另一个按照原比例等比缩放
- 代码演示
(3)默认样式
- 多张图片可以交列在一行显示
- 默认产生下间隙
(4)典型应用
作为内容展示的图像:产品图、广告图、详情页、文章页中插图。
**(5)图像路径**
页面中的图片会非常的多,通常我们会新建一个文件夹来存放这些图像文件images,这时候再查找图像,就需要通过路径的来描述图像文件的位置。
路径可以分成,相对路径和绝对路径。
**相对路径**
概述:相对路径是指由这个文件所在位置为参考基础,而建立出的目录关系,常用的相对路径包括当前目录,上一级目录,下一级目录。
- 当前目录
- 语法
一个点(.)后面跟一个斜杠表示当前目录也就是当前文件所在目录。
```HTML
<img src="pic.png" alt="">
<img src="./pic.png" alt=""> <!-- ./ 可以省略 -->
```
- 上一级目录
- 语法
两个点(.)后跟一个斜杠表示前文件所在目录的上一级目录。
```HTML
<img src="../pic2.png" alt="">
```
- 下一级目录
- 语法
一个斜杠,表示图像文件位于HTML文件下一级。
```HTML
<img src="images/pic3.png" alt="">
```