HTML图像

使用图像可以改善网页的设计和外观。另外文本，图片，视频，是承载信息的主要载体。用好图片能让你的网站让人眼前一亮。

示例

<img src="/images/7/78/Image.jpg" alt="落日">尝试一下一键复制

图像img语法

<img>标签用于在网页中嵌入图像。只包含属性，没有结束标签。

• src - 指定图像的路径（URL）
• alt - 指定图像的替代文本
• width - 设置宽度
• height - 设置高度

语法

<img src="url" alt="alternatetext">一键复制

注意：当网页加载时，浏览器会从网页服务器获取图像并将其插入到页面中。因此，请确保图像实际上与网页相关的位置保持不变，否则您的访问者将看到一个损坏的链接图标。alt如果浏览器找不到图像，则会显示断开的链接图标和文本。

示例

推荐使用style方式设置宽度和高度

<img src="/images/7/78/Image3.jpg" alt="日出">
<img src="/images/7/78/Image.jpg" width="100px" alt="落日">
<img src="/images/7/78/Image.jpg" style="width:100px" alt="落日">
<img src="/images/7/78/Image.jpg" style="height:100px" alt="落日">尝试一下一键复制

GIF动画图像

HTML允许GIF格式图片展示，你可以很方便让动图在你的网站内展示，增加能网站的视觉效果，吸引用户眼球。 <img src="/images/e/e2/Gif.gif" alt="气泡" style="width:48px;height:48px;">

示例

<img src="/images/e/e2/Gif.gif" alt="气泡" style="width:48px;height:48px;">尝试一下一键复制

控制图像在文章中的位置

使用 CSS float属性让图像浮动到文本的右侧或左侧：

示例

<p><img src="/images/e/e2/Gif.gif" alt="气泡" style="float:right;width:42px;height:42px;">
我要提出一个他无法拒绝的条件。 "I'm going to make him an offer he can't refuse."《教父》
</p>

<p><img src="/images/e/e2/Gif.gif" alt="气泡" style="我要提出一个他无法拒绝的条件。 "I'm going to make him an offer he can't refuse."《教父》
</p>尝试一下一键复制

图片链接

要将图像用作链接，请将<img>标签放在<a>标签内即可

示例

<a href="/">
<img src="/favicon.ico"></a>尝试一下一键复制