body 和 div：HTML 中的關鍵元素
在編寫 HTML 代碼時，我們經常會使用到 <b>body</b> 和 <b>div</b> 這兩個關鍵元素。本文將深入探討這兩個元素在布局和組織網頁內容方面的作用。
body 元素
<b>body</b> 是 HTML 文檔的主要內容容器。它包含了網頁上可見的所有內容，如文本、圖像、鏈接等。因此，<b>body</b> 是一個必需的元素，并且在一個 HTML 文檔中只能有一個 <b>body</b> 元素。
下面是一個例子，展示了如何使用 <b>body</b> 元素來定義一個簡單的網頁布局：
<!DOCTYPE html> <html> <head> <title>我的網頁</title> </head> <body> <h1>歡迎來到我的網頁！</h1> <p>這是一個示例網頁內容。</p> </body> </html>
在上面的代碼中，<h1> 和
是屬于 <b>body</b> 元素的子元素，它們將在瀏覽器中顯示為頁面的標題和內容。
div 元素
<b>div</b> 是一個通用的容器元素，通常用于分組和樣式化 HTML 中的其他元素。它本身沒有任何語義，主要的作用是組織和布局頁面內容。一個網頁可以包含多個 <b>div</b> 元素。
下面是一個示例，展示了如何使用 <b>div</b> 元素來創建一個兩欄布局：
<!DOCTYPE html>
<html>
<head>
<title>兩欄布局</title>
<style>
.container {
display: flex;
}
<br>
.sidebar {
width: 20%;
background-color: #f1f1f1;
}
<br>
.content {
width: 80%;
background-color: #fff;
}
</style>
</head>
<body>
<div class="container">
<div class="sidebar">
<h3>側邊欄</h3>
<p>這是一個側邊欄內容。</p>
</div>
<div class="content">
<h1>主要內容</h1>
<p>這是網頁的主要內容區域。</p>
</div>
</div>
</body>
</html>在上面的代碼中，我們使用了 CSS 來設置 <b>div.container</b> 元素和其子元素的樣式。這里使用了 flex 布局來實現兩欄布局，<b>div.sidebar</b> 和 <b>div.content</b> 分別代表了兩欄的內容。通過設定不同的寬度和背景色，我們可以清楚地區分兩欄。
起來，<b>body</b> 元素用于包含網頁的所有可見內容，而 <b>div</b> 元素則常用于組織和樣式化頁面的其他元素，幫助我們實現豐富的布局效果。