社群
學習
工具庫
AI工具
休閒
搜尋
繁体中文
目錄
PHP中文网
首頁 web前端 H5教程 html5 section標籤是什麼意思？ html5 section標籤的用法總結

html5 section標籤是什麼意思？ html5 section標籤的用法總結

寻∝梦
寻∝梦
Aug 29, 2018 pm 04:36 PM
html section

本篇文章主要的介紹了關於HTML5 section標籤的定義以及它的用法，最後還有一個案例總結，現在讓我們開始閱讀這篇文章吧

##先來解釋下html5 section標籤的意思：

html5 section標籤定義了文件中的節（section、區段）。例如章節、頁首、頁尾或文件中的其他部分。

看一個實例讓你更了解section標籤：

文件中的區段，解釋了PRC：

<section>
  <h1 id="PHP中文网">PHP中文网</h1>
  <p>这里是PHP中文网，网址是www.php.cn</p>
</section>
登入後複製

實例效果如下圖：

html5 section標籤是什麼意思？ html5 section標籤的用法總結

現在說說section標籤的注意點：

section 不是一個專用來做容器的標籤，如果只是用於設定樣式或腳本處理，專用的是div

section 裡應該有標題（h1~6），但文章中推薦用article 來代替

一條簡單的準則是，只有元素內容會被列在文件大綱中時，才適合用section元素。

section的作用是將頁面上的內容分塊，例如各個有標題的版塊、功能區或對文章進行分段，不要與有自己完整、獨立內容的article混淆。

html5 section標籤的用法：

html5引入了
標籤，用來描述文件的結構，它同
標籤的意思一樣。但是在特定環境中，兩者又有明顯的差異。

w3對
的定義是：定義一個文檔的章節(可以擁有自己的
和
)。

w3對
的定義是: 定義一個文件的章節。 （但似乎更適合用於外層的佈局，缺少語義性。）

現在來看一個案例：

<body>
  <header></header>
  <div id=“content”>
     <section></section>
     <section></section>
  </div>
  <footer></footer>
</body>
登入後複製

在這裡，我們用改成
,因為這裡還不能明顯的區分兩者的區別:

<section id=”content”>
   <section></section>
   <section></section>
</section>
登入後複製

或： 

<div id=”content”>
   <div></div>
   <div></div>
</div>
登入後複製

HTML5 section標籤的總結：

我們用
標籤來佈局整個最外層的章，而用
用來定義內部的章節。當然如果把整個文件都看作是一個章節，那麼也可以用
來代替
，但是建議不要使用
來代替該用
佈局的地方，那些地方不能體現出
的語意性。

【小編推薦】

如何為html中的pre標籤中的文字換行？ html pre標籤的使用實例

HTML iframe標籤怎麼使用？ HTML iframe標籤的使用實例介紹

以上是html5 section標籤是什麼意思？ html5 section標籤的用法總結的詳細內容。更多資訊請關注PHP中文網其他相關文章！

本網站聲明
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序，用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！

顯示更多

熱門文章

刺客信條陰影：貝殼謎語解決方案
1 個月前 By DDD
Windows 11 KB5054979中的新功能以及如何解決更新問題
3 週前 By DDD
在哪裡可以找到原子中的起重機控制鑰匙卡
1 個月前 By DDD
如何修復KB5055523無法在Windows 11中安裝？
2 週前 By DDD
Inzoi：如何申請學校和大學
3 週前 By DDD
顯示更多

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版，非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

顯示更多

熱門話題

gmail信箱登陸入口在哪裡
7786
15
Java教學
1644
14
CakePHP 教程
1400
52
Laravel 教程
1297
25
PHP教程
1234
29
顯示更多
Related knowledge
HTML 中的表格邊框 HTML 中的表格邊框 Sep 04, 2024 pm 04:49 PM

HTML 表格邊框指南。在這裡，我們以 HTML 中的表格邊框為例，討論定義表格邊框的多種方法。

HTML 中的巢狀表 HTML 中的巢狀表 Sep 04, 2024 pm 04:49 PM

這是 HTML 中巢狀表的指南。這裡我們討論如何在表中建立表格以及對應的範例。

HTML 左邊距 HTML 左邊距 Sep 04, 2024 pm 04:48 PM

HTML 左邊距指南。在這裡，我們討論 HTML margin-left 的簡要概述及其範例及其程式碼實作。

HTML 表格佈局 HTML 表格佈局 Sep 04, 2024 pm 04:54 PM

HTML 表格佈局指南。在這裡，我們詳細討論 HTML 表格佈局的值以及範例和輸出。

HTML 輸入佔位符 HTML 輸入佔位符 Sep 04, 2024 pm 04:54 PM

HTML 輸入佔位符指南。在這裡，我們討論 HTML 輸入佔位符的範例以及程式碼和輸出。

HTML 有序列表 HTML 有序列表 Sep 04, 2024 pm 04:43 PM

HTML 有序列表指南。在這裡我們也分別討論了 HTML 有序列表和類型的介紹以及它們的範例

在 HTML 中移動文字 在 HTML 中移動文字 Sep 04, 2024 pm 04:45 PM

HTML 中的文字移動指南。在這裡我們討論一下marquee標籤如何使用語法和實作範例。

HTML onclick 按鈕 HTML onclick 按鈕 Sep 04, 2024 pm 04:49 PM

HTML onclick 按鈕指南。這裡我們分別討論它們的介紹、工作原理、範例以及各個事件中的onclick事件。

See all articles