如何在 HTML5 中为文档或章节添加页眉?

htmlfront end technology更新于 2026/1/16 0:44:17

页眉标签用于表示包含一组导航链接或介绍性内容的容器。它由一个或多个标题元素、图标和作者信息组成。

在 HTML 中，我们可以放置多个 <header> 元素，但 <header> 元素不能放置在 <footer>、其他 <header> 或 <address> 中。<header> 标签由起始标签、结束标签和中间的内容组成。

语法

以下是 HTML 中 <header> 标签的用法 −

<header> …………</header>

示例

以下是 HTML 中 <header> 标签的示例 −

<!DOCTYPE html>
<html>
<body>
   <h1>Header Tag</h1>
   <hr>
   <article>
      <header>
         <h3>TutorialsPoint Demonstrate the Header Tag</h3>
         <p>Article written by BhanuPriya</p>
         <p> Header tag is used to represent a container consists of set of navigational links or introductory content . It consists of one or more heading elements, icons and authorship information. </p>
      </header>
   </article>
</body>
</html>

我们可以使用默认值将 CSS 应用于 <header> 元素，以下是大多数浏览器显示 <header> 元素的语法。

header
{
display: block;
}

示例

在下面的示例中，我们使用 HTML 中的 <header> 标签来表示导航链接。

<!DOCTYPE html>
<html>
<body>
   <h1>HTML Header Tags represent Links</h1>
   <header>
      <a href="https://www.cainiaomax.com/questions/category/c"> C Programming</a> || <a href="https://www.cainiaomax.com/questions/category/operating-system"> Operating System</a> || <a href="https://www.cainiaomax.com/questions/category/rdbms"> RDBMS</a> || <a href="https://www.cainiaomax.com/questions/category/computer-network"> Networking</a>
   </header>
</body>
</html>

在 HTML 文档中包含一个部分

Section 是 HTML 中使用的标签之一，用于定义文档的部分，例如页眉、页脚、章节等。

Section 标签将文档内容分为两部分:部分和子部分。
当需要两个页眉或页脚、章节或其他部分时，Section 标签非常有用。
Section 标签将相关内容分组到一个通用块中。
它是一个语义元素，向浏览器和开发人员描述含义。
部分有开始和结束标签，<section> </section>

语法

以下是 HTML 中 section 标签的用法 -

<section> Content </section>

示例

让我们看一个 section 标签的示例 −

<!DOCTYPE html>
<html>
<body>
   <h1>Tutorials Point</h1>
   <!-- html section tag is used here -->
   <section>
      <h2>----- Section 1-----</h2>
      <p>HTML Tutorial</p>
   </section>
   <section>
      <h2>----- Section 2-----</h2>
      <p>JAVA Tutorial</p>
   </section>
   <section>
      <h2>-----Section 3-----</h2>
      <p>Oracle Tutorial</p>
   </section>
</body>
</html>