如何在 HTML5 文件中定義一個章節?


在 HTML5 中使用 `

` 元素定義文件中的章節有助於將網頁內容組織成有意義且獨立的區塊。這樣可以更容易地理解頁面內容的主題和組織結構,幫助使用者更有效地瀏覽頁面,快速找到他們需要的資訊。本文將討論如何在 HTML5 文件中定義章節。

方法

在 HTML5 中,我們有兩種不同的方法來定義文件中的章節,包括以下兩種:

  • 使用“`

    ` 元素”

  • 使用“`

    ` 元素”

讓我們詳細瞭解每一步。

方法 1:使用“`
` 方法”

第一種方法是在 HTML5 中使用“`

`”來定義文件中的章節。在 HTML5 中,`
` 用於將相似的內容組合在一起。它有助於組織內容,並使搜尋引擎和使用者更容易理解和瀏覽頁面。

示例

以下是如何使用“`

`”在 HTML5 文件中定義章節的示例。

<!DOCTYPE html>
<html>
<head>
   <title>Defining a Section in HTML5</title>
   <style>
      /* Style for the section element */
      section {
         background-color: #f2f2f2;
         padding: 10px;
         margin: 10px 0;
         border: 2px solid #ccc; 
         border-radius: 4px;
         box-shadow: 2px 2px 5px #ccc;
      }
      h1 {
         color: green;
      }
      /* Style for the h2 element inside the section */
      section h2 {
         color: blue;
         font-size: 24px;
         margin-bottom: 10px;
      }
      /* Style for the p element inside the section */
      section p {
         color: black;
         font-size: 15px;
         line-height: 1.5;
      }
   </style>
</head>
<body>
   <h1>Tutorials Point</h1>
   <section>
      <h2>HTML</h2>
      <p>HTML stands for Hyper Text Markup Language and it is the language that is used to define the structure of a web page. HTML is used along with CSS and Javascript to design web pages. HTML is the basic building block of a website. It has different attributes and elements with different properties. Each element has an opening and a closing tag. </p>
   </section>
   <section>
      <h2>CSS</h2>
      <p>CSS (Cascading Style Sheets) allows you to create great looking web pages, but how does it work under the hood? This article explains what CSS is with a simple syntax example and also covers some key terms about the language.</p>
   </section>
</body>
</html>

方法:使用“`
` 方法”

第一種方法是在 HTML5 中使用“`

`”來定義文件中的章節。它用於表示獨立且完整的內容,例如故事、帖子或文章。它包含所有重要資訊,並且可以獨立閱讀,無需閱讀頁面的其餘部分。

示例

以下是如何使用“`

`”在 HTML5 文件中定義章節的示例。

<!DOCTYPE html>
<html>
<head>
   <title>Using the <article> Element</title>
   <style>
      /* Styles for article and its children */
      article {
         border: 1px solid black;
         padding: 10px;
      }
      h1 {
         font-size: 24px;
         color: purple;
      }
      p {
         font-size: 18px;
         line-height: 1.5;
         color: red;
      } 
      ul li {
         color: red;
      }
      time {
         font-style: italic;
      }
   </style>
</head>
<body>
   <article>
      <h1>what is php used for in web development?</h1>
      <p>Like any other scripting language, PHP is fundamentally the tool you use to connect to your database to get information and hand that information over to your web server to be displayed in HTML. But many aspects of PHP set it apart from other languages.</p>
      <p>You should choose PHP for your website, eCommerce marketplace, or application if you want a language that is:</p>
      <ul>
         <li>Flexible</li>
         <li>Compatible</li>
         <li>Scalable</li>
         <li>Secure</li>
      </ul>
      <time datetime="2023-03-3">Published on March 3, 2023</time>
   </article>
</body>
</html>

結論

在本文中,我們研究了在 HTML5 文件中定義章節的兩種不同方法。在這裡,我們使用了兩種不同的方法“`

`”和“`
`”。`
` 標籤用於將相關內容組合在一起,例如書籍中的章節或文章中的部分,而 `
` 標籤用於自包含的內容,例如部落格文章或新聞文章。

更新於: 2023年3月27日

269 次瀏覽

開啟您的 職業生涯

透過完成課程獲得認證

開始學習
廣告

© . All rights reserved.