html图片文字

图片基础标签与属性

HTML 中插入图片使用 <img> 标签，核心属性包括：

• src：图片路径（必填）
• alt：替代文本（必填，用于描述图片内容，提升无障碍性与SEO）
• width/height：指定宽高（建议仅用之一，避免变形）
• loading：控制加载行为（lazy 实现懒加载）

图片与文字排版控制

1. 文字环绕图片
   使用 float: left; 或 float: right; 让文字环绕图片：

   

   <img src="cat.jpg" alt="猫" style="float:left; margin-right:10px;">  
   <p>这是一段围绕图片的文字，图片左侧对齐。</p> 

2. 图片居中显示

   • 块级元素居中：<img src="cat.jpg" alt="猫" style="display:block; margin:0 auto;">
   • 内联元素居中：<img src="cat.jpg" alt="猫" style="text-align:center;">

3. 响应式图片

   • 使用 max-width:100% 确保图片自适应容器：

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

   • 结合 <picture> 实现多分辨率适配：

     <picture>  
       <source srcset="cat-small.jpg" media="(max-width:600px)">  
       <img src="cat.jpg" alt="猫">  
     </picture> 

常见错误与解决方案

问题与解答

问题1：为什么必须为图片添加 alt 属性？
解答：alt 属性用于在图片无法加载时显示替代文本，同时帮助屏幕阅读器理解图片内容，提升网站无障碍性和SEO排名，若图片仅为装饰性，可设置为空（alt=""），但不建议完全省略。

问题2：如何实现图片在移动端自动缩放？
解答：通过CSS设置 max-width:100% 和 height:auto，使图片宽度不超过容器且保持比例。

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