如何在HTML文件中包含一個section部分?
Section是HTML中使用的標籤之一,用於定義文件的部分,例如頁首、頁尾、章節等。
Section標籤將文件內容分成兩部分:section和subsection。
當需要兩個頁首或頁尾或章節或文件的其他部分時,它非常有用。
Section標籤將相關內容分組到一個通用的塊中。
它是一個語義元素,既向瀏覽器也向開發者描述含義。
section有開始和結束標籤:<section> </section>
它幾乎支援所有瀏覽器。
Section標籤還支援全域性屬性和事件屬性。
語法
<section> Content </section>
示例
以下示例演示了HTML中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>
示例
以下另一個示例演示了HTML中section標籤的用法:
<!DOCTYPE html>
<html>
<head>
<title>HTML Section Tag</title>
</head>
<body>
<section>
<h1>Java</h1>
<h3>Inheritance</h3>
<p>Inheritance defines the relationship between superclass and subclass.</p>
</section>
</body>
</html>
巢狀Section標籤
位於另一個section內部的section稱為巢狀section。如果兩個section(主section和子section)的字型屬性相同,則可以透過字型大小來區分它們,子section的字型大小小於section標籤。
subsection標籤主要用於組織複雜的文件。因此,section在文件的大綱中邏輯上會出現。
語法
以下是HTML中巢狀section標籤的用法/語法:
<section>
<section>
<content>
</section>
</section>
示例
在以下示例中,我們嘗試在HTML中建立一個巢狀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>
<h4> Introduction</h4>
<h4> Examples </h4>
</section>
</section>
<section>
<h2>----- Section 2-----</h2>
<p>JAVA Tutorial</p>
<section>
<h4> Fundamentals of OOPs</h4>
<h4> Example Programs</h4>
</section>
</section>
<section>
<h2>-----Section 3-----</h2>
<p>Oracle Tutorial</p>
<section>
<h4> SQL Introduction</h4>
<h4> SQL Commands </h4>
</section>
</section>
</body>
</html>
示例
以下示例顯示了在CSS文件中使用section作為所有瀏覽器的預設設定:
<!DOCTYPE html>
<html>
<head>
<style>
section {
display: block;
}
</style>
</head>
<body>
<p>A section element is displayed like this:</p>
<section>
<h1>TutorialsPoint</h1>
<p>Tutorials Point is a leading Ed Tech company striving to provide the best learning material on technical and non-technical subjects.</p>
</section>
<p>To see the effects ,Change the default CSS settings .</p>
</body>
</html>
廣告
資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
iOS
HTML
CSS
Android
Python
C語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP