P標簽用于包裹段落，而pre標簽用于表示預格式化的文本，表現為等寬字體的文本塊。本文將圍繞"div 模擬 progress"這個主題展開討論。progress元素代表了一個進度條。然而，在某些情況下，我們希望自定義進度條的外觀和行為，并更靈活地控制其進度值。通過使用div元素并結合CSS和JavaScript的相關技術，我們可以實現這一目標。
讓我們來看幾個示例，以詳細說明如何使用div元素模擬進度條。
第一個示例是一個簡單的進度條，其進度通過CSS屬性width來表示。通過控制div元素的寬度，我們可以動態改變進度條的進度。以下是一個示例代碼：

<p><div class="progress-bar"></p>
<p></div></p>
<br>
<style>
.progress-bar {
background-color: lightgray;
height: 20px;
width: 0;
transition: width 0.5s;
}
</style>
<br>
<script>
const progressBar = document.querySelector('.progress-bar');
const progress = 50; // 進度值（0-100）
<br>
    progressBar.style.width =${progress}%;
</script>

在上述代碼中，我們創建了一個div元素，并為其添加了一個類名"progress-bar"。然后，通過CSS樣式定義了進度條的樣式，包括背景顏色、高度和過渡效果。JavaScript部分將通過獲取元素并動態設置其寬度，實現進度條的進度。
第二個示例是一個帶有動畫效果的進度條。我們通過設置CSS的@keyframes規則來實現動畫效果。以下是示例代碼：

<p><div class="progress-bar"></p>
<p></div></p>
<br>
<style>
.progress-bar {
background-color: blue;
height: 20px;
animation: progressAnimation 2s infinite;
}
<br>
    @keyframes progressAnimation {
0% {
width: 0;
}
100% {
width: 100%;
}
}
</style>

在上述代碼中，我們定義了一個名為"progressAnimation"的動畫效果，從0%到100%依次改變進度條的寬度。通過將該動畫效果應用于div元素，我們可以實現進度條的動畫效果。
第三個示例是一個帶有交互功能的進度條。我們添加了一個按鈕，通過點擊按鈕來增加進度條的進度。以下是示例代碼：

<p><div class="progress-bar"></p>
<p></div></p>
<p><button onclick="increaseProgress()">增加進度</button></p>
<br>
<style>
.progress-bar {
background-color: green;
height: 20px;
width: 0;
transition: width 0.5s;
}
</style>
<br>
<script>
const progressBar = document.querySelector('.progress-bar');
let progress = 0; // 進度值（0-100）
<br>
    function increaseProgress() {
progress += 10;
if (progress > 100) {
progress = 100;
}
progressBar.style.width =${progress}%;
}
</script>

在上述代碼中，我們添加了一個按鈕，并為其綁定了一個名為"increaseProgress"的點擊事件處理函數。當按鈕被點擊時，我們增加進度值并通過設置div元素的寬度來改變進度條的進度。
通過以上幾個案例，我們可以看到使用div元素來模擬進度條的靈活性。我們可以根據需求自定義進度條的樣式、動畫效果和交互功能，從而提供更好的用戶體驗。無論是簡單的進度顯示還是復雜的交互應用，div模擬的進度條都能滿足我們的需求。