Images

优质

小牛编辑

121浏览

2023-12-01

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

插入图片

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

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

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

例子 (Example)

要尝试以下示例，让我们将HTML文件test.htm和image file 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。

例子 (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>

设置图像宽度/高度

您可以使用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>

设置图像边框

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

设置图像对齐

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