案例1:
<div id="header">
<h1>This is a header</h1>
<p>Welcome to my website</p>
</div>
以上代碼展示了一個使用 <div> 標簽定義的網頁頭部。通過設置 id 屬性為 "header",可以對該區域進行樣式和腳本的操作。在這個頭部區域中,包含了一個 <h1> 標題和一個
段落,用于展示網頁的標題和歡迎信息。
案例2:
<div class="container">
<div class="left-column">
<p>This is the left column</p>
</div>
<div class="right-column">
<p>This is the right column</p>
</div>
</div>
上述代碼展示了一個使用 <div> 標簽定義的網頁布局。通過設置 class 屬性分別為 "container"、"left-column" 和 "right-column",可以對不同的區域進行樣式和腳本的分別控制。在這個布局中,包含了一個名為 "container" 的大容器,其中包含了一個 "left-column" 和 "right-column" 的子容器,用于展示網頁內容。
案例3:
<div style="background-color: #fff; border: 1px solid #000; padding: 10px;">
<p>This is a styled div</p>
</div>
以上代碼展示了一個使用 <div> 標簽定義的帶有樣式的區域。通過在 div 標簽上使用 style 屬性,可以直接為該區域設置背景顏色、邊框樣式和內邊距。在這個示例中,div 區域的背景顏色被設置為白色,邊框為黑色實線,內邊距為 10 像素。
<div> 標簽的特點包括:</div>
1. <div> 標簽是塊級標簽,即獨自占據一行,與其他元素換行顯示。
2. <div> 標簽可以嵌套使用,形成復雜的結構。
3. 可以通過 id 屬性和 class 屬性對 <div> 標簽進行標識和分類。
4. 可以使用 style 屬性為 <div> 標簽設置樣式。
5. <div> 標簽沒有具體的語義,僅用于布局和分組等功能。
綜上所述,<div> 標簽是 HTML 中常用的一個容器標簽,具有靈活的使用方式。通過設置 id、class 和 style 屬性,可以對 <div> 標簽進行樣式和腳本的管理和操作。它的特點包括塊級顯示、嵌套使用、標識分類、設置樣式以及沒有語義等。在實際的網頁開發中,<div> 標簽常被用于布局和分組,為網頁的整體結構和樣式提供便利。