在HTML中怎么引入图片（两种方法）

HTML（超文本标记语言）是Web页面的基础语言之一，无论是建立静态页面还是动态页面，HTML都是不可或缺的部分。在创建网页时，图片是非常重要和常用的元素之一，因此我们需要知道如何在HTML中引入图片。

HTML可以引入多种类型的图片，如.gif、.jpeg、.png等格式的图片。在引入图片之前，我们需要为HTML文档创建一个图片文件夹，用于存储所有的图片文件。通常，图片文件夹要放在HTML文件的同一目录下，以便HTML文件可以轻松地访问它们。

在HTML中，我们可以使用以下两种方法将图片引用到Web页面中。

1. 在<img>标签中使用图片

最常用的方法是在HTML文档中使用img（图像）标记，它非常简单易用。以下是该标签的基本语法：

<img src="image filename">

其中，src属性用于告诉浏览器要从哪里加载图片，image filename是图片文件的名称（注意，这里应该给出相对路径，而不是绝对路径）。

例如，如果我们的图片文件夹和HTML文件位于同一目录下，而且我们要将名为“example.gif”的图片引入到Web页面中，那么代码将如下所示：

<img src="example.gif">

这将在页面中显示出名为“example.gif”的图片。

如果我们想为图片添加更多的属性，例如让它链接到其他网页、添加标题、更改宽度和高度等等，我们可以使用以下标签：

<img src="image filename" alt="Image title" title="Image tooltip" height="number" width="number" border="number" align="left/right/center">

其中，alt属性用于添加图片名称，它将在图片无法显示时显示；title属性将添加提示文字；height和width属性用于更改图片的大小；border属性用于添加边框宽度；align属性用于控制图片与其他文本的对齐方式。

举个例子，如果我们想要添加宽度为200像素、高度为100像素，并且将它链接到另一个页面的图片，代码将如下所示：

<a href="https://www.example.com/"><img src="example.gif" alt="Example Image" title="Click this image to go to example.com" height="100" width="200" border="1" align="center"></a>

2. 使用CSS创建背景中的图片

我们还可以使用CSS（层叠样式表）在Web页面的背景中添加图片，这是另一种常见的方法。与<img>标签不同的是，这种方法将图片作为整个Web页面的背景，而不是将其作为独立的元素。

以下是使用CSS在背景中添加图片的方法：

body {    background-image: url('image filename');}

其中，background-image属性用于告诉浏览器需要在背景中显示的图片，它还可以有其他选项，例如设置背景颜色和背景图像的平铺方式等。

例如，如果我们希望在Web页面的背景中显示名为“example.gif”的图片，并且使其水平和垂直重复，代码将如下所示：

body {    background-image: url('example.gif');    background-repeat: repeat;}

这将使整个页面的背景都被填充为“example.gif”图片。

在使用这种方法时，我们需要特别注意图片的大小，以确保它们在不同类型的设备上都显示正确。

总结

无论是在<img>标签中使用图片还是使用CSS在背景中添加图片，HTML都提供了各种方法来引入图片。在使用这些方法时，我们需要注意图片的大小、路径和格式，以确保它们能够正确地显示在Web页面中。通过使用HTML中的图片，我们可以轻松地为Web页面添加个性化元素，使页面更加丰富和吸引人。

以上就是在HTML中怎么引入图片（两种方法）的详细内容，更多请关注Gxl网其它相关文章！