html多图片插入

HTML多图片插入方法详解

基础插入方式

1. 单个<img>标签重复使用
   直接在HTML中多次写入<img>标签，适用于简单布局。

   <img src="image1.jpg" alt="图片1">  
   <img src="image2.jpg" alt="图片2">  
   <img src="image3.jpg" alt="图片3">

2. 使用<div>容器包裹
   通过<div>或<p>标签分组，便于统一设置样式。

   <div class="gallery">
     <img src="image1.jpg" alt="图片1">
     <img src="image2.jpg" alt="图片2">
   </div>

CSS布局控制

响应式适配

1. 图片自适应尺寸

   img {
     max-width: 100%; / 防止超出父容器 /
     height: auto;    / 保持宽高比 /
   }

2. 媒体查询调整布局

   @media (max-width: 768px) {
     .gallery { 
       grid-template-columns: repeat(2, 1fr); 
     }
   }

优化与语义化

1. 添加alt属性
   提高无障碍访问性和SEO排名。

   <img src="image.jpg" alt="描述性文本">

2. 使用<figure>和<figcaption>
   增强语义化，适合带说明的图片。

   <figure>
     <img src="image.jpg" alt="风景图">
     <figcaption>落日峡谷</figcaption>
   </figure>

3. 延迟加载（Lazy Loading）
   提升页面加载速度（需浏览器支持）。

   <img src="image.jpg" loading="lazy" alt="图片">

常见问题与解答

问题1：如何让图片等比例缩放且不变形？
解答：通过CSS设置max-width: 100%和height: auto，确保图片宽度不超过容器且保持原始比例。

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

问题2：图片加载失败时如何显示默认占位图？
解答：使用onerror事件监听，替换为备用图片。

<img src="main.jpg" alt="主图" onerror="this.src='placeholder.jpg'