html5图片与文字

HTML5图片与文字处理详解

图片标签基础语法

HTML5使用<img>标签插入图片,基本语法如下：

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

核心属性：
| 属性 | 作用 | 示例值 |
|————–|——————————|—————————|
| src | 指定图片路径 | image.jpg |
| alt | 图片无法显示时的替代文本 | 一只猫在睡觉 |
| width/height| 设置宽度/高度（非推荐） | 300 | | 鼠标悬停时显示的提示文本 | 点击查看大图 |

响应式图片处理

HTML5新增<picture>标签实现响应式适配：

<picture>
  <source media="(min-width: 768px)" srcset="large.jpg">
  <source media="(min-width: 480px)" srcset="medium.jpg">
  <img src="small.jpg" alt="自适应图片">
</picture>

关键特性：

• srcset属性：定义多分辨率图片资源
• sizes属性：控制不同视口下的图片尺寸
• media属性：设置媒体查询条件

图片懒加载优化

HTML5新增loading属性实现懒加载：

<img src="photo.jpg" alt="风景图" loading="lazy">

取值说明：
| 值 | 作用 |
|———-|——————————|
| auto | 浏览器自动判断是否懒加载 |
| lazy | 启用懒加载 |
| eager | 立即加载（默认行为） |

图文混排技术

1. 浮动布局：

   <img src="left.jpg" alt="左侧图" style="float:left;margin-right:10px;">
   <p>这段文字会环绕在图片右侧...</p>

2. Flex布局：

   <div style="display:flex;align-items:center;">
   <img src="top.jpg" alt="顶部图">
   <div>垂直居中的文字内容</div>
   </div>

3. Grid布局：

   <div style="display:grid;grid-template-columns:1fr 2fr;">
   <img src="grid.jpg" alt="网格图">
   <p>两列网格布局的说明文字</p>
   </div>

语义化图文组合

使用<figure>和<figcaption>增强语义：

<figure>
  <img src="diagram.png" alt="流程示意图">
  <figcaption>系统架构流程图</figcaption>
</figure>

相关问题与解答

Q1：如何选择WebP和JPEG格式？
A1：WebP格式相比JPEG通常可减少25%-40%的文件大小,但需注意：

• 兼容性：老旧浏览器不支持（需提供fallback方案）
• 透明度支持：WebP Lossless支持Alpha通道
• 推荐场景：现代网站首页图、产品展示图等需要高性能的场景

Q2：图片与文字对齐有哪些注意事项？
A2：关键注意点：

1. 避免使用float覆盖问题，建议配合clear属性
2. 使用Flex/Grid布局时设置align-items属性
3. 设置图片的vertical-align:middle防止基线对齐问题
4. 响应式设计时使用相对单位（如em、rem）