HTML基础：img图像标签的4个属性值详解

你好，我是云桃桃。今天来聊一聊图片标签。

语法

HTML <img> 标签用于在网页中插入图像，它是 HTML 中的一个自闭合标签。通过在网页中显示图像，可以丰富页面内容、传达信息和提升用户体验。

<img src="img/jay01.jpg" alt="Alternative Text" width="100" height="100" />

<img> 标签没有内容，它这 4 个属性，接下来详细说一说。

属性

当使用 HTML <img> 标签时，常常会用到以下 4 个属性：

1、src 属性：用于指定要显示的图像的 URL。

作用：src 属性定义了图像文件的位置，告诉浏览器在哪里找到要显示的图像文件。

使用方法：将图像文件的路径或 URL 放置在 src 属性中即可。路径可以是相对路径（相对于当前 HTML 文件的路径）或绝对路径（完整的 URL 地址）。

<img src="img/jay01.jpg" alt="Image" />

2、alt 属性：用于提供图像的替代文本。

作用：alt 属性提供了图像的替代文本，用于在图像无法显示时代替显示，以及为屏幕阅读器用户提供信息。

使用方法：将要显示的文本放置在 alt 属性中即可。

<img src="img/jay01.jpg" alt="This is an image" />

3、width 属性：用于指定图像的宽度。

作用：width 属性定义了图像的宽度，可以使用像素值或百分比值。

使用方法：将要设置的宽度值放置在 width 属性中即可。

<img src="img/jay01.jpg" alt="Image" width="200" />

4、height 属性：用于指定图像的高度。

作用：height 属性定义了图像的高度，同样可以使用像素值或百分比值。

使用方法：将要设置的高度值放置在 height 属性中即可。

<img src="img/jay01.jpg" alt="Image" height="100" />

这些属性常用的是 src, alt, 而后 2 者 width ,height 还是要慎用的，为什么呢？从 2 个角度考虑——

CSS 更常用于控制大小：通常，开发人员更倾向于使用 CSS 来控制图像的大小，因为它可以提供更大的灵活性和控制。通过 CSS 可以轻松地指定图像的宽度和高度，并且可以在不影响 HTML 结构的情况下进行更改。

不同尺寸的图像：以后，在响应式设计中，也就是一个网页不仅用在电脑端，也用在手机端的时候，网页可能会在不同的设备上显示不同大小的图像，因此在 HTML 中硬编码宽度和高度可能不是最佳实践。而在 CSS 中指定图像的宽度和高度可以更好地适应不同的屏幕尺寸和分辨率。

总结

尽管通过在页面中添加图像，可以使页面更加生动、吸引人，并提升用户体验，但是工作中，仍然不建议盲目的增加图片，尤其是体积太大的，这样会降低网页的打开或者加载时间。

因此，应该酌情加图片或者对大体积图片做压缩处理，再使用，压缩图片的网站，比如这款广为人知的在线 PNG 图片压缩工具，https://tinify.cn/。

排版：云桃桃 | 图片设计：云桃桃   

作者介绍：

云桃桃，在写作的程序媛。终身学习者，陪你一起编程，一起写作❤️