在HTML中我們經常需要展示代碼樣式，比如展示代碼片段、樣式表以及腳本代碼等等，今天我們就來學習如何在HTML中展示代碼樣式。
使用HTML的pre標簽可以展示代碼樣式，pre是“預格式化文本”（preformatted text）的縮寫。使用pre標簽包含的文本能夠被保留空格與換行符，而不會被瀏覽器將它們自動地壓縮在一起。
很多時候，web開發者會借助pre標簽在自己的站點上展示HTML、CSS以及JavaScript代碼。代碼應該放置在pre標簽之間，包括所有空格、縮進以及行之間的空行。這樣，我們的代碼就可以在HTML頁面中展示出來。
<html> <head> <title>My Personal Website</title> </head> <body> <h1>Welcome to my site</h1> <p>Here is some text.</p> </body> </html>上面的代碼是個簡單的HTML文檔，使用pre標簽包含文本的方式來展示代碼。在展示的過程中所有的空格、縮進、以及換行都被保留，這使得展示代碼樣式更加易讀清晰。 在實際的開發中，我們通常會將pre標簽與代碼高亮一起使用，使得代碼更加美觀。此時，我們可以使用各種編程語言的高亮插件，例如高亮插件highlight.js，這些插件可以幫我們將代碼加上顏色，美觀大方。 總之，在編寫HTML的時候，我們可以使用pre標簽來展示我們的代碼片段，使得代碼在頁面中更加易讀。同時，我們也可以使用各種高亮插件來讓代碼看起來更加美觀。