话接上次。
一、<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标签,所以下节课讲。请个假······