css 图片等比例缩小_18 HTML的图片标签

成长是一辈子的事儿！大家好！我是时问新。分享前端、Python等技术，以及个人成长路上的那些事儿。

标签

标签也叫图片标签。标签用来在网页中插入图片。

img是image的缩写。

标签有个src属性，src是source的缩写。

src属性的值是找到这个图片的路径，也就是图片的存储目录和完整文件名。

注意：

1、图片必须复制到项目文件夹中。

也就是说，图片要保存在项目文件夹中的images子文件夹中。

项目文件夹，就是你的网页创建后保存它的文件夹。

2、图片路径必须写正确。

比如我有一个故宫的图片，图片名字和后缀叫做：gugong.jpg

这张图片放在images这个文件夹中，所以这张图片的路径就是：

images/gugong.jpg

那么要在网页中插入这张图片，标签就这么写：

3、图片只是被引入到了网页中。

图片本质上并没有插入网页中，只是被引入到了网页中。

所以图片是保存在项目文件夹中，将来也要随项目文件夹一起整体上传到服务器上。

还记得项目文件夹的目录结构吗？

图片就放在以上这个目录结构的images文件夹中。

比如现在我有两张图片，一张是故宫的图片，一张是颐和园的图片，放在images文件夹中：

现在我打开vscode编辑器，在项目文件夹目录结构中，你点一下images，就能看到这两张图片：

现在我在HTML中插入这两张图片，为了好看一点，每一张图片放在一个单独的段落中，代码如下：

  图片标签

北京景点

在浏览器中效果如下：

这就是在网页中插入图片的方法。

标签的alt属性

alt是alternate(翻译为中文是"替代者")的缩写，alt属性是对图片的文本性描述。也就是说，alt属性是用文字来描述这张图片是干什么的。

alt属性不是强制性的，也就是说它可以不写。但是为了用户体验，最好写上。因为有时候可能会由于各种原因，浏览器无法正常加载图片，比如网速非常慢的时候，或者服务器中的图片被意外删除了，这时候页面上就无法正常显示这张图片，浏览器就会在页面上该图片的位置，显示alt属性的值。这样就会让用户知道，你这一块不能显示的地方是什么东西。

另外就是对于实力不方便的人，他们浏览网页会使用网页朗读器，网页朗读器会朗读alt属性的文本。

比如我给故宫和颐和园的图片标签，添加上alt属性：

  图片标签

北京景点

比如现在我把这两张图片的路径故意写错，写成这样：

是不是在网页上就没法正常显示它们了？这时浏览器中就是这样的效果：

标签的width属性和height属性

width属性和height属性分别设置图片的宽度和高度，单位默认是像素，但是在图片标签上，这两个属性值不需要写单位(在css中是需要写的)。

如果省略其中一个属性，则表示按原比例缩放图片。

比如说，你的图片的原始宽度是1200像素，原始高度是800像素，你给一个标签设置了width属性，给它的值为300，height属性不写，那么图片显示的时候，由于宽度比原始宽度缩小了4倍，那么高度也就会等比例的自动缩小4倍，变成200像素。

比如代码中图片标签的width和height属性，我只写其中一个，

  图片标签

北京景点

那么浏览器会自动按等比例缩放图片：

关于标签的width和height属性，你可以自己在代码中去写，看看效果。

网页上支持的图片格式

网页上支持的图片格式有以下几种：

.bmp格式是一种位图，位图就是指颜色的广泛性不足的图片。

.jpeg和.jpg这两种格式是没有区别的，都是有损压缩格式。

.png可以无损也可以有损，既支持透明也支持半透明。

.svg格式是矢量图片，也就是不管放大到多少倍，都不会出现锯齿。

.webp格式是谷歌公司开发的图片格式，阿里巴巴也在广泛使用它，但是兼容性比较差。

相对路径

相对路径，就是指从当前的网页为起点出发，如何最终找到图片，所形成的路径。

随着网页文件和图片的位置关系不同，插入图片的代码随之改变。

返回上一级文件夹，采用"../"这样的写法。

比如前面引入图片的代码都是相对路径。

比如，按照下图的项目目录结构，

是"图片标签.html"这个网页文件要引入图片，而我要引入的故宫图片的位置，在images这个文件夹中。

所以就是以"图片标签.html"为起点，如何找到故宫这张图片。那么以"图片标签.html"为起点，我知道故宫图片在images文件夹中，而"图片标签.html"和images在同一个文件夹中，属于同一级目录。所以标签的src属性就这样写：

如果在images这个文件夹中还有一个文件夹，名叫images2，而我要引入网页的这张故宫图片在images2中，那么标签的src属性就这样写：

这就是相对路径，就是你要找的图片，相对于你这个网页，是怎么样的路径。

绝对路径

绝对路径，就是精准地址。

比如腾讯大厦的地址："深圳市南山区粤海街道高新科技园北区c栋腾讯大厦".

这就是一个精准地址，是不变的地址，这就是绝对路径。

不管网页在哪里，如果你使用绝对路径，就永远不需要改变这个地址。

但是如果使用相对路径，你的网页的位置变了，也就是相对于你要找的图片的 位置就随之变了，那么路径也就随之变了。

感谢阅读！知识总结不易，请点个赞或转发鼓励一下呗！关注我，从零基础入门基本功扎实的前端工程师。