HTML5怎样用img标签插图？HTML5用img标签插图的技巧和用法有哪些？

HTML5中img标签的基本语法

img标签是HTML5中用于嵌入图片的空元素，不需要闭合标签，基本语法结构如下，所有属性都写在标签内部即可。

<img src="图片路径" alt="图片描述">

核心属性说明

img标签有多个属性，其中以下属性是最常用且必须了解的：

• src属性：指定图片的URL地址，是img标签的核心属性，没有该属性图片无法加载。路径可以是相对路径、绝对路径或者网络图片地址。
• alt属性：指定图片的替代文本，当图片加载失败时会显示该文本，同时是屏幕阅读器识别图片内容的重要依据，对无障碍访问非常关键。
• width和height属性：指定图片的显示宽度和高度，单位是像素，设置后可以避免页面加载时布局偏移。

HTML5用img标签插图的常用技巧

1. 正确设置图片路径

路径设置错误是图片无法显示的最常见原因，不同场景下的路径写法如下：

• 相对路径：图片和HTML文件在同一目录，直接写图片文件名，如src="logo.png"；图片在HTML文件的上一级目录，写src="../bg.jpg"。
• 绝对路径：本地绝对路径如src="C:/web/images/icon.png"，这种写法仅在本地测试使用，上线后不可用；网络路径直接写完整的图片URL，如src="https://ipipp.com/test.jpg"。

2. 必须添加alt属性

很多开发者会忽略alt属性，这是不规范的做法。alt属性的内容需要准确描述图片的核心信息，不要写无意义的内容。示例代码如下：

<!-- 正确的alt设置 -->
<img src="user-avatar.png" alt="用户头像">
<!-- 错误的alt设置 -->
<img src="user-avatar.png" alt="图片">

3. 实现响应式图片适配

为了让图片在不同尺寸的设备上都能正常显示，不需要固定宽高，可以通过CSS设置响应式规则，示例代码如下：

/* CSS样式代码 */
.responsive-img {
    max-width: 100%;
    height: auto;
}

HTML中调用该样式：

<img src="banner.jpg" alt="网站横幅" class="responsive-img">

4. 延迟加载提升性能

对于页面中不在首屏的图片，可以使用loading属性实现延迟加载，减少首屏加载时间，属性值设置为lazy即可：

<img src="product-img.jpg" alt="商品图片" loading="lazy">

常见使用误区提醒

在使用img标签时，还需要注意避开以下常见误区：

• 不要给img标签添加闭合标签，它是空元素，写成<img src="a.jpg"></img>是错误的语法。
• 不要依赖width和height属性做图片裁剪，这两个属性仅改变显示尺寸，不会改变图片本身的加载大小，大图用小尺寸显示依然会加载完整大图，浪费带宽。
• alt属性不要留空，除非图片是纯装饰性的，此时可以设置alt=""，但不要完全省略该属性。

不同场景下的插入示例

以下是几个常见场景的img标签使用代码示例：

HTML5img标签图片插入alt属性响应式图片修改时间：2026-06-20 20:30:31