首頁 > 文章 > web前端 > HTML 部分標籤

HTML 部分標籤

WBOY原創: 2024-09-04 16:31:331066瀏覽

下面的文章提供了 HTML 部分標籤的概述。 HTML 標籤定義文件的部分，例如頁首、章節、頁尾等。標籤將網頁內容分成部分和子部分。它通常在需要兩個頁腳、頁首或任何其他新部分時使用。部分標籤通常會將相關內容的通用區塊進行分組。使用

的主要優點是標籤的特徵是它是一個語義元素，向開發者和瀏覽器描述其含義。

版塊標籤需要注意的重點

HTML5中的Section標籤需要同時包含開始和結束標籤，即

……..

標籤用於將內容分為兩部分，即它分佈節和子節。
節標籤允許的內容類型是流內容，意味著；作為父標籤，不能嵌套
標籤。元素;然後相同的內容不能有標籤作為其父級；分段內容和可觸摸內容。
元素不能是
的後代。元素。
每個應透過引入標題標籤作為
的子標籤來視覺化。元素。
如果我們需要聯合
的內容；單獨的元素，那麼我們可以使用
；來取代標籤。
元素不應該被用作通用容器；這就是
的內容是為了，特別是當切片僅用於樣式目的時。經驗法則是
標籤邏輯上應該出現在文件的大綱上。
元素是語義元素，它提供有關所包含內容的含義，重點關注人類和用戶代理的文檔部分。它是一個通用語義元素，因此當沒有其他語義容器元素（article、aside 和 nav）合適時，應該使用它。

文法：

以下是提到的語法：

HTML/XHTML
```
<body>
<section> ... </section>
<body>
```
CSS
```
section{
--your css code—
}
```
Html 部分標籤的屬性

以下是提到的一些屬性：

1.標籤特定屬性

沒有與
一起使用的特定屬性標籤。

2.全域屬性

像所有其他 HTML 標籤一樣，
標籤也支援HTML5中的全域屬性。

以下是全域屬性：
- 中止
- 自動完成
- 自動完成錯誤
- onblur
- 取消
- 可以玩
- 可以通關
- onchange
- 點選
- 關閉
- 上下文選單
- 提示改變
- 點選
- ondrag
- ondragend
- ondragenter
- 關於dragage退出
- 拖曳離開
- ondragover
- ondragstart
- ondrop
- 持續時間變化
- 已清空
- 已結束
- 錯誤
- 焦點
- 輸入
- 無效
- 按下按鍵
- 按鍵
- onkeyup
- 載入
- 已載入資料
- 已載入元資料
- onloadstart
- 滑鼠按下
- 滑鼠輸入
- 滑鼠離開
- 滑鼠移動
- 滑鼠移出
- 滑鼠懸停
- 滑鼠鬆開
- 滑鼠滾輪
- 暫停
- 比賽中
- 正在播放
- 進行中
- 匯率變動
- 重置
- 調整大小
- 捲動
- 尋求
- 尋求
- 選擇
- 現場表演
- onsort
- 已安裝
- 提交
- 暫停
- 準時更新
- 開啟
- 音量變化
- 等待中
3.事件屬性

不存在可與
一起使用的事件屬性標籤。

中的 CSS 文字格式屬性標籤

下面給的是 CSS 文字格式屬性：
- 文字顏色
- 文字對齊
- 文字裝飾
- 文字轉換
- 行高
- 文字方向
- 文字陰影
- 字間距
中的 CSS 字體屬性標籤

下面給的是 CSS 字體屬性：
- font-style: normal|italic|oblique|initial|inherit
- font-variant: normal|small-caps|initial|inherit
- font-weight: normal|bold|bolder|lighter|number|initial|inherit
- font-size: medium|xx-small|x-small|small|large|x-large|xx-large|smaller|larger|length|initial|inherit
- font-family: family-name|generic-family|initial|inherit
CSS Test Shadow Property for
Tag

Given below is the CSS Test Shadow Property:
```
<style>
address{
text-shadow: 1px 1px #FF0000;
}
</style>
```
Examples of HTML section Tag

Given below are the examples of HTML section Tag:

Example #1

Code:
```
<!DOCTYPE html>
<html>
<head>
<title>Section tag</title>
</head>
<body>
<section>
<h1>eduCBA: Article 1</h1>
<p>Content of Article 1</p>
</section>
<section>
<h1>eduCBA: Article 2</h1>
<p>Content of Article 2</p>
</section>
<section>
<h1>eduCBA: Article 3</h1>
<p>Content of Article 3</p>
</section>
</body>
</html>
```
Output:

Example #2

Nested Section Tag.

The
tag can be nested wherein the font size of the subsection is smaller than the section only if both have the same font properties. The subsection is used for organizing complex data.

Code:
```
<!DOCTYPE html>
<html>
<head>
<title>Section tag</title>
</head>
<body>
<section>
<h1>eduCBA: Article 1</h1>
<p>Content of Article 1</p>
<section>
<h1>Subsection</h1>
<h1>Subsection</h1>
</section>
</section>
<section>
<h1>eduCBA: Article 2</h1>
<p>Content of Article 2</p>
<section>
<h1>Subsection</h1>
<h1>Subsection</h1>
</section>
</section>
<section>
<h1>eduCBA: Article 3</h1>
<p>Content of Article 3</p>
<section>
<h1>Subsection</h1>
<h1>Subsection</h1>
</section>
</section>
</body>
</html>
```
Output:

Example #3

Code:
```
<!DOCTYPE html>
<html>
<head> . . . </head>
<body>
<header>
<h1>HTML Section tag example</h1>
</header>
<main>
<article> An article on HTML Section tag</article>
</main>
<aside> Body of an article </aside>
<footer>
<section>Copyright &copy;2020- EDUCBA.</section>
<address> A- 406, Boomerang, Chandivali Farm Road,
Yadav Nagar, Chandivali, Powai,
Maharashtra, Mumbai - 400072. </address>
</footer>
</body>
</html>
```
Output:

Example #4

Code:
```
<!DOCTYPE>
<html>
<head>
<style&gt
section{
border:1px solid pink;
padding:15px;
margin:10px;
}
</style>
</head>
<body>
<h2> List of Articles</h2>
<section>
<h3>Article 1 heading</h3>
<p> Body of article </p>
</section>
<section>
<h3>Article 2 heading</h3>
<p> Body of article </p>
</section>
<section>
<h3>Article 3 heading</h3>
<p> Body of article </p>
</section>
</body>
</html>
```
Output:

Example #5

While creating a
tag in HTML5, we can use either the class or id attributes wherein each id should be unique, and the class can be used multiple times when necessary.

The section should always have a header element (H1 to H6). If a title cannot be given for the section, we can use the
element, which will probably be more appropriate, and always never use the
tag just for putting styles.

Code:

<!DOCTYPE> <html> <head> <style> section{ border:1px solid pink; padding:15px; margin:10px; } </style> </head> <body> <section id="sectiontag" class="sectionclass"> <h2>HTML Section tag</h2> <p>Random text Random text Random text...</p> </section> <section id="articletag"> <h2>HTML Article tag</h2> <p>Random text Random text Random text...</p> </section> <section id="footertag"> <h2>HTML Footer tag</h2> <p>Random text Random text Random text...</p> </section> </body> </html>

Output:

Conclusion

The
element is a structural HTML element that groups all the related elements. Each
usually includes one or more heading elements and additional elements presenting related content.
is a new HTML5 element used to define an important document section. It is better to use it within articles, to define navigation, or in the header or footer. If a section of the content deserves its heading, which would be listed in a theoretical or actual table of contents, it should be placed as a
.