上一篇
html图片代码
使用`
标签，设置src （图片路径）、alt （替代文本）及可选width /height 属性，示例：`，需替换
HTML图片基础语法
在HTML中插入图片使用<img>标签，必须包含src属性指定图片路径，推荐添加alt属性描述图片内容。
| 属性 | 作用 | 示例值 |
|---|---|---|
src | 图片路径 | images/logo.png |
alt | 图片替代文本（SEO必备） | 企业标志 |
width | 固定宽度（像素/百分比） | 300 |
height | 固定高度（像素/百分比） | 200 |
<img src="images/banner.jpg" alt="网站横幅" width="100%">
图片路径规则
| 类型 | 示例路径 | 适用场景 |
|---|---|---|
| 相对路径 | ./photo.jpg | 同目录图片 |
| 绝对路径 | /assets/img/bg.png | 根目录定位 |
| 网络路径 | https://example.com/img.jpg | 外部网络图片 |
注意：路径分隔符使用，大小写敏感，建议将图片存放在专用
images文件夹
图片尺寸控制
| 方法 | 特点 | 代码示例 |
|---|---|---|
| 固定数值 | 精确控制但缺乏响应性 | width="800" |
| 百分比 | 自适应父容器大小 | width="100%" |
| CSS控制 | 更灵活的响应式布局（推荐） | .responsive-img { max-width: 100%; } |
<!-保持原始比例缩放 --> <img src="product.jpg" alt="商品主图" style="max-width:100%; height:auto;">
常见问题与解决方案
| 问题现象 | 解决方案 |
|---|---|
| 图片不显示 | 检查路径是否正确 确认文件后缀名正确 查看浏览器控制台报错信息 |
| 图片变形 | 使用height自动计算或CSS设置object-fit:cover;保持比例 |
| 移动端显示过大 | 使用百分比宽度+max-width:100%样式实现响应式布局 |
相关问题与解答
Q1：为什么推荐所有图片都添加alt属性？
A1：
- SEO优化：搜索引擎通过
alt文本理解图片内容 - 无障碍访问：屏幕阅读器为视障用户朗读替代文本
- 容错处理：图片加载失败时显示替代文本
- 语义化：帮助搜索引擎判断页面主题相关性
Q2：本地图片和网络图片有什么区别使用场景？
A2：
| 对比维度 | 本地图片 | 网络图片 |
|—————-|——————————|——————————|
| 加载速度 | 更快（已缓存） | 首次加载慢 |
| 稳定性 | 依赖本地文件存储 | 依赖外部链接有效性 |
| 适用场景 | 重要内容/高频访问图片 | 临时素材/外部资源引用 |
| 带宽消耗 | 无持续流量成本 | 每次
