经过前两篇的学习，你已经可以使用HTML标签构建基础网页。今天我们学习如何用 <img> 标签插入图片，让页面更丰富！

一、准备图片文件

1. 在VS Code左侧空白区右键新建文件夹 

​

命名为 images（⚠️命名按照个人喜好即可）

二、<img>标签语法详解

alt= 显示效果为

基本用法示例：

<!-- 基本用法 --><img   src="sunset.jpg"   alt="海边日落风景" >

三、关键注意事项

1.⚠️必须写 alt 属性

 ◦ 即使留空（alt=""），也是合法的（用于装饰性图片）。

 ◦ 缺失 alt 会导致 HTML 验证错误，影响无障碍访问。

2.⚠️图片路径常见错误

◦ 错误：src="images"（缺少文件名）

◦ 正确：src="images/sunset.jpg"

3. 📏 元素特性说明

图片在HTML中属于区块（ inline-block ）元素，默认情况下，<img>也会占据一整行的空间。

通过合理使用 <img> 标签，你可以确保图片在网页中高效、可访问且适配各种设备！

阅读原文：原文链接