HTML/CSS 佈局標籤繁多，無 JS 基礎時不知如何梳理：div、span、header、footer、section、article、aside、nav、main、h1-h6、p、ul/ol/li、table……
| 類別 | 標籤 | 語義/用途 | 典型場景 |
|---|---|---|---|
| 頁面骨架 | header | 頁面/區塊頂部（Logo、導航、搜索） | 站點頭部、文章頭部 |
footer | 頁面/區塊底部（版權、聯系、鏈接） | 站點尾部、文章尾部 | |
| 主體結構 | main | 頁面**核心唯一**內容區 | 每頁僅一個 |
section | **主題性**內容分組（通常帶標題） | 章節、Tab 面板、卡片組 | |
article | **獨立完整**可單獨分發內容 | 博文、新聞、評論、Widget | |
| 輔助/導航 | aside | 側邊欄、廣告、相關鏈接、定義 | 側邊欄、pull-quote |
nav | 主要導航鏈接組 | 主導航、麵包屑、分頁 | |
| 文本/內容 | h1-h6 | 標題層級（h1 唯一主標題） | 文章大綱、SEO 關鍵 |
p | 段落 | 正文文本塊 | |
ul/ol/li | 無序/有序列表 | 菜單、步驟、標籤雲 | |
blockquote/q/cite | 引用/短引用/來源 | 引用他人內容 | |
| 通用容器 | div | **無語義**塊級容器（佈局、分組、掛樣式） | Grid/Flex 容器、Wrapper |
span | **無語義**行內容器（微調樣式、掛屬性） | 關鍵字高亮、圖標 | |
figure/figcaption | 媒體內容+標題 | 圖片、代碼塊、圖表 |
header → main → footer（語義優先）。main 內按業務拆 section/article/aside。div (Flex/Grid 父容器)。h1-h6、段落 p、列表 ul/ol、行內 span。W3School 標籤手冊：https://www.w3school.com.cn/tags/index.asp
MDN HTML 元素參考：developer.mozilla.org/zh-CN/docs/Web/HTML/Element
語義化 ≠ 多用標籤，**正確選擇標籤表達內容含義**，CSS 只負責視覺呈現，結構與樣式分離，維護性、可訪問性、SEO 雙贏。
![Java 位元組陣列初始化：new byte[1024] 中的 1024 代表什麼意思？](https://code.yunyiwangluo.com/bianchen/UploadFiles_4619/201701/2017010517142750_S.gif)
