1.HTML 图像- 图像标签(<img>)
在 HTML 中，图像由<img> 标签定义。img代表单词image，意为图像。
<img> 是空标签，意思是说，它只包含属性，并且没有闭合标签。
要在页面上显示图像，你需要使用源属性（src）。src 指 "source"。源属性的值是图像的 URL 地址。
<!-- img图片的基础用法 -->
<img src="url(图片地址)" alt="text(替换文本)" title="text(提示文本)" /><img>属性：
属性 |
值 |
描述 |
src |
URL |
规定显示图像的 URL |
alt |
text |
规定图像丢失时，显示的替换文本。 |
title |
text |
规定鼠标悬停时显示的内容 |
width |
pixels / % |
规定图像的宽度 |
height |
pixels / % |
规定图像的高度 |
loading |
eager：立即加载 lazy：延迟加载 |
指定浏览器是应立即加载图像还是延迟加载图像。 |
ismap |
ismap |
将图像规定为服务器端图像映射。 |
usemap |
#mapname |
将图像定义为客户器端图像映射。 |
注：属性src的URL值用来定义图像资源的路径，是<img>标签的必需属性，用于在页面上显示图像。需要使用该属性指定图片的URL地址，即图像文件的路径和文件名。路径可以使用相对路径和绝对路径。
<img>标签的alt属性为图像定义可替换的文本，当浏览器无法载入图像时，会显示替换文本来告知用户相关信息。使用替换文本属性有助于更好的显示信息，提高页面友好度。
<img>标签一般会指定width或者height属性，或者在css中规定宽高，一般高度和宽度设定好其中一个，另一个会自动等比例缩放，如果两个都设定，需精准设定，否则容易导致高度和宽度不协调而失真。若不指定图片的大小，加载页面时就会破坏HTML页面的整体布局。
2.绝对路径与相对路径
相对路径：资源相对于当前网页的地址。
. 代表文件所在的目录
.. 代表上级目录
直接输入文件名就代表当前目录,相当于./文件名
同一路径：./或者无符号
<!-- 引入与当前HTML文件同级的图片 展示结果相同-->
<!-- ./ 引入-->
<img src="./img.jpg">
<!-- 无符号 引入-->
<img src="img.jpg">下一级路径：/
<!-- 引入与当前HTML文件同级的images文件夹下的图片 -->
<img src="./images/logo.jpg">
<img src="images/logo.jpg">上一级路径：../
<!-- 引入在当前HTML文件上一级目录下的img.jpg图片 -->
<img src="../img.jpg">根目录：/
<!-- 引入在当前HTML文件路径开头下的图片 -->
<img src="/images/img.jpg">绝对路径：资源的完整地址。
本地路径：
<!-- 一般情况下不会使用 引入"C:\Users\Administrator\Desktop"路径下的图片-->
<img src="C:\Users\Administrator\Desktop\...\img.jpg">网络图片
<!-- 开发经常使用 引入网络地址下的图片文件"http://ip:port/工程名/资源路径"-->
<img src="https://www.html.com/img.png">3.图片超链接
图像的超链接和文字的链接方法是相似的，都是使用<a>标签来完成，只要将<img>标签放到<a>和</a>之间。
<!-- 点击图片跳转链接 -->
<a href="#超链接路径">
<img src="图片路径">
</a>