上一篇
html的图片格式
HTML图片常用格式：JPEG（照片）、PNG（透明）、GIF（动画）、SVG（矢量）、WebP（高
HTML图片基础语法
HTML中使用<img>标签插入图片，必须包含src属性指定图片路径，推荐添加alt属性描述图片内容。
| 属性 | 作用 |
|---|---|
src | 图片文件路径（必填） |
alt | 替代文本（必填，用于无障碍访问和SEO） |
width | 固定宽度（可选，建议用CSS控制） |
height | 固定高度（可选，建议用CSS控制） |
loading | 懒加载设置（lazy表示延迟加载，eager立即加载，默认eager） |
示例代码：
<img src="image.jpg" alt="美丽的风景" title="山间瀑布" loading="lazy" />
常见图片格式对比
| 格式 | 特点 | 适用场景 |
|---|---|---|
| JPEG | 有损压缩，支持透明度（CMYK模式） | 照片、渐变色彩丰富的图片 |
| PNG | 无损压缩，支持透明背景（RGBA模式） | 图标、文字类图片、需要透明区域 |
| GIF | 支持动画，256色限制 | 简单动画、低色块图像 |
| SVG | 矢量图形，可缩放，代码形式存在 | 图标、简单图形（如流程图） |
| WebP | 新一代压缩格式，支持透明度和动画，兼容性需注意 | 现代浏览器中的高性能图片 |
图片尺寸控制方法
| 方式 | 说明 |
|---|---|
| CSS样式 | 推荐使用width: 100%或max-width: 100%实现响应式布局 |
width/height属性 | 直接设置固定像素值（不推荐，可能影响移动端适配） |
picture元素 | 结合<source>标签实现多分辨率/格式适配 |
srcset属性 | 定义不同尺寸图片供浏览器选择（配合<img>使用） |
响应式图片示例：
<picture> <source srcset="image-800.jpg" media="(min-width: 800px)" /> <source srcset="image-400.jpg" media="(min-width: 400px)" /> <img src="image-200.jpg" alt="响应式图片" /> </picture>
图片排版技巧
| 需求 | 实现方式 |
|---|---|
| 文字环绕 | 使用float: left;或display: inline-block; |
| 居中对齐 | 设置display: block; margin: 0 auto;或使用Flex/Grid布局 |
| 等比例裁剪 | 通过CSS设置object-fit: cover;强制保持宽高比 |
| 禁用拖拽 | 添加draggable="false"属性防止图片被意外拖动 |
相关问题与解答
Q1：如何替换网页中的图片路径？
A1：直接修改<img>标签的src属性值，或通过JavaScript动态替换。
document.querySelector('img').src = 'new-image.png';Q2：如何让图片自动适应容器大小？
A2：使用CSS设置max-width: 100%和height: auto;，
img {
max-width: 100%;
height
