Html 简明教程

HTML - Images

HTML 图像为网页提供可视化内容，增强用户体验并传达信息。它们可以是照片、图形、图标或插图。要在 HTML 文档中插入图像，我们可以使用 * <img>* 标记。

Reason to use Images

HTML 为嵌入、操作和控制图像提供了各种元素，有助于提升网站的美观和功能性。了解图像标记、属性和响应式设计原则对于有效的 Web 开发至关重要。我们通常在产品页面上的英雄部分使用图像，它需要 src 和 alt 属性。

  1. Increase Readbility: 使用合适的图像/图形可以提高我们网站的可读性，比如我们提供哪些产品或服务。

  2. SEO Impact: 如果我们可以使用不会影响加载时间的合适属性的图像，那么可以有益于提高网站的搜索引擎优化。

我们将在本文中了解使用图像的许多其他优势。

尝试单击图标 运行按钮来运行以下 HTML 代码以查看输出。

Examples of HTML images

在下面的示例中，我们将看到如何设置图片的宽度、高度、标题，如何使图片在网页上更吸引人！以及其他许多有关图像的内容。

Inserting an Image in HTML

你可以使用 <img> 标签在你的网页中插入任何图像。<img> 标签是一个空标签，这意味着它只能包含属性列表，并且没有结束标签。

<DOCTYPE html>
<html>
<head>
   <title>Using Image in Webpage</title>
</head>
<body>
   <p>Simple Image Insert</p>
   <img src="/html/images/test.png" alt="Test Image" />
</body>
</html>

Importing images from another folder

通常情况下，我们会将所有图像保存在一个单独的目录中。所以让我们将 HTML 文件 test.htm 保存在我们的主目录中，并在主目录中创建一个子目录 images，我们将在其中将我们的图像保存为 test.png。假设我们的图像位置是“/html/images/test.png”，请尝试以下示例。

<!DOCTYPE html>
<html>
<head>
   <title>Using Image in Webpage</title>
</head>
<body>
   <img src="/html/images/test.png" alt="Test Image" />
</body>
</html>

Set Image Width and Height

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

<!DOCTYPE html>
<html>
<head>
   <title>Set Image Width and Height</title>
</head>
<body>
   <p>Setting image width and height</p>
   <img src="/html/images/test.png" alt="Test Image" width="450" height="200" />
</body>
</html>

Set Image Border

默认情况下，图像周围会有一个边框，你可以使用 * border* 属性以像素为单位指定边框厚度。厚度为 0 意味着图片周围没有边框。

<!DOCTYPE html>
<html>
<head>
   <title>Set Image Border</title>
</head>
<body>
   <p>Setting image Border</p>
   <img src="/html/images/test.png" alt="Test Image" border="3" />
</body>
</html>

Set Image Alignment

默认图片会与页面左端对齐，但你可以使用 * align* 属性将图片置于中央或右侧。

<!DOCTYPE html>
<html>
<head>
   <title>Set Image Alignment</title>
</head>
<body>
   <p>Setting image Alignment</p>
   <img src="/html/images/test.png" alt="Test Image" border="3" align="right" />
</body>
</html>

Free Web Graphics

如欲获得包括图案的免费网络图形，你可以在 Free Web Graphics 找到。