HTML标签：图片标签

img标签介绍

介绍

img: 英文全称 image（图像），代表的是一张图片。

如果要想在网页中显示图像，就可以使用img 标签，它是一个单标签。语法如下：

<img src="图片的URL" />

能插入的图片类型

• 能够插入的图片类型是：jpg(jpeg)、gif、png、bmp等。

• 不能在网页中插入的图片格式是：psd、ai等。

HTML页面不是直接插入图片，而是插入图片的引用地址，所以要先把图片上传到服务器上。

img标签的 src 属性

这里涉及到图片的一个属性：

• src 属性：指图片的路径。英文名称 source。

在写图片的路径时，有两种写法：相对路径、绝对路径。

相对路径

相对当前页面所在的路径。例如：

• <img src="images/1.jpg">：当前目录下的 images 文件夹中的图片
• <img src="../images/1.jpg">：上一级目录中的 images 文件夹中的图片

绝对路径

绝对路径包括：

1. 以盘符开始的绝对路径。例如：<img src="C:\Users\images\1.jpg">

2. 网络路径。例如：<img src="https://example.com/images/1.jpg">

img标签的其他属性

除了 src 属性外，img 标签还有其他很多属性：

• width：图像的宽度，单位是像素。例如：width="500"
• height：图像的高度，单位是像素。例如：height="300"
• alt：当图片不可用（无法显示）时，对图片的描述。例如：alt="这是一张风景图片"
• title：鼠标悬停在图片上时显示的文字。例如：title="美丽的风景"
• border：设置图片的边框，单位是像素。例如：border="1"（HTML5 中已废弃，建议使用 CSS 代替）

图片的宽高设置

关于图片的宽度和高度，有以下几种设置方式：

1. 同时设置宽度和高度：<img src="1.jpg" width="200" height="100">
2. 只设置宽度，高度会自动等比例缩放：<img src="1.jpg" width="200">
3. 只设置高度，宽度会自动等比例缩放：<img src="1.jpg" height="100">
4. 不设置宽高，使用图片的原始尺寸：<img src="1.jpg">

注意：在实际开发中，为了保证图片不变形，一般只设置宽度或者高度，让另一个尺寸自动等比例缩放。

图片的 alt 属性

alt 属性用于指定图片的替代文本，当图片无法显示时会显示这段文字。

alt 属性的作用：

1. 当图片无法显示时，页面会显示 alt 中的文字
2. 有利于 SEO（搜索引擎优化）
3. 有利于屏幕阅读器识别图片内容，为视障用户提供便利

示例：<img src="1.jpg" alt="这是一张风景图片">

图片的 title 属性

title 属性用于设置鼠标悬停在图片上时显示的文字。

示例：<img src="1.jpg" title="美丽的风景">

图片的路径

在实际开发中，图片的路径是非常重要的。一般来说，我们会将图片放在项目的 images 文件夹中，然后通过相对路径引用。

例如：

<img src="images/logo.png" alt="公司logo">

如果是网络图片，则直接使用完整的 URL：

<img src="https://example.com/images/logo.png" alt="公司logo">

总结

图片标签是 HTML 中非常常用的标签，它允许我们在网页中插入图片，丰富网页的内容。在使用图片标签时，需要注意以下几点：

1. 正确设置图片的路径
2. 合理设置图片的宽高，避免图片变形
3. 添加 alt 属性，提高可访问性和 SEO
4. 优化图片大小，提高页面加载速度

在实际开发中、特别是在响应式网页设计中，我们通常会结合 CSS 来控制图片的显示效果，使其能够适应不同的屏幕尺寸。