长大是一辈子的事！大家好！我是最新的。分享一下前端，Python等技术，还有个人成长路上的那些事。
标签标签
标签也叫图片标签。
标签用来在网页中插入图片。标签用于在网页中插入图片。
Img是image的缩写。
标签有个src属性，src是source的缩写。标签有一个src属性，src是source的缩写。
src属性的值是找到这个图像的路径，也就是图像的存储目录和完整文件名。
注意:
1.图片必须复制到项目文件夹中。
也就是说，图片应该保存在项目文件夹的images子文件夹中。
文件夹是创建网页后保存网页的文件夹。
2.图片路径必须写正确。
比如我有一张故宫的图片。图片的名字和后缀是gugong.jpg。
这张图片在图片文件夹中，所以这张图片的路径是:
图片/gugong.jpg
那么要在网页中插入这张图片，标签就这么写：然后将这张图片插入网页，标签是这样的:
3.图片刚被引入网页。
本质上，图片不是插入网页，而是引入其中。
所以图片保存在项目文件夹中，以后会和项目文件夹一起上传到服务器。
还记得项目文件夹的目录结构吗？
这些图片放在上述目录结构的images文件夹中。
例如，现在我有两张图片，一张是故宫，另一张是颐和园，我把它们放在images文件夹中:
现在我打开vscode编辑器。在项目文件夹的目录结构中，你可以点击图片，你可以看到这两张图片:
现在我在HTML中插入这两张图片。为了看起来更好，每个图像都放在一个单独的段落中，代码如下:
图片标签 北京景点
北京景点图片
这是如何在网页中插入图片。
标签的alt属性标签的alt属性。
Alt是alternate的缩写，alt属性是图片的文字描述。也就是说alt属性是用文字来描述这张图片是做什么的。
alt属性不是强制的，也就是说，它可以不写。但是为了用户体验，最好还是写。有时候由于各种原因，浏览器无法正常加载图片，比如网速很慢，或者服务器里的图片被不小心删除了。此时，这张图片无法在页面上正常显示，浏览器会在页面上这张图片的位置显示alt属性值。这将让用户知道你不能显示什么。
另外，对于力量不方便的人，在浏览网页时会使用网页阅读器，网页阅读器会读取alt属性的文字。
比如我给故宫和颐和园的图片加标签，加alt属性:
图片标签 北京景点
北京景点图片
是不是在网页上就没法正常显示它们了？这时浏览器中就是这样的效果：是不是无法在网页上正常显示？这是浏览器中的效果:
标签的width属性和height属性标记的宽度属性和高度属性。
width属性和height属性分别设置图片的宽度和高度。单位默认是像素，但是在图片标签上，这两个属性值不需要写单位。
如果省略其中一个属性，则意味着按原始比例缩放图片。
比如说，你的图片的原始宽度是1200像素，原始高度是800像素，你给一个标签设置了width属性，给它的值为300，height属性不写，那么图片显示的时候，由于宽度比原始宽度缩小了4倍，那么高度也就会等比例的自动缩小4倍，变成200像素。比如你的图片原来的宽度是1200像素，原来的高度是800像素。您将width属性设置为一个标签，赋予其值300，并且不写入height属性。图片显示时，宽度比原宽度缩小4倍，高度会自动按200像素等比例缩小4倍。
比如代码中图片标签的宽度和高度属性，我只写其中一个，
图片标签 北京景点
北京景点图片
关于标签的width和height属性，你可以自己在代码中去写，看看效果。关于标签的宽度和高度属性，你可以自己在代码中写出来看看效果。
网页上支持的图片格式
网页支持以下图片格式:
。bmp格式是位图的一种，指的是颜色通用性不够的图片。
之间没有区别。jpeg和。jpg格式，两者都是有损压缩格式。
。png可以是无损的，也可以是有损的，同时支持透明和半透明。
的。svg格式是矢量图片，也就是不管放大多少倍都不会有锯齿。
的。webp格式是Google开发的图片格式，被阿里巴巴广泛使用，但兼容性较差。
相对路径
相对路径是指从当前网页开始，如何最终找到图片而形成的路径。
随着网页文件与图片位置关系的不同，插入图片的代码也随之改变。
回到上一级文件夹，写下如下内容"../".
比如前面图片介绍的代码都是相对路径。
例如，根据下面所示的项目目录结构，
是导入图片的“picture label . html”web文件，我要导入的故宫图片的位置在images文件夹里。
所以就是以"图片标签.html"为起点，如何找到故宫这张图片。那么以"图片标签.html"为起点，我知道故宫图片在images文件夹中，而"图片标签.html"和images在同一个文件夹中，属于同一级目录。所以标签的src属性就这样写：那么如何找到这张故宫的图片，是基于“图片标签. html”的。然后从“picture tag.html”开始，我知道故宫的图片在images文件夹里，而“picture tag.html”和images在同一个文件夹里，属于同一级目录。所以标签的src属性是这样写的:
如果在images这个文件夹中还有一个文件夹，名叫images2，而我要引入网页的这张故宫图片在images2中，那么标签的src属性就这样写：如果文件夹images中有另一个名为images2的文件夹，而我要引入网页的这张故宫图片在images2中，那么标签的src属性就写成这样:
这是相对路径，也就是你要找的图片的路径，相对于你的网页。
绝对路径
绝对路径是确切的地址。
比如腾讯大厦的地址:“深圳市南山区粤海街道高新园区北区C栋腾讯大厦”。
这是一个确切的地址，一个不变的地址，这是绝对路径。
无论网页在哪里，如果你使用绝对路径，你将永远不需要改变这个地址。
但是如果你用相对路径，你的网页位置就变了，也就是相对于你要找的图片的位置也相应变了，路径也变了。
感谢阅读！总结知识不容易，请给个赞或者转发鼓励一下！关注我，一个基本功扎实的前端工程师。
