本文详细介绍了HTML中话接上次。
一、<img>标签
这是一个关于图片的标签。
我们先来看一个具体例子：
<img src="*****.jpg">
这是什么牛马？
我们来解释一下。假如说，我们要导入一张这样的图片：
该怎么做？
首先，我们先确定这张图片的名称：
接着，写入代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>样例程序</title>
</head>
<body>
<img src="demo.webp">
</body>
</html>注意一下，我们需要操作的，就只有<body>中的<img>。
看一下运行效果：
是不是非常得好？
当然了，这只是第一种情况：图片和我们的html文件在同一个文件夹中。
img的地址分为：
（1）网上url （其实就是链接）
（2）本地的相对路径
（3）本地的绝对路径
在同一个文件夹中，其实就是相对路径。
那么，如果不在同一个文件夹中，该怎么办？
这个时候，就有一些麻烦：需要导入整个的路径。
例如：D://demo//demo1//zhaopian。jpg
是有一些麻烦的，所以我们建议存到一个文件夹中。
img其实还有一些有趣的属性，我们来看一下：
alt
title
首先，是alt属性。当一个人的网络状态不好的时候，可能会加载不出来图片，这个时候就需要alt了。大家可以试一下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>样例程序</title>
</head>
<body>
<img src="https://image.baidu.com/search/detail?ct=503316480&z=0&ipn=d&word=%E7%85%A7%E7%89%87&hs=0&pn=4&spn=0&di=7060663421280190465&pi=0&rn=1&tn=baiduimagedetail&is=0%2C0&ie=utf-8&oe=utf-8&cl=2&lm=-1&cs=1441790933%2C2769731592&os=1232169861%2C606850690&simid=32456130%2C660550381&adpicid=&lpn=0&ln=30&fr=ala&fm=&sme=&cg=&oriquery=%E7%85%A7%E7%89%87&objurl=http%3A%2F%2Fnimg.ws.126.net%2F%3Furl%3Dhttp%3A%2F%2Fdingyue.ws.126.net%2F2021%2F0914%2Fa768c5a7j00qzf6hs008rc000qo00hsm.jpg%26thumbnail%3D650x2147483647%26quality%3D80%26type%3Djpg&gsm=1e&islist=&querylist=&dyTabStr=MCwzLDYsMiwxLDQsNSw3LDgsOQ%3D%3D" alt="这是一张图片！！！">
</body>
</html> 
挂了的图片旁边的文字就是alt所展示的。
接着，看一下 title属性。
我们可能觉得很眼熟：是不是见过？
是的。但是此title并非彼title。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>样例程序</title>
</head>
<body>
<img src="demo.webp" title="This is a photo">
</body>
</html>当鼠标移到图片上去的时候，就会显示文字 This is a photo 了。
大家可以试一下：
这是一张其他的图片。只是告诉大家一下这个的效果。
<img>标签到此结束。
由于字数原因，我们没有办法再讲a标签，所以下节课讲。请个假······
383
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
