HTML - header 标签

HTML <header>标签用于表示HTML文档或部分的介绍性内容。它指定文档的标题。

<header>标签可以定义全局站点标题，一些标题元素还包括徽标、公司名称、搜索输入字段、作者姓名、全局导航和其他元素。

<header> 元素最初存在于 HTML 的开头，用于标题，并且是第一个在网页上看到的元素。

此标签不能放置在 <footer>、<address> 或其他 <header> 元素中。

语法


<header> ... </header>

属性

<header>标签支持 HTML 的全局属性和事件属性。

<header>标签示例

下面的示例将说明 <header>标签的用法。在哪里、何时以及如何使用 <header>标签来创建任何网站的标题元素。

创建 <header>标签元素

以下程序显示了 HTML <header>标签的用法。


<!DOCTYPE html>
<html lang="en">

<head>
	 <title>HTML header Tag</title>
</head>

<body>
	 <!--create header tag-->
	 <p>'header' element(tag) example</p>
	 <header>
			<h1>HTML</h1>
			<p>
				 Full form of above content: Hyper Text Markup Language.
			</p>
	 </header>
</body>

</html>

将 <header>标签与文章元素一起使用

在此示例中，我们将创建一个 article 元素，在该元素中，我们将创建一个 header 元素来定义 article 元素的标题。


<!DOCTYPE html>
<html lang="en">

<head>
	 <title>HTML header Tag</title>
</head>

<body>
	 <!-- Creating header Element -->
	 <h2>HTML 'header' Element</h2>
	 <article>
			<header>HTML Tags</header>
			<p>
					HTML tags are similar to keywords, which specify 
					how a web browser will format and display content.
					A web browser can differentiate between simple content 
					and HTML content with the use of tags. 
			</p>
	 </article>
	 <article>
			<header>HTML Attributes</header>
			<p>
					An attribute is used to define the characteristics
					of an HTML element and is placed inside the element's 
					opening tag. All attributes are made up of two parts:
					a name and a value
			</p>
	 </article>
</body>

</html>

<header>标签的样式

考虑以下示例，我们将在其中使用 <header>标签并应用 CSS 属性。


<!DOCTYPE html>
<html lang="en">

<head>
	 <title>HTML header tag</title>
	 <style>
			header {
				 color: green;
				 font-style: italic;
			}
	 </style>
</head>

<body>
	 <!--create header tag-->
	 <p>'header' element(tag) example</p>
	 <header>
			<h1>Cricket</h1>
			<p>
				 I love playing and watching cricket matches.
				 My favorite player is Virat Kohli.
			</p>
	 </header>
</body>

</html>

链接标题元素

在此示例中，我们将使用带有锚元素的 <header> 标签


<!DOCTYPE html>
<html lang="en">

<head>
	 <title>HTML header Tag</title>
	 <style>
			header {
				 color: rgb(4, 78, 138);
				 font-style: italic;
			}

			.demo {
				 background: left / cover url("91442692.webp");
				 height: 120px;
				 display: flex;
				 align-items: center;
				 justify-content: center;
				 color: white;
				 font-size: 20px;
				 text-decoration: none;
			}
	 </style>
</head>

<body>
	 <!--create header tag-->
	 <p>'header' element(tag) example</p>
	 <header>
			<a class="demo" href="#">Gaming laptop</a>
	 </header>
	 <article>
			<header>
				 <h2>HTML</h2>
				 <p>Hyper Text Markup Language</p>
			</header>
			<p>
				 HTML is a standard markup language for documents 
				 designed to displayed in a web browser.
			</p>
	 </article>
</body>

</html>

支持的浏览器

浏览器
是否支持	5.0	9.0	4.0	5.0	11.1

打印本页