图像标签
图片标签要注意图片存放的路径有效才可以使用。
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>
结果:有兴趣可以复制该链接尝试看一下(这里就不演示了!!!)
还有很多待更新中... ...
以上为本人记录资料,如果有哪里不明白或有错误的地方,可以留言讨论,我收到消息后会及时回复、改正、讲解!