html关于图像（相对路径、绝对路径）

图像

介绍：在 HTML 中，图像由  标签定义。  是一个有属性单一型标签。要在页面上显示图像，你需要设置img元素的src（source，数据源）属性。src属性的值是图像的 URL 地址。

格式:

img标签支持的属性：

属性名称	属性值	说明
src	URL	必需属性，设置图片的路径
alt	文本内容	必需属性，它规定在图像无法显示时的替代文本
width	像素/百分比	设置图片的宽度
height	像素/百分比	设置图片的高度
title	文本内容	当鼠标悬浮在图片时出现的文本

 alt属性中的文本作为备用文字描述了图片的内容，这可以帮助用户在图片加载失败或者不可见的情况下理解图片内容，也有助于搜索引擎理解图片内容，并将其加入到搜索结果中。例如：

 

 

那些无法通过视觉获取信息的用户(视力障碍)，只能通过屏幕阅读器将网页内容转换为音频的方式获取信息，而屏幕阅读器通过识别alt属性，并朗读其中的内容，来告知用户图片包含的关键信息。良好的alt文本可以简明扼要地描述图片信息，所以你应该为图片添加alt属性。另外，HTML5 标准也在考虑强制要求对图片添加alt属性。

img标签支持的图片格式：

• png
• jpg
• jpeg
• gif
• webp 等等

 img标签的src属性支持的图片路径：

 1、绝对路径

          ①、 网络地址: https是网络协议本地: 

          ②、本地文件协议地址，file是本地文件协议2相对路径；

  绝对路径就是你的主页上的文件或目录在硬盘上真正的路径，(URL和物理路径(指硬盘上文件的路径))

   <div>
       <p>网络协议地址</p>
        <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/61454401f855cf5ed64747a6ac04bae5.jpg?thumb=1&w=250&h=250&f=webp&q=90" alt="">
   </div>



   <div>
       <p>本地文件协议地址</p>
      <img src="/images/1.png" alt="">
   </div>

2、相对路径：

 <img src="/images/login.jpg" alt="">

  相对与某个基准目录的路径。包含Web的相对路径（HTML中的相对目录）

例如：在 Servlet(是Java Servlet的简称,称为小服务程序或服务连接器)中，"/"代表Web应用的根目录

例如： ./图片所在路径  代表当前目录

../图片所在路径 代表上级目录；