当前位置：首页 > 行业动态 > 正文

HTML基础教程之图片标记

admin
行业动态
2025-05-06
2

HTML图片标记用` 标签，需设置src 路径、alt 替代文本，可添加width /height`控制尺寸，建议使用相对路径并优化

图片的基本语法

HTML中使用<img>标签插入图片，该标签是单标签（不需要闭合）,基本语法格式如下：

<img src="图片路径" alt="描述文本" />

核心属性：
| 属性 | 作用 | 示例 |
|–|–|–|
| src | 指定图片路径 | src="images/logo.png" |
| alt | 图片无法显示时的文字说明（必备） | alt="企业标志" | | 鼠标悬停时显示的提示文本 | title="点击访问官网" |

图片路径规则

类型	说明	示例
绝对路径	从根目录开始的完整路径	`<img src="/images/banner.jpg" />`
相对路径	相对于当前HTML文件的路径	`<img src="./photo.jpg" />`（当前目录） `<img src="../icons/arrow.png" />`（上级目录）
网络路径	直接使用URL地址	`<img src="https://example.com/image.png" />`

图片尺寸控制

通过属性设置：
```
<img src="sample.jpg" width="300" height="200" />
```
- width/height：可设置像素值或百分比（如width="80%"）
- 注意：同时设置宽高可能导致图片比例失调
通过CSS样式：
```
<img src="sample.jpg" style="max-width:100%;height:auto;" />
```
- max-width:100%：限制最大宽度为容器100%
- height:auto：自动保持宽高比

替代文本（alt）的重要性

场景	作用	示例
图片加载失败	显示替代文字	`<img src="error.jpg" alt="风景图" />`
屏幕阅读器	为视障用户提供信息	`<img src="chart.png" alt="2023年销售数据图表" />`
SEO优化	帮助搜索引擎理解内容	`<img src="product.jpg" alt="智能手机X1型号" />`

图片排列与布局

多图并排：

<p>
  <img src="img1.jpg" style="width:150px;"/>
  <img src="img2.jpg" style="width:150px;"/>
</p>

使用<p>或<div>包裹，默认横向排列

浮动布局：

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

float:left/float:right：实现图文混排
需配合<div style="clear:both;">清除浮动

响应式图片（进阶）

<picture>元素：

<picture>
  <source media="(max-width:600px)" srcset="small.jpg">
  <source media="(min-width:601px)" srcset="large.jpg">
  <img src="default.jpg" alt="示例图">
</picture>

根据设备屏幕宽度加载不同图片

srcset属性：

<img src="mid.jpg" 
     srcset="small.jpg 400w, mid.jpg 800w, large.jpg 1200w" 
     sizes="(max-width:600px) 400px, (max-width:1000px) 800px, 1200px" 
     alt="响应式图片">