HTML - 图像

图像对于美化以及在网页上以简单的方式描述许多复杂的概念非常重要。本教程将引导您完成在网页中使用图像的简单步骤。

插入图片

您可以使用<img>标签在网页中插入任何图像。以下是使用此标记的简单语法。

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

<img> 标签是一个空标签，这意味着它只能包含属性列表，并且没有结束标签。

例子

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

现场演示

<!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>

这将产生以下结果 -

您可以根据自己的喜好使用 PNG、JPEG 或 GIF 图像文件，但请确保在src属性中指定正确的图像文件名。图像名称始终区分大小写。

alt属性是强制属性，如果图像无法显示，它指定图像的替代文本。

设置图像位置

通常我们将所有图像保存在单独的目录中。因此，让我们将 HTML 文件 test.htm 保存在我们的主目录中，并在主目录中创建一个子目录images ，我们将在其中保存图像 test.png。

例子

假设我们的图像位置是“image/test.png”，请尝试以下示例 -

现场演示

<!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>

这将产生以下结果 -

设置图像宽度/高度

您可以使用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 = "150" height = "100"/>
   </body>
	
</html>

这将产生以下结果 -

设置图像边框

默认情况下，图像周围会有边框，您可以使用 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>

这将产生以下结果 -

设置图像对齐方式

默认情况下，图像将在页面左侧对齐，但您可以使用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>

这将产生以下结果 -

免费网页图形

对于包括图案的免费网页图形，您可以查看免费网页图形