0


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>
标签: html 学习 前端

本文转载自: https://blog.csdn.net/Baileys_99/article/details/129341625
版权归原作者 正趣果上果好吃呀 所有, 如有侵权,请联系我们删除。

“HTML学习第八章(HTML图像--<img>标签)”的评论:

还没有评论