如何在 HTML5 中包含文件或節的頭部?


Header 標籤用於表示一個容器,其中包含一組導航連結或介紹性內容。它包含一個或多個標題元素、圖示和作者資訊。

在 HTML 中,我們可以放置多個 <header> 元素,但 <header> 元素不能放置在 <footer>、另一個 <header> 或 <address> 內。<header> 標籤包含開始標籤、結束標籤,並在兩者之間放置內容。

語法

以下是 <header> 標籤在 HTML 中的用法 -

<header> …………</header>

示例

以下是 <header> 標籤在 HTML 中的示例 -

<!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://tutorialspoint.tw/questions/category/c"> C Programming</a> || <a href="https://tutorialspoint.tw/questions/category/operating-system"> Operating System</a> || <a href="https://tutorialspoint.tw/questions/category/rdbms"> RDBMS</a> || <a href="https://tutorialspoint.tw/questions/category/computer-network"> Networking</a>
   </header>
</body>
</html>

在 HTML 文件中包含一個節

Section 是 HTML 中使用的一個標籤,它定義了文件的節,例如標題、頁尾、章節等。

  • Section 標籤將文件內容分成兩部分:節和子節。

  • 當需要兩個標題或頁尾或章節或文件的其他部分時,它非常有用。

  • Section 標籤將相關內容分組到一個通用塊中。

  • 它是一個語義元素,可以向瀏覽器和開發人員描述含義。

  • Section 具有開始和結束標籤,<section> </section>

語法

以下是 section 標籤在 HTML 中的用法 -

<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>

更新於: 2023年10月10日

446 次瀏覽

開啟您的 職業生涯

透過完成課程獲得認證

開始學習
廣告

© . All rights reserved.