HTML - <header> 标签

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

此元素可以定义全局站点头部，一些标题元素还包括徽标、公司名称、搜索输入字段、作者姓名、全局导航和其他元素。<header> 元素最初存在于 HTML 标题的开头，是网页上首先看到的元素。

此标签不能放置在 <footer>、<address> 或另一个 <header> 元素内。

语法

<header>
  ...
</header>

属性

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

HTML header 标签示例

下面的示例将说明 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 元素一起使用

在这个例子中，我们将在 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 元素

在这个例子中，我们将 <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>

支持的浏览器

标签
header	支持 5.0	支持 9.0	支持 4.0	支持 5.0	支持 11.1

html_tags_reference.htm

打印页面