<div>標簽是HTML中的一個重要元素，用于創建容器并將頁面內容分組。在web開發中，我們經常需要對頁面進行布局并控制元素的顯示與隱藏。為了實現這一目的，<div>標簽的display屬性可以設置為"block"或者"none"。當display屬性為"block"時，<div>標簽會在頁面上顯示為一個塊級元素；當display屬性為"none"時，<div>標簽會被隱藏，不會在頁面上顯示出來。這種顯示和隱藏的功能經常用于創建按鈕，通過點擊按鈕來展示或隱藏一些內容。下面我們將通過幾個代碼案例來詳細說明如何使用<div>標簽來展示按鈕。
案例一： 假設我們要在頁面上創建一個按鈕，點擊按鈕時顯示一個文本框。，我們可以使用<div>標簽來創建一個按鈕容器，并給它添加一個id屬性，作為唯一標識。接下來，在頁面的其他地方，我們使用<input>標簽來創建一個文本框，并給它設置一個id屬性，用于后續操作。最后，我們使用JavaScript代碼來監聽按鈕的點擊事件，并根據按鈕的狀態來控制文本框的顯示與隱藏。

html
<div id="buttonContainer">
<button onclick="toggleTextbox()">展示文本框</button>
</div>
<br>
<input type="text" id="textbox" style="display: none;">
<br>
<script>
function toggleTextbox() {
var textbox = document.getElementById("textbox");
if (textbox.style.display === "none") {
textbox.style.display = "block";
} else {
textbox.style.display = "none";
}
}
</script>

在上面的代碼中，我們通過getElementById方法獲取到文本框和按鈕的引用。在toggleTextbox函數中，我們通過判斷文本框的display屬性來控制文本框的顯示與隱藏。當文本框的display屬性為"none"時，設置display屬性為"block"，使文本框顯示出來；當文本框的display屬性為"block"時，設置display屬性為"none"，使文本框隱藏起來。
案例二： 除了通過JavaScript代碼來實現顯示與隱藏的效果，我們還可以使用CSS樣式來實現。假設我們要創建一個按鈕，點擊按鈕時切換它的背景顏色。以下是一種實現方式：

html
<style>
.button {
background-color: blue;
color: white;
padding: 10px;
border: none;
cursor: pointer;
}
<br>
  .button:hover {
background-color: red;
}
<br>
  .button.clicked {
background-color: green;
}
<br>
  .hidden {
display: none;
}
</style>
<br>
<div>
<button class="button" onclick="toggleClass()">切換背景顏色</button>
</div>
<br>
<p class="hidden">被隱藏的內容</p>
<br>
<script>
function toggleClass() {
var hiddenContent = document.querySelector(".hidden");
hiddenContent.classList.toggle("hidden");
}
</script>

在上面的代碼中，我們通過添加或刪除CSS類來控制按鈕和隱藏內容的樣式。通過調用classList對象的toggle方法，我們可以在點擊按鈕時切換按鈕的樣式和顯示隱藏內容的樣式。當隱藏內容的CSS類為"hidden"時，它的display屬性被設置為"none"，從而實現隱藏效果；當隱藏內容的CSS類被刪除時，它的display屬性恢復為默認值，顯示出來。
通過上面的兩個案例，我們可以看到在web開發中，<div>標簽結合JavaScript或CSS樣式可以實現各種按鈕展示的效果。無論是顯隱內容、切換樣式、實現交互效果，<div>標簽都是非常有用的一個元素。在實際項目中，我們可以根據具體需求結合其他HTML元素和技術來創建各種復雜的按鈕。希望以上內容對你的學習和實踐有所幫助！