成长是一辈子的事儿！大家好！我是时问新。分享前端、Python等技术，以及个人成长路上的那些事儿。
img标签
img标签也叫图片标签。img标签用来在网页中插入图片。
img是image的缩写。
img标签有个src属性，src是source的缩写。
src属性的值是找到这个图片的路径，也就是图片的存储目录和完整文件名。
注意：
1、图片必须复制到项目文件夹中。
也就是说，图片要保存在项目文件夹中的images子文件夹中。
项目文件夹，就是你的网页创建后保存它的文件夹。
2、图片路径必须写正确。
比如我有一个故宫的图片，图片名字和后缀叫做：gugong.jpg
这张图片放在images这个文件夹中，所以这张图片的路径就是：
images/gugong.jpg
那么要在网页中插入这张图片，img标签就这么写：
imgsrc=images/gugong.jpg
3、图片只是被引入到了网页中。
图片本质上并没有插入网页中，只是被引入到了网页中。
所以图片是保存在项目文件夹中，将来也要随项目文件夹一起整体上传到服务器上。
还记得项目文件夹的目录结构吗？
图片就放在以上这个目录结构的images文件夹中。
比如现在我有两张图片，一张是故宫的图片，一张是颐和园的图片，放在images文件夹中：
现在我打开vscode编辑器，在项目文件夹目录结构中，你点一下images，就能看到这两张图片：
现在我在HTML中插入这两张图片，为了好看一点，每一张图片放在一个单独的段落中，代码如下：
!DOCTYPEhtmlhtmllang=enheadmetacharset=UTF-8metaname=viewportcontent=width=device-width,initial-scale=1.0title图片标签/title/headbodyh1北京景点/h1pimgsrc=images/gugong.jpgalt=/ppimgsrc=images/yiheyuan.jpgalt=/p/body/html
在浏览器中效果如下：
这就是在网页中插入图片的方法。
img标签的alt属性
alt是alternate(翻译为中文是替代者)的缩写，alt属性是对图片的文本性描述。也就是说，alt属性是用文字来描述这张图片是干什么的。
alt属性不是强制性的，也就是说它可以不写。但是为了用户体验，最好写上。因为有时候可能会由于各种原因，浏览器无法正常加载图片，比如网速非常慢的时候，或者服务器中的图片被意外删除了，这时候页面上就无法正常显示这张图片，浏览器就会在页面上该图片的位置，显示alt属性的值。这样就会让用户知道，你这一块不能显示的地方是什么东西。
另外就是对于实力不方便的人，他们浏览网页会使用网页朗读器，网页朗读器会朗读alt属性的文本。
比如我给故宫和颐和园的图片标签，添加上alt属性：
!DOCTYPEhtmlhtmllang=enheadmetacharset=UTF-8metaname=viewportcontent=width=device-width,initial-scale=1.0title图片标签/title/headbodyh1北京景点/h1pimgsrc=images/gugong.jpgalt=故宫-中国明清两代皇家宫殿/ppimgsrc=images/yiheyuan.jpgalt=颐和园-中国清朝皇家园林/p/body/html
比如现在我把这两张图片的路径故意写错，写成这样：
imgsrc=images/gugong.jpgalt=故宫-中国明清两代皇家宫殿imgsrc=images/yiheyuan.jpgalt=颐和园-中国清朝皇家园林是不是在网页上就没法正常显示它们了？这时浏览器中就是这样的效果：
img标签的width属性和height属性
width属性和height属性分别设置图片的宽度和高度，单位默认是像素，但是在图片标签上，这两个属性值不需要写单位(在css中是需要写的)。
如果省略其中一个属性，则表示按原比例缩放图片。
比如说，你的图片的原始宽度是像素，原始高度是像素，你给一个img标签设置了width属性，给它的值为，height属性不写，那么图片显示的时候，由于宽度比原始宽度缩小了4倍，那么高度也就会等比例的自动缩小4倍，变成像素。
比如代码中图片标签的width和height属性，我只写其中一个，
!DOCTYPEhtmlhtmllang=enheadmetacharset=UTF-8metaname=viewportcontent=width=device-width,initial-scale=1.0title图片标签/title/headbodyh1北京景点/h1pimgsrc=images/gugong.jpgalt=故宫-中国明清两代皇家宫殿width=/ppimgsrc=images/yiheyuan.jpgalt=颐和园-中国清朝皇家园林height=/p/body/html
那么浏览器会自动按等比例缩放图片：
关于img标签的width和height属性，你可以自己在代码中去写，看看效果。
网页上支持的图片格式
网页上支持的图片格式有以下几种：
.bmp格式是一种位图，位图就是指颜色的广泛性不足的图片。
.jpeg和.jpg这两种格式是没有区别的，都是有损压缩格式。
.png可以无损也可以有损，既支持透明也支持半透明。
.svg格式是矢量图片，也就是不管放大到多少倍，都不会出现锯齿。
.webp格式是谷歌公司开发的图片格式，阿里巴巴也在广泛使用它，但是兼容性比较差。
相对路径
相对路径，就是指从当前的网页为起点出发，如何最终找到图片，所形成的路径。
随着网页文件和图片的位置关系不同，插入图片的代码随之改变。
返回上一级文件夹，采用../这样的写法。
比如前面引入图片的代码都是相对路径。
比如，按照下图的项目目录结构，
是图片标签.html这个网页文件要引入图片，而我要引入的故宫图片的位置，在images这个文件夹中。
所以就是以图片标签.html为起点，如何找到故宫这张图片。那么以图片标签.html为起点，我知道故宫图片在images文件夹中，而图片标签.html和images在同一个文件夹中，属于同一级目录。所以img标签的src属性就这样写：
imgsrc=images/gugong.jpg
如果在images这个文件夹中还有一个文件夹，名叫images2，而我要引入网页的这张故宫图片在images2中，那么img标签的src属性就这样写：
imgsrc=images/images2/gugong.jpg
这就是相对路径，就是你要找的图片，相对于你这个网页，是怎么样的路径。
绝对路径
绝对路径，就是精准地址。
比如腾讯大厦的