當我們在編寫網頁時，經常需要在頁面中添加源代碼，以便讓訪問者查看代碼并學習。這時，HTML提供了一個pre標簽，用于顯示預格式化的文本，即保留代碼中的空格、換行等格式。 要在HTML頁面中添加源代碼，我們可以使用pre標簽將源代碼包圍起來。具體操作如下：

以下是一段JavaScript代碼：

//設置變量
var x = 10;
var y = 20;
//計算兩數之和
var sum = x + y;
//輸出結果
console.log("兩數之和為：" + sum);

以上代碼演示了在p標簽中添加了一段JavaScript代碼，并用pre標簽將其包圍起來。在瀏覽器中運行代碼后，我們會看到源代碼中的空格、換行等格式都得到了保留。 此外，我們還可以在pre標簽中添加屬性來進一步控制源代碼的顯示效果。如下所示：

//設置變量
var x = 10;
var y = 20;
//計算兩數之和
var sum = x + y;
//輸出結果
console.log("兩數之和為：" + sum);

在上述代碼中，我們添加了一個class屬性，并將其值設置為"code"。通過CSS樣式表，我們可以對這個class進行樣式設置，比如改變字體、顏色、背景等。這樣，我們就可以將代碼的顯示效果變得更加美觀。 綜上所述，使用pre標簽可以很方便地在HTML頁面中添加源代碼，并且可以通過class屬性對其進行樣式設置。對于那些希望學習網頁制作的人來說，這是一種非常有用的技能。