上一篇
html配图片
这是一段带图片的HTML示例共64字含标签
HTML 插入图片基础
基本语法
使用 <img> 标签插入图片，核心属性为 src（图片路径）和 alt（替代文本）。
| 属性 | 说明 | 示例值 |
|---|---|---|
src | 图片路径 | images/logo.png |
alt | 图片无法显示时的替代文本 | 网站Logo |
width | 宽度（像素或百分比） | 300 或 50% |
height | 高度（像素或百分比） | 200 或 auto |
图片路径规则
- 绝对路径：从根目录开始，如
/images/banner.jpg（不推荐，路径固定）。 - 相对路径：基于当前文件位置，如
./pic.jpg（当前目录）或../img/bg.png（上级目录）。
| 路径类型 | 示例 | 适用场景 |
|---|---|---|
| 绝对路径 | /assets/img/logo.png | 全局通用，但移植性差 |
| 相对路径 | images/photo.jpg | 本地项目，路径灵活 |
图片样式控制
通过 CSS 或 HTML 属性调整图片外观：
- 边框：
border="5"（已废弃，建议用 CSS）。 - 对齐方式：
align="center"（废弃，改用 CSS 的text-align）。 - 响应式：设置
max-width: 100%，使图片自适应容器宽度。
常见问题与解决
图片不显示
- 原因：路径错误、文件名大小写不匹配、文件不存在。
- 解决：检查
src路径，确保文件存在且路径拼写正确。
图片尺寸失真
- 原因：强制设置宽高导致比例变形。
- 解决：仅设置其中一个属性（如
width），另一个用auto保持比例。
相关问题与解答
问题1：如何替换网页中的图片？
解答：修改 <img> 标签的 src 属性为新图片路径，
<img src="new-image.jpg" alt="新图片">
问题2：图片加载失败时如何处理？
解答：使用 onerror 事件替换备用图片：
<img src="main.jpg" alt="主图" onerror="this.src='fallback.jpg'">
