<b>1. class 屬性:</b>
class 屬性用于給 <div> 元素指定一個或多個類，可以在CSS樣式表中使用這些類來對 <div> 進行樣式化。通過為不同的 <div> 添加不同的類名，我們可以根據需要對其進行定制化樣式，從而實現個性化的效果。
<style>
.red {
background-color: red;
}
.blue {
background-color: blue;
}
</style>
<br>
<div class="red">This is a red div.</div>
<div class="blue">This is a blue div.</div>在上述代碼中，我們通過為兩個 <div> 添加不同的class類名，分別實現了一個紅色背景和一個藍色背景。通過 class 屬性，我們能夠快速而靈活地對不同的 <div> 元素進行樣式化。
<b>2. id 屬性：</b>
id 屬性用于為 <div> 元素指定一個唯一的標識符，可以通過該標識符對 <div> 進行具體的操作。與 class 類似，id 也可以在CSS樣式表中使用，但是它是唯一的，每個頁面中只能有一個相同的id。
<style>
#myDiv {
background-color: green;
}
</style>
<br>
<div id="myDiv">This is a green div.</div>在上述代碼中，我們通過 id 屬性為一個 <div> 添加了唯一的標識符 "myDiv"，然后在CSS樣式表中對該標識符進行了樣式化，實現了一個綠色背景的 <div> 元素。通過 id 屬性，我們能夠精確地選擇并樣式化特定的 <div> 元素。
<b>3. style 屬性：</b>
style 屬性用于為 <div> 元素直接指定一些行內樣式。通過在 style 屬性中添加CSS樣式規則，我們可以直接改變 <div> 的外觀，而不需要通過CSS樣式表。不過，使用行內樣式會增加代碼的復雜性，不利于維護和復用。
<div style="background-color: yellow; width: 200px; height: 100px;">This is a yellow div.</div>在上述代碼中，我們通過 style 屬性直接指定了黃色背景、寬度和高度為200px和100px的 <div> 元素。盡管行內樣式具有直觀性和快速實現的優勢，但在長期維護、重復使用和樣式統一性方面存在一些不足。
<b>4. onclick 屬性：</b>
onclick 屬性用于為 <div> 元素綁定一個點擊事件處理函數。當用戶單擊 <div> 時，綁定的函數將會被執行。
<script>
function clickDiv() {
alert("Clicked!");
}
</script>
<br>
<div onclick="clickDiv()">Click me!</div>在上述代碼中，我們通過 onclick 屬性將一個名為 "clickDiv" 的函數綁定到 <div> 的點擊事件上。當用戶單擊該 <div> 時，會彈出一個警告框顯示 "Clicked!"。通過 onclick 屬性，我們能夠為 <div> 元素添加交互性，實現與用戶的互動。
<b>5. hidden 屬性：</b>
hidden 屬性用于隱藏 <div> 元素，使其在頁面上不可見。與CSS隱藏樣式不同的是，hidden 屬性是HTML5中的新屬性，它只能通過改變屬性值來進行隱藏和顯示。
<div>Visible div.</div>
<div hidden>Hidden div.</div>在上述代碼中，第一個 <div> 是可見的，而第二個 <div> 是被隱藏的，因為它使用了 hidden 屬性。通過 hidden 屬性，我們能夠根據需要靈活地控制 <div> 元素的顯示和隱藏，實現動態的內容展示。
通過上述的代碼案例，我們對 <div> 可用屬性進行了詳細的解釋并給出了實際的使用示例。這些屬性包括 class 屬性、id 屬性、style 屬性、onclick 屬性和 hidden 屬性。通過靈活運用這些屬性，我們可以進一步定制、控制和交互 <div> 元素，實現豐富多樣的頁面效果。