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