<div> vs <iframe>的區別及應用場景
<div>和<iframe>都是在網頁開發中經常用到的標簽，它們有著不同的特點和應用場景。本文將詳細解釋<div>和<iframe>的區別，并通過幾個代碼案例來說明它們在實際開發中的應用。
<div>是HTML中的一個標簽，它代表一個文檔中的一個分節或一個獨立的容器。它的作用是提供一個將文檔劃分為不同塊的方式，使用<div>可以將文檔的不同部分分離開來，方便樣式和結構的控制。它可以通過CSS樣式和JavaScript來修改和操作，是一種非常靈活的方式。
，我們來看一個簡單的<div>案例：

下面的代碼展示了一個簡單的網頁布局，使用了<div>標簽將頁面劃分為頭部、主體和尾部三個部分：

<code>
<div id="header">
<h1>網頁頭部</h1>
</div>
<br>
<div id="main">
<p>網頁主體內容</p>
</div>
<br>
<div id="footer">
<p>網頁底部</p>
</div>
</code>

上述代碼中，我們通過<div>標簽創建了三個容器，分別是頭部、主體和底部。這樣的布局結構可以通過CSS樣式來美化，例如給每個<div>添加不同的背景顏色、邊框、字體等來實現更好的界面效果。此外，我們還可以使用JavaScript動態地控制<div>的顯示與隱藏，以實現更靈活的頁面交互效果。
與<div>相比，<iframe>是HTML中的另一個標簽，它代表一個內嵌的窗口，可以在網頁中嵌入其他網頁、文檔、視頻等內容。它的主要作用是實現頁面的分割或將其他網頁嵌入到當前網頁中，提高頁面的靈活性和互交性。
下面我們來看一個簡單的<iframe>案例：

下面的代碼展示了如何使用<iframe>標簽嵌入一個外部網頁：

<code>
<iframe src="https://www.example.com" width="500" height="300"></iframe>
</code>

上述代碼中，我們通過<iframe>標簽將名為"https://www.example.com"的外部網頁嵌入到當前網頁中，并設置了寬度為500像素、高度為300像素。這樣就可以在當前網頁中顯示外部網頁的內容，例如可以將一個地圖或一個音頻播放器嵌入到當前網頁中。
需要注意的是，<iframe>標簽在使用時需要指定正確的源，否則可能會引發一些安全問題。此外，<iframe>還提供了一些屬性和事件，用于控制和操作嵌入的內容，例如可以通過<iframe>的scrolling屬性來控制是否顯示滾動條。
綜上所述，<div>和<iframe>在網頁開發中有著不同的應用場景。<div>主要用于劃分文檔結構和樣式控制，可通過CSS和JavaScript進行自定義和操作；而<iframe>主要用于將其他網頁或內容嵌入到當前網頁中，提高頁面的靈活性和互交性。在開發過程中，我們應根據實際需求選擇正確的標簽，以達到最佳的效果和用戶體驗。
參考文章： 1. "HTML <div> Element" - MDN Web Docs 2. "HTML <iframe> tag" - W3Schools 3. "Difference Between <div> and <iframe> in HTML" - GeeksforGeeks