在HTML中插入图片使用` 标签，需设置src （路径）和alt （描述）属性，如 ，建议添加width/height 属性或CSS控制尺寸，确保路径正确，alt`文本利于SEO
HTML插入图片基础语法
| 标签语法 | 说明 |
<img src="image.jpg" alt="描述文本"> | src指定图片路径，alt提供替代文本（必填） |
<img src="image.jpg" width="200" height="100"> | 通过属性直接设置宽度和高度 |
图片路径与格式
| 类型 | 示例 | 说明 |
| 相对路径 | <img src="images/pic.png"> | 相对于HTML文件的路径 |
| 绝对路径 | <img src="/website/images/pic.png"> | 从网站根目录开始 |
| URL链接 | <img src="https://example.com/image.jpg"> | 网络图片地址 |
| 支持格式 | .jpg/.jpeg.png.gif.svg | 常见图片格式，推荐使用响应式格式如.webp |
关键属性与功能
| 属性 | 作用 | 示例 |
alt | 图片无法显示时的文字替换，提升SEO和无障碍访问 | <img alt="风景图"> |
loading="lazy" | 延迟加载（HTML5） | <img src="image.jpg" loading="lazy"> |
控制图片尺寸与排版
| 方法 | 代码示例 | 说明 |
| CSS控制尺寸 | <img class="responsive" src="image.jpg">
.responsive { max-width: 100%; height: auto; } | 自适应容器宽度，保持比例 |
| 居中显示 | <p style="text-align:center;"><img src="image.jpg"></p> | 通过父元素文本对齐实现 |
| 等比例裁剪 | <img style="object-fit:cover; width:300px; height:200px;" src="image.jpg"> | CSS控制填充模式（需浏览器支持） |
响应式图片处理
| 场景 | 代码示例 | 说明 |
| 多分辨率适配 | <picture>
<source media="(min-width:800px)" srcset="large.jpg">
<img src="small.jpg" alt="示例图">
</picture> | 根据屏幕宽度加载不同图片 |
| WebP格式支持 | <picture>
<source type="image/webp" srcset="image.webp">
<img src="image.jpg" alt="示例图">
</picture> | 优先使用WebP格式（需兼容性处理） |
图片优化建议
| 优化项 | 方法 |
| 压缩文件 | 使用工具（如TinyPNG）压缩图片体积 |
| 懒加载 | 添加loading="lazy"属性或JavaScript监听滚动事件 |
| 缓存利用 | 配置服务器缓存策略，避免重复加载 |
常见问题与解答
问题1：图片无法显示怎么办？
- 检查路径：确认
src路径是否正确，注意大小写和文件后缀。 - 控制台报错：按F12查看
Console，排查404错误。 - 跨域限制：网络图片需允许跨域访问（如设置
Access-Control-Allow-Origin）。
问题2：如何防止图片拉伸变形？
- 保持比例：使用CSS
object-fit: contain; 或设置宽高为百分比。 - 固定宽高比：<img width=”200″ height=”auto
