HTML中展示示例代碼十分常見。好處在于可以讓讀者更加直觀地了解代碼的結構和內容。此外，良好的代碼展示方式還可提升讀者的體驗和閱讀效率。本文將介紹HTML中如何使用pre標簽來展示代碼示例。
pre標簽定義了預格式化的文本，它在文本中保留空格和換行，只有在遇到換行符時才會換行。這標志著pre標簽是最常用的HTML標簽之一，它可以使示例代碼更易于閱讀。
示例代碼：
下面是一段使用HTML和CSS設計的頁面布局示例：
<!DOCTYPE html>
<html>
<head>
<style>
body {
margin: 0;
padding: 0;
}
.container {
display: flex;
height: 100vh;
align-items: center;
justify-content: center;
font-size: 1.5rem;
}
.item {
padding: 1rem;
background-color: lightblue;
border-radius: 0.5rem;
margin: 1rem;
}
</style>
</head>
<body>
<div class="container">
<div class="item">item1</div>
<div class="item">item2</div>
<div class="item">item3</div>
</div>
</body>
</html>在上面的代碼中，段落（p）標簽用于介紹示例代碼的作用和內容。而代碼本身則被pre標簽包裹著，這樣可以使代碼更加清晰且易于閱讀。
除了在示例代碼中使用pre標簽，還可以在HTML文件中的整個頁面中使用它來展示特殊格式的文本。但需要注意的是，pre標簽會保留代碼中的空格和換行，如果代碼中有HTML實體，瀏覽器會將它們識別為字符，而非特殊字符，這是需要特別注意的。
總結起來，使用pre標簽展示示例代碼是HTML學習和開發中常用的技巧。它可以使代碼更清晰易讀，進而加強讀者的閱讀體驗。同時，我們也要注意在使用時標簽的使用位置和注意其他細節問題。