HTML学习第八章(HTML图像--＜img＞标签)

1.HTML 图像- 图像标签()

在 HTML 中，图像由 标签定义。img代表单词image，意为图像。

是空标签，意思是说，它只包含属性，并且没有闭合标签。

要在页面上显示图像，你需要使用源属性（src）。src 指 "source"。源属性的值是图像的 URL 地址。

<!-- img图片的基础用法 -->
<img src="url(图片地址)" alt="text(替换文本)" title="text(提示文本)" />

属性：

属性

值

描述

src

URL

规定显示图像的 URL

alt

text

规定图像丢失时，显示的替换文本。

title

text

规定鼠标悬停时显示的内容

width

pixels / %

规定图像的宽度

height

pixels / %

规定图像的高度

loading

eager：立即加载

lazy：延迟加载

指定浏览器是应立即加载图像还是延迟加载图像。

ismap

ismap

将图像规定为服务器端图像映射。

usemap

#mapname

将图像定义为客户器端图像映射。

注：属性src的URL值用来定义图像资源的路径，是标签的必需属性，用于在页面上显示图像。需要使用该属性指定图片的URL地址，即图像文件的路径和文件名。路径可以使用相对路径和绝对路径。

标签的alt属性为图像定义可替换的文本，当浏览器无法载入图像时，会显示替换文本来告知用户相关信息。使用替换文本属性有助于更好的显示信息，提高页面友好度。

标签一般会指定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 href="#超链接路径">
    <img src="图片路径">
</a>