HTML - 图像

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

插入图像

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

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

< img> tag是一个空标记,这意味着它只能包含属性列表而且没有结束标记.

示例

试试以下例如,让我们将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属性是必填属性,用于在无法显示图像时为图像指定替代文本。

Set Image Location

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

Example

假设我们的图片位置是" 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>

Set Image Width/Height

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

Example

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

Set Image Border

默认情况下,图像周围有边框,您可以使用border属性以像素为单位指定边框粗细。 厚度0表示图片周围没有边框。

Example

<!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属性将其设置在中间或右侧。

Example

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

免费网页图形

免费网站图形包括您可以查看的模式免费网页图形