行级标签图像

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="">

    ```

   

**绝对路径**

绝对路径文件在目录中的绝对位置完整描述，常见的绝对路径一种由其在网络上的绝对位置定义的位置，一种是本地从盘符出发的绝对位置。

- 网络绝对位置

  - 语法

    包括协议和域名：如：http://www.ujiuye.com/statics/images/logo.png

- 本地绝对位置

  - 语法

    D盘下webset文件夹下的image文件夹中的logo.png描述为：

    ```

    D:\webset\images\logo.jpg

    ```

  ​    特点:绝对URL始终指向同一位置，无论在何处使用

  **注意:**在链接到同一网站内的其他位置时，应尽可能使用相对链接。链接到另一个网站时，需要使用绝对链接。