HTML點擊按鈕顯示對應代碼 在編寫HTML代碼的過程中，我們可能會碰到這樣的情況，需要展示一段代碼，但是又不想將它們單獨放在一張圖片中（圖片對于SEO并不友好），這個時候我們可以使用HTML的pre標簽和按鈕來解決這個問題。 首先，pre標簽是用來展示預格式化文本的，相對于p標簽，它可以保留所有的空格、段落等特殊格式。它的用法非常簡單，只需要將要展示的代碼包裹在pre標簽內即可。 但是，如果直接展示這些代碼，文章的閱讀體驗會變得非常糟糕，甚至可能會讓讀者分不清哪些是代碼，哪些是普通的文章。因此，我們需要在頁面上添加一個按鈕來實現點擊顯示效果。 這個時候，我們可以使用HTML的button標簽來創建一個按鈕，然后使用JavaScript來控制按鈕的點擊事件。利用JavaScript的DOM操作，我們可以通過改變pre標簽的display屬性來控制代碼的顯示和隱藏。 下面是一個簡單的示例代碼：

下面是一段需要展示的代碼：

function helloWorld() {
console.log("Hello, world!");
}

展示代碼在這個例子中，我們首先使用了p標簽來描述需要展示的代碼的背景和相關信息。然后，我們使用了pre標簽將代碼包裹起來，并且設置了其初始狀態為“display:none;”，也就是在剛打開頁面時不會顯示。 接著，我們創建了一個button標簽，并且設置了一個onclick事件，指向了一個JavaScript函數“showCode()”。這個函數的作用是控制pre標簽的“display”屬性，實現按鈕點擊展示與隱藏代碼的效果。 在這個示例中，我們只是展示了一小段簡單的JavaScript代碼，但是通過學習和擴展，你可以實現更加豐富、復雜的代碼展示方式。這樣做不僅會增強代碼的可讀性和美觀性，也會讓你的文章更加生動有趣。