HTML 是一種用于構建網頁的標記語言。它具有許多不同的標記和元素，這些元素一起構成了一個網頁。但是，有時候我們希望隱藏一些 HTML 代碼，以便更好地組織和展示我們的網頁。那么，如何收起 HTML 代碼呢？
我們可以使用 HTML 的 pre 標簽來顯示代碼，它會保留代碼中的空格和換行符。然而，我們希望在不需要顯示代碼的時候將其收起來。為此，我們可以使用 JavaScript 和 CSS 來實現。
首先，我們需要在 HTML 中創建一個 div 元素來包含我們的代碼。我們可以給這個 div 添加一個 id 屬性，以便在 JavaScript 中引用它。例如：接下來，我們需要創建一個按鈕來觸發代碼的顯示和隱藏。我們可以使用 button 元素來創建一個按鈕，并在 JavaScript 中添加一個事件監聽器來處理點擊事件。例如：然后，我們需要編寫 JavaScript 函數來實現顯示和隱藏代碼的邏輯。我們可以使用 CSS 的 display 屬性來隱藏或顯示 div 元素中的代碼。例如：
function toggleCode() {
var code = document.getElementById("code");
if (code.style.display === "none") {
code.style.display = "block";
} else {
code.style.display = "none";
}
}
最后，我們可以使用 CSS 來樣式化我們的按鈕和代碼塊。例如：
p {
font-size: 16px;
}
button {
background-color: #4CAF50;
color: white;
padding: 8px 16px;
border: none;
border-radius: 4px;
cursor: pointer;
}
pre {
background-color: #f8f8f8;
border: 1px solid #ddd;
padding: 10px;
overflow-x: auto;
}
div#code {
display: none;
}
總結起來，我們可以使用 pre 標簽來顯示 HTML 代碼，使用 JavaScript 和 CSS 來實現代碼的收起和展開。通過以上的步驟，我們可以更好地組織和展示我們的網頁。
點擊下面的按鈕以顯示或隱藏代碼：
<!DOCTYPE html>
<html>
<head>
<title>我的網頁</title>
</head>
<body>
<h1>歡迎來到我的網頁！</h1>
</body>
</html>上一篇html導航界面代碼
下一篇python 酷炫代碼