使用HTML和CSS可以很容易地向網頁添加文本和樣式。除了基本的文本外，HTML和CSS也可以用來添加代碼。要在你的網頁中加入代碼塊，你需要用到HTML的標簽。但是，這種標記只能用于內聯代碼，如果你想要添加一個完整的代碼塊，你需要使用

標簽。
<pre>
<p>這是我的代碼塊：</p>
<ul>
<li>第一項</li>
<li>第二項</li>
<li>第三項</li>
</ul>
</pre>
上面的代碼塊會以等寬字體和預定義的格式呈現，這使得代碼更容易閱讀。
在CSS中，你可以使用字體大小、顏色和其他樣式來自定義代碼、字符串和關鍵字的外觀。添加以下CSS樣式可以讓代碼塊看起來更加整潔。
pre {
background-color: #f5f5f5;
color: inherit;
font-size: 14px;
line-height: 1.4;
margin-bottom: 1.5em;
padding: 1em;
white-space: pre;
word-wrap: normal;
}
代碼中的每一行都有自己的樣式，它們的背景顏色是灰色的，字體是黑色的，字體大小是14像素，每行之間的間距為1.4倍。整個代碼塊與周圍的文本之間有一個空白下沉，以幫助它們在頁面中突出顯示。
這些代碼將使你的網站更加專業化和易于閱讀。