首页 前端知识 HTML图像标签&相对路径和绝对路径的使用!

HTML图像标签&相对路径和绝对路径的使用!

2024-08-27 09:08:03 前端知识 前端哥 435 920 我要收藏

图像标签

图片标签要注意图片存放的路径有效才可以使用。

img。

演示:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p>图像标签的使用:img定义HTML页面中的图像</p>
    <img src="../imgs/测试图片.jpg"/>
    src是《img》的标签属性。
    
    <h4>alt是替换文本,图像显示不出来显示文字</h4>
    <br /><img src ="图像.jpg" alt="显示不出来的图片文字描述" />

    <h4>title是提示文本,鼠标悬停在图片上显示文字</h4>
    <br /><img src ="../imgs/测试图片.jpg" title="鼠标悬停在图片是显示的文字描述" />

    <h4>width是设置图像宽度为50px</h4>
    <br /><img src ="../imgs/测试图片.jpg" width="50px" />
    <h4>height是设置图像高度为100px</h4>
    <br /><img src ="../imgs/测试图片.jpg" height="100px" />

    <h4>border是设置图像边框</h4>
    <br /><img src ="../imgs/测试图片.jpg" border ="100px" />
     
</body>
</html>

1)img定义HTML页面中的图像,src是img的标签属性。

img src

显示结果:

2)alt是替换文本,就是如果图像不显示出来,就会显示对应的文字信息。

alt=" "。

结果显示:

3)title是提示文本,当鼠标悬停在图片上就会显示出对应的文字信息。

title=“ ”。

显示结果:

4)width:设置图像的宽度;height:设置图像的高度。

width=“ ”。

height=“ ”。

结果显示:

5)border 设置图像的边框大小。

border=“ ”。

结果显示:

还有很多待更新中... ...

以上为本人记录资料,如果有哪里不明白或有错误的地方,可以留言讨论,我收到消息后会及时回复、改正、讲解!

**************************************************************************************************************

以下是关于图片文件的添加方式补充说明!

相对路径

1、图片与该html文件存在同一个文件:

图片与该html文件存在同一个文件时,可以直接填写图片的文件名称,或者使用"./ "来打开文件夹里面的图片位置。

2、图片的母文件与该html的母文件存在同一级文件:

绝对路径

1)本地路径:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    本地路径:<br>
    <img src="D:\ZhuoMian\sj\imgs\测试图片.jpg" alt="">
</body>
</html>

2)网络路径:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    网络路径:
    <img src ="https://i0.hdslb.com/bfs/article/77adaaea611cba18ce1cfc4c004b3a2e5ff4282b.jpg@1256w_1810h_!web-article-pic.avif">
</body>
</html>

结果:有兴趣可以复制该链接尝试看一下(这里就不演示了!!!)

还有很多待更新中... ...

以上为本人记录资料,如果有哪里不明白或有错误的地方,可以留言讨论,我收到消息后会及时回复、改正、讲解!

转载请注明出处或者链接地址:https://www.qianduange.cn//article/16961.html
标签
评论
发布的文章

安装Nodejs后,npm无法使用

2024-11-30 11:11:38

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!