HTML 图像

图像可以改善网页的设计和外观。

HTML 图像语法

HTML<img>标签用于在网页中嵌入图像。

从技术上讲，图像并未插入网页；图像链接到网页。这<img>标签为引用的图像创建一个保留空间。

这个<img>标签为空，仅包含属性，并且没有结束标签。

这个<img>标签有两个必需的属性：

• src - 指定图像的路径
• alt - 指定图像的替代文本

src 属性

所需src属性指定图像的路径 (URL)。

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

alt 属性

所需alt如果用户由于某种原因无法查看图像（由于连接速度慢、src 属性中的错误或用户使用屏幕阅读器），属性会为图像提供替代文本。

的值alt属性应该描述图像：

如果浏览器找不到图像，它将显示该图像的值alt属性：

图像尺寸 - 宽度和高度

您可以使用style属性来指定图像的宽度和高度。

或者，您可以使用width和height属性：

这个width和height属性始终定义图像的宽度和高度（以像素为单位）。

宽度和高度，还是样式？

这个width,height， 和style属性在 HTML 中都是有效的。

但是，我们建议使用style属性。它可以防止样式表更改图像的大小：

另一个文件夹中的图像

如果您的图像位于子文件夹中，则必须在子文件夹中包含文件夹名称src属性：

另一台服务器/网站上的图像

某些网站指向另一台服务器上的图像。

要指向另一台服务器上的图像，您必须在src属性：

外部图像注意事项：外部图像可能受版权保护。如果您未获得使用许可，则可能会违反版权法。此外，您无法控制外部图像；它们可能会突然被删除或更改。

动画图像

HTML 允许动画 GIF：

图像作为链接

要使用图像作为链接，请将<img>标签里面的<a>标签：

图像浮动

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

常见图像格式

以下是最常见的图像文件类型，所有浏览器（Chrome、Edge、Firefox、Safari、Opera）均支持这些类型：

章节总结

• 使用 HTML<img>定义图像的元素
• 使用 HTMLsrc属性来定义图像的 URL
• 使用 HTMLalt属性来定义图像的替代文本（如果无法显示）
• 使用 HTMLwidth和height属性或CSSwidth和height属性来定义图像的大小
• 使用CSSfloat属性让图像向左或向右浮动

HTML练习

HTML 图像标签