HTML 佈局元素和技術

網站通常以多列顯示內容（像雜誌或報紙）。

HTML 佈局元素

HTML 有幾個語義元素，用於定義網頁的不同部分

<header> - 定義文件或章節的頭部
<nav> - 定義一組導航連結
<section> - 定義文件中的一個章節
<article> - 定義獨立、自包含的內容
<aside> - 定義內容之外的內容（如側邊欄）
<footer> - 定義文件或章節的頁尾
<details> - 定義使用者可以按需開啟和關閉的附加詳細資訊
<summary> - 定義 <details> 元素的標題

<header> - 定義文件或章節的頭部 <nav> - 定義一組導航連結 <section> - 定義文件中的一個章節 <article> - 定義獨立、自包含的內容 <aside> - 定義內容之外的內容（如側邊欄） <footer> - 定義文件或章節的頁尾 <details> - 定義使用者可以按需開啟和關閉的附加詳細資訊 <summary> - 定義 <details> 元素的標題 您可以在我們的 HTML 語義化章節中閱讀更多關於語義元素的資訊。

HTML 佈局技術

有四種不同的技術可以建立多列布局。每種技術都有其優缺點

• CSS 框架
• CSS float 屬性
• CSS flexbox
• CSS grid

CSS 框架

如果您想快速建立佈局，可以使用 CSS 框架，例如 W3.CSS 或 Bootstrap。

CSS 浮動佈局

使用 CSS float 屬性進行整個網頁佈局很常見。浮動很容易學習——您只需要記住 float 和 clear 屬性的工作原理。缺點：浮動元素與文件流繫結，這可能會損害靈活性。在我們的 CSS 浮動與清除章節中瞭解更多關於浮動的資訊。

CSS Flexbox 佈局

使用 flexbox 可確保在頁面佈局必須適應不同的螢幕尺寸和不同的顯示裝置時，元素的行為可預測。

在我們的 CSS Flexbox 章節中瞭解更多關於 flexbox 的資訊。

CSS Grid 佈局

CSS 網格佈局模組提供了一個基於網格的佈局系統，包含行和列，使網頁設計更容易，而無需使用浮動和定位。

在我們的 CSS Grid 簡介章節中瞭解更多關於 CSS grid 的資訊。