html镶嵌图片

图片基础语法

在HTML中插入图片的核心标签是<img>，这是一个自闭合标签，基本语法如下：

<img src="图片路径" alt="替代文本"> 

• src：指定图片文件的路径（相对路径或绝对路径）。
• alt：替代文本，用于图片无法加载时显示，同时提升SEO和无障碍访问体验。

常用属性说明

高级应用场景

1. 图片链接
   将图片作为链接载体，使用<a>标签包裹：

   <a href="https://example.com">  
     <img src="thumbnail.jpg" alt="缩略图">  
   </a> 

2. 响应式图片

   • 使用max-width:100%和height:auto实现自适应：

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

   • 结合<picture>和srcset适配不同设备：

     <picture>  
       <source media="(min-width: 768px)" srcset="image-large.jpg">  
       <source media="(max-width: 767px)" srcset="image-small.jpg">  
       <img src="image-small.jpg" alt="响应式图片">  
     </picture> 

3. 占位图与延迟加载

   • 使用loading="lazy"优化性能：

     <img src="placeholder.jpg" data-src="real-image.jpg" loading="lazy"  
     onload="this.src=this.getAttribute('data-src')" alt="内容图片"> 

相关问题与解答

问题1：如何让图片自适应容器宽度且保持比例？
解答：通过CSS设置max-width:100%和height:auto，

<img src="photo.jpg" alt="风景照" style="max-width:100%; height:auto;"> 

问题2：图片加载失败时如何显示默认占位图？
解答：使用onerror事件替换src属性：

<img src="main.jpg" alt="主图" onerror="this.src='fallback.png'">