图像标签
图片标签要注意图片存放的路径有效才可以使用。
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>结果：有兴趣可以复制该链接尝试看一下（这里就不演示了！！！）
还有很多待更新中... ...
以上为本人记录资料，如果有哪里不明白或有错误的地方，可以留言讨论，我收到消息后会及时回复、改正、讲解！
1929
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
