HTML - Images

原创

admin 4个月前 (08-07) 阅读数 20 #HTML

HTML - Images

HTML图片为网页提供视觉内容，增强用户体验并传达信息。它们可以是照片、图形、图标或插图。

HTML提供了各种用于嵌入、操作和控制图片的元素，有助于提升网站的美观性和功能性。理解图片标签、属性和响应式设计原则对于有效的网页开发至关重要。

HTML图片语法

以下是HTML图片的基本语法：

<img src="image_path" alt="Alternate text for the image" width="200px" height="150px" />

其中：

src：定义图片路径（图片URL）。
alt：定义替代文本；如果图片路径链接失效，替代文本将显示在网页上。
width和height：定义图片的高度和宽度。

插入图片

您可以使用带有src属性的<img>标签在网页上插入（嵌入）图片，src属性是必需的，用于定义图片路径。

注意：<img>标签是一个空标签，意味着它只能包含属性列表，没有闭合标签。

语法

使用以下语法通过<img>标签插入图片：

<img src="Image URL" ... attributes-list/>

示例

要尝试以下示例，让我们将HTML文件test.htm和图片文件test.png保存在同一目录中：

<!DOCTYPE html>
<html>
<head>
   <title>HTML图片示例（插入网页）</title>
</head>
<body>
   <h1>HTML图片示例（插入网页）</h1>
   <img src="/html/images/test.png" alt="测试图片" />
</body>
</html>

您可以根据需要使用PNG、JPEG或GIF图片文件，但请确保在src属性中指定正确的图片文件名。图片名称区分大小写。

alt属性是可选属性，但建议使用，因为它指定了图片无法显示时的替代文本。

设置图片位置

图片位置（路径）必须在src属性中明确定义。您可以遵循绝对路径，它以根目录（/）开头，然后是目录名（如果有），最后是带扩展名的图片名。

示例

例如，如果我们有一个名为"test.png"的图片，它存储在根目录下的"html"文件夹中的"images"文件夹中。您可以简单地使用图片路径如"/html/images/test.png"。

<!DOCTYPE html>
<html>
<head>
   <title>在网页中使用图片</title>
</head>
<body>
   <img src="/html/images/test.png" alt="测试图片" />
</body>
</html>

设置图片宽度和高度

您可以使用width和height属性根据需要设置图片的宽度和高度。您可以用像素或实际大小的百分比来指定图片的宽度和高度。

示例

以下示例演示如何设置图片的宽度和高度：

<!DOCTYPE html>
<html>
<head>
   <title>设置图片宽度和高度</title>
</head>
<body>
   <p>设置图片宽度和高度</p>
   <img src="/html/images/test.png" alt="测试图片" width="450px" height="200px" />
</body>
</html>

带边框的图片

您可以使用border属性以像素为单位指定边框及其厚度。厚度为0表示图片周围没有边框。

示例

在以下示例中，我们在图片上指定了一个边框：

<!DOCTYPE html>
<html>
<head>
   <title>设置图片边框</title>
</head>
<body>
   <p>设置图片边框</p>
   <img src="/html/images/test.png" alt="测试图片" border="3" />
</body>
</html>

图片对齐

默认情况下，图片将位于页面左侧，但您可以使用align属性将其设置为居中或右对齐。

示例

在以下示例中，我们将图片设置为右对齐：

<!DOCTYPE html>
<html>
<head>
   <title>设置图片对齐</title>
</head>
<body>
   <p>设置图片对齐</p>
   <img src="/html/images/test.png" alt="测试图片" border="3" align="right" />
</body>
</html>

动画图片

您还可以在网页上使用动画图片（具有.gif扩展名）。没有特定属性来显示动画图片；您只需在src属性中设置动画图片（.gif）的路径即可。

示例

以下示例演示如何插入动画图片：

<!DOCTYPE html>
<html>
<head>
   <title>在HTML中使用动画图片</title>
</head>
<body>
   <h1>在HTML中使用动画图片</h1>
   <img src="/html/images/animated_image.gif" alt="动画图片" />
</body>
</html>

响应式图片

您还可以使图片具有响应性，图片将根据设备屏幕尺寸和分辨率自动调整大小。以下是使图片具有响应性的方法：

1. 使用CSS

使用CSS，您可以将图片的宽度设置为100%，这样图片就可以按比例缩放以适应其父容器。

<img src="/html/images/test.png" alt="响应式图片" style="width: 100%; height: auto;" />

2. 使用<picture>标签

您还可以使用<picture>标签在不同尺寸或分辨率下显示不同的图片，当您想根据设备显示不同图片时，这非常有用。

<picture>
  <source media="(min-width: 800px)" srcset="image_path_1">
  <source media="(max-width: 799px)" srcset="image_path_2">
  <img src="default_image_path.jpg" alt="响应式图片">
</picture>

示例

以下示例演示如何定义要在网页上显示的响应式图片：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>响应式图片示例</title>
    <style>
        img {
            width: 100%;
            height: auto;
        }
    </style>
</head>
<body>
    <h1>响应式图片示例</h1>
    <img src="/html/images/test.png" alt="响应式示例图片" />
</body>
</html>

支持的图片格式

下表显示了HTML <img>标签支持的图片格式：

图片格式	图片格式名称	透明度支持	动画支持	文件扩展名
JPEG/JPG	联合图像专家组	不支持	不支持	.jpg, .jpeg
PNG	便携式网络图形	支持	不支持	.png
GIF	图形交换格式	支持	支持	.gif
SVG	可缩放矢量图形	支持	不支持	.svg
WebP	网络图片格式	支持	支持	.webp
BMP	位图图像文件	不支持	不支持	.bmp
ICO	图标文件	支持	不支持	.ico