在編寫一些技術文章或者博客時，我們需要展示一些HTML代碼片段，讓讀者能夠更好地了解、學習和使用這些代碼。
在這種情況下，我們可以使用HTML中的div元素來展示這些代碼片段。我們可以先將HTML代碼放在pre標簽中，然后將整個代碼塊放在一個div元素中。
<div class="code-snippet"> <pre> <code> <html> <head> <title>My Title</title> </head> <body> <h1>Hello World!</h1> <p>This is my first HTML page.</p> </body> </html> </code> </pre> </div>
代碼塊中的pre標簽告訴瀏覽器這些文本是預格式化的，并且必須保留其中的所有空格和換行符。在代碼塊外部的div元素允許我們樣式化這些代碼，并使其具有更好的可讀性，例如設置背景色和根據語言自動高亮關鍵字。
最后，我們還可以使用代碼庫來生成美觀的代碼段和語法高亮。這些代碼庫包括Prism.js、highlight.js和CodeMirror等。
上一篇網頁內錨點鏈接css
下一篇ant vue框架