html显示图片

HTML插入图片的基本语法

使用<img>标签插入图片，核心属性为src（图片路径）和alt（替代文本）。

<img src="images/cat.jpg" alt="一只猫在草地上" width="300" title="点击查看大图">

图片路径类型与用法

控制图片尺寸与比例

通过HTML属性设置

直接指定width和height，但可能拉伸变形。

<img src="cat.jpg" width="200" height="150" alt="猫">

通过CSS控制（推荐）

使用max-width: 100%保持比例缩放，适配响应式布局。

img.responsive {
  max-width: 100%;
  height: auto;
}

<img src="cat.jpg" class="responsive" alt="猫">

图片排版与文字环绕

传统浮动布局

<img src="cat.jpg" alt="猫" style="float: left; margin-right: 10px;">
<p>这是一段围绕图片的文字...</p>
<div style="clear: both;"></div>

现代Flexbox布局

<div style="display: flex; align-items: center;">
  <img src="cat.jpg" alt="猫" style="margin-right: 10px;">
  <p>这是一段与图片对齐的文字</p>
</div>

优化与兼容性

1. 懒加载：延迟加载图片，提升性能。

   <img src="cat.jpg" loading="lazy" alt="猫">

2. WebP格式：现代浏览器支持的高效压缩格式。

   <picture>
     <source srcset="cat.webp" type="image/webp">
     <img src="cat.jpg" alt="猫">
   </picture>

3. 替代方案：当图片加载失败时显示默认内容。

   <img src="cat.jpg" alt="猫" onerror="this.src='default.png'">

常见问题与解答

问题1：如何让图片自适应容器大小且保持比例？

解答：
使用CSS设置max-width: 100%和height: auto，

img {
max-width: 100%;
height: auto;
}

这样图片会在容器内缩放,但不会超出原始比例。

问题2：如何为图片添加链接？

解答：
将<img>标签包裹在<a>标签中：

<a href="https://example.com">
  <img src="cat.jpg" alt="点击查看大图">
</a>

或直接在<img>标签中使用`usemap