iT邦幫忙

2022 iThome 鐵人賽

DAY 9
0
自我挑戰組

從零開始自學HTML/CSS網頁設計系列 第 9

HTML的章節標籤

  • 分享至 

  • xImage
  •  

當你想要將網頁的內文分成章、節、項目時,就必須使用到章節標籤。章節標籤有分成article、aside、nav、section、header、footer、main等幾種。其中article是獨立完整的內容區塊,aside通常是網頁的補充資訊或廣告,和前後內容有關但和主題不同的內容區塊,nav是網站主要的導覽列,section是不屬於上面任何一種的內容區塊,header是會放在頁首的標簽,footer是放在頁尾的標籤的標籤,main標籤是用來標記網頁最主要的內容。因為我製作的網站只會使用到article、nav、section、main標籤,所以以下只示範這幾種。
1、article標籤所框住的內文是代表一個獨立完整的內容區塊,以我要製作的電影網站為例,像是簡介和電影資訊都可以分別閱讀,可以看成是獨立完整的單元內容,所以這裡使用article標籤來標記:
https://ithelp.ithome.com.tw/upload/images/20220922/20152190TqijcIIdZc.png
https://ithelp.ithome.com.tw/upload/images/20220922/20152190X1wYcHJGZ4.png

2、而配音員介紹可以使用section標籤框起來,因為這部分,指光閱讀單一區塊是無法理解他的意思它的意思的:
https://ithelp.ithome.com.tw/upload/images/20220922/20152190MurREHvggS.png

3、nav標籤框住的地方代表網站的導覽列:
https://ithelp.ithome.com.tw/upload/images/20220922/20152190MmqnLSW44t.png

4、插入header標籤將網站名稱和導覽列框起來:https://ithelp.ithome.com.tw/upload/images/20220922/20152190x3rR9lNNaj.png

5、插入main標籤框住主要的內容「簡介」和「電影資訊介紹」:
https://ithelp.ithome.com.tw/upload/images/20220922/20152190YpTJvdlixe.pnghttps://ithelp.ithome.com.tw/upload/images/20220922/20152190eLC59aTErz.png


上一篇
適當的標記HTML的清單和表格
下一篇
插入HTML網站圖片
系列文
從零開始自學HTML/CSS網頁設計30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言