正确使用img标签需关注路径、替代文本和尺寸。src属性指定图片路径，支持相对、绝对或网络地址；alt属性提供替代文本，提升可访问性和SEO；width和height控制显示大小，建议配合CSS实现响应式布局，避免图片溢出。
在网页开发中，插入图片是基本且常见的操作。HTML 提供了 img 标签专门用于显示图像。虽然用法简单，但理解其关键属性和使用规范能避免常见问题，比如图片不显示或页面加载慢。
img 标签的基本语法
img 是一个自闭合标签，不需要结束标签。最基本的写法如下：
<img src="图片路径" alt="替代文字">其中，src 属性指定图片的地址，alt 属性提供图片无法显示时的替代文本，对可访问性和SEO都很重要。
src 属性：指定图片路径
src（source）是必填属性，告诉浏览器图片从哪里加载。支持以下几种路径写法：
立即学习“前端免费学习笔记（深入）”；
- 相对路径：
<img src="images/photo.jpg">，相对于当前 HTML 文件位置 - 绝对路径：
<img src="/assets/photo.png">，从网站根目录开始 - 网络地址：
<img src="https://example.com/photo.webp">，引用外部资源
确保路径正确，否则图片会显示为“破损”状态。
alt 属性：提升可访问性与SEO
alt 文本在图片加载失败、屏幕阅读器读取或搜索引擎抓取时起作用。建议写清楚图片内容，而不是留空或乱填。
- 好例子：
alt="一只坐在草地上的橘猫" - 坏例子：
alt="图片"或alt=""（仅当装饰性图片才建议空值）
合理的 alt 描述有助于视觉障碍用户理解页面内容，也能提升搜索引擎排名。
控制图片大小：width 和 height
可通过 width 和 height 属性设置图片显示尺寸：
<img src="photo.jpg" width="300" height="200" alt="示例图片">单位默认是像素。也可以使用 CSS 更灵活地控制，例如：
<img src="photo.jpg" style="width: 100%; max-width: 500px;">响应式设计中，常结合 CSS 设置最大宽度，避免图片溢出容器。
基本上就这些。掌握 img 标签的核心属性，就能正确、高效地在网页中插入图片。关键是路径别写错，alt 别忽略，尺寸要适配。不复杂但容易忽略细节。
