一、图像标签和路径
1.必须的参数：src
<img src="被引用图像的地址URL" >
src是<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>我用VsCode创建的页面</title>
</head>
<body>
图像标签的使用：
<br /><img src="123.jpg" />
</body>
</html>效果：
2. alt 属性
alt 属性用来为图像定义一串预备的可替换的文本。
替换文本属性的值是用户定义的。
<img src="boat.gif" alt="Big Boat">
在浏览器无法载入图像时，替换文本属性告诉读者她们失去的信息。此时，浏览器将显示这个替代性的文本而不是图像。为页面上的图像都加上替换文本属性是个好习惯，这样有助于更好的显示信息，并且对于那些使用纯文本浏览器的人来说是非常有用的。
3. title属性
提示文本，鼠标放在上面，对图像进行提示
4. width 和 height
调整图像的宽度和高度：
<br /> 图像标签的使用，height属性：
<br /><img src="123.jpg" alt="这图片不存在" title="鼠标放到图片就会有文字提示" width="300" height="40" />
一般不同时修改宽和高，可以单独修改宽或者高，修改一个参数，另一个参数会自动适应其修改
5. border 边框
<br /> 图像标签的使用，border属性：
<br /><img src="123.jpg" alt="这图片不存在" title="鼠标放到图片就会有文字提示" width="300" border= "15" />
边框的颜色和边角都是可以修改的，需要学到css的知识。
6.图像标签的几个注意点
- 所谓的属性需要写在img的后面
- 属性不分先后顺序，属性之间用空格隔开
- 属性采用赋值的形式，key = "value"
二、图像路径
相对路径（重要）
相对于html文件的路径
| 同一级路径 | 无 | 图像与html在一个文件夹下，如<img src = "baidu.png" /> |
| 下一级路径 | / | 图像在html下一个文件夹中，如<img src = "txr/baidu.png" /> |
| 上一级路径 | ../ | 图像在html上一个文件夹中，如<img src = "../baidu.png" /> |
绝对路径
是一个完整的位置，一般从盘符开始。
也可以引用一个网络中的绝对地址（实际开发不常用）：
<br /> 图像标签的使用，引用网络中的图片：
<br /><img src=" http://journal.yeyanet.com/fileup/1000-4858/COVER/20211014113454.png" />
但是要注意的是，需要联网， 如果引用的图片被删了，将不能正常显示。
扫一扫
1049
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
