HTML 页眉图片

在本文中，我们将了解 HTML 头部图像。

HTML 头部

头部是网页的顶部部分，其中包含网站徽标、导航栏或介绍性内容等信息。

我们可以使用 `<header>` 元素在 HTML 中定义头部部分。

语法

`<strong><header></strong>` 是开始标签，`<strong></header>` 是结束标签。内容写在开始标签和结束标签之间。

头部的用途

• 可用于显示网站的徽标或横幅。
• 可用于显示与品牌相关的标语。
• 可用于放置搜索栏。
• 可用于放置导航栏，以链接到网站的各个部分。
• 可用于介绍网页的主要内容。
• 可用于显示联系信息。
• 可用于显示有关即将发生事件的信息。

头部图像

放在网页顶部 `<header>` 部分中的图像称为 **头部图像**。

我们可以使用 `<img>` 元素在头部部分添加图像。

<img> 元素

可以使用 `<img>` 元素将图像添加到头部。

语法

`<strong><img></strong>` 是自闭合标签。`<strong>"src"</strong>` 是用于指定我们要添加的图像 URL 的属性。`<strong>"alt"</strong>` 是用于指定图像名称的属性。

我们可以使用 `background-image` 属性在头部部分添加背景图像。

background-image 属性

可以使用 `background-image` 属性将背景图像添加到头部。

语法

**背景图像** 是 CSS 属性，它接受 **URL** 值，即图像的位置。

HTML 头部图像的插图

我们将通过演示来理解 HTML 头部图像。

插图 1

在此演示中，我们将在头部部分添加图像。

代码

输出

我们可以在下面的输出中看到头部部分中的图像。

插图 2

在此插图中，我们将创建一个导航栏放在头部中，并将图像添加到头部部分以装饰导航栏。

代码

输出

这是输出，我们可以在其中看到头部中导航栏的顶部和底部都有图像。

插图 3

在此插图中，我们将联系信息添加到头部，并将背景图像放置在头部部分。

代码

输出

我们可以看到头部中的联系信息以及背景图像。

插图 4

我们将背景图像放置在包含表单的头部元素中。

代码

输出

在这里，在输出中，我们可以清楚地看到一个带有背景图像的头部表单。

插图 5

在此插图中，我们将最重要的即将发生的事件放在 `<header>` 元素中，并将图像添加到头部部分。

代码

输出

在这里，在下面提供的结果中，我们可以看到重要的事件以及头部中的图像。

插图 6

在此插图中，我们将头部部分的标语放置进去，并将图像添加到头部。

代码

输出

在这里，在结果中，我们可以看到头部部分中的标语以及图像。

插图 7

在此插图中，我们将使用 `<img>` 标签将徽标添加到头部元素中。

代码

输出

在这里，在输出中，我们可以看到头部中的网站徽标。

插图 8

我们将图像显示在包含搜索栏的头部元素中。

代码

输出

在下面提供的结果中，我们可以看到头部部分中的带有图像的搜索栏。

结论

在本文中，我们已经了解了 **HTML 头部图像**。我们可以使用 **<img> 标签** 将图像插入头部，并使用 **background-image 属性** 将背景图像添加到头部。