书接上文，因为篇幅有限，前一篇文章图像标签属性还有没说完的，比如width和height，还有border 边框
先看效果，width:
再看代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>20210819_六</title>
</head>
<body>
原有图片大小
<div><img src="HTML5.jpeg"></div>
<img src="HTML5.jpeg" title="鼠标hover上，就展示了" width=300 />
<br />
</body>
</html>
这里我们设置了width = 300, 可以为什么高度好像也缩小了呢？
别着急，继续往下写 height = 300
看下代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>20210819_六</title>
</head>
<body>
原有图片大小
<div><img src="HTML5.jpeg"></div>
<img src="HTML5.jpeg" width=300 />
<br />
<img src="HTML5.jpeg" height=300 >
</body>
</html>
这是为什么呢，width 和 height有什么区别么？原来修改图片大小时，是按比例缩放的，一般只修改一项，比如只修改width，或者只修改height 如果两个都修改，图片就会压缩或者拉伸，显得很不好看。因为原图像长宽比不是1，所以分别修改宽和高，显示也不一样。
接着，我们看下图像边框 <border>：
可以看到，有一个黑色的边框展示
代码展示:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>20210819_六</title>
</head>
<body>
原有图片大小
<div><img src="HTML5.jpeg"></div>
<img src="HTML5.jpeg" width=300 border=15 />
<br />
</body>
</html>
再说下图像标签的重点属性:
- 图像标签可以拥有多个属性，必须写在标签名<img>的后面，如:
<img src="HTML5.jpeg" width=300 border=15 />
2. 属性之间不分先后顺序,标签名与属性，属性与属性之间，要以空格分开
3. 属性采取键值对的格式，即 key = "value"格式，属性 = 属性值
接下来我们说下图像的路径
先说下什么是目录文件夹和根目录:
当一个项目中图片很多的时候，最好就是创建一个图片文件夹，将项目中用到的图片都放到这个文件夹中。目录文件夹是普通文件夹，存放了所有和页面相关的素材，比如html文件和图片等。什么是根目录呢，就是打开目录文件夹的第一层。安装vs code后，可以很清晰的看清楚目录文件夹和根目录
路径还有相对路径和绝对路径。
相对路径:以引用文件所在位置为参考而建立出的目录路径，即图片相对于HTML页面的位置。可以分为三种情况:
同一级的相对路径
图片效果:
html文件和图片文件在同一级里
代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>20210819_六</title>
</head>
<body>
原有图片大小
<img src="HTML5.jpeg">
</body>
</html>
上一级的相对路径：
图片在下一级文件夹中
看下代码展示:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>20210819_六</title>
</head>
<body>
原有图片大小
<img src="images/HTML5.jpeg">
</body>
</html>
下一级的相对路径
看看效果:
看下代码实现:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<img src="../HTML5.jpeg">
</body>
</html>
使用了 ../来确定图片地址
好的，今天就先到这里，谢谢大家，晚安
