在網頁開發中，有時候需要在頁面中展示一些代碼段，但是這些代碼段又不希望一開始就暴露給用戶。這時，我們可以考慮使用HTML的點擊事件來隱藏代碼的顯示。
首先，我們需要將要隱藏的代碼段放在`
`標簽中。``標簽是表示預先格式化文本的標簽，會保留空格和換行符。
比如，我們想要展示下面這段代碼：
```html隱藏代碼示例function toggleCode() {
var code = document.getElementById('code');
if (code.style.display === 'none') {
code.style.display = 'block';
} else {
code.style.display = 'none';
}
}```
我們可以將其放在``標簽中：
```html<!DOCTYPE html>
<html>
<head>
<title>隱藏代碼示例</title>
<script type="text/javascript">
function toggleCode() {
var code = document.getElementById('code');
if (code.style.display === 'none') {
code.style.display = 'block';
} else {
code.style.display = 'none';
}
}
</script>
</head>
<body>
<button id="toggle" onclick="toggleCode()">Toggle Code</button>
<pre id="code" style="display: none;">
function toggleCode() {
var code = document.getElementById('code');
if (code.style.display === 'none') {
code.style.display = 'block';
} else {
code.style.display = 'none';
}
}
</pre>
</body>
</html>```
這樣，頁面加載時就會隱藏該代碼段。接下來，我們需要為展示代碼的按鈕綁定一個點擊事件，讓它在點擊時顯示或隱藏這個代碼段。
我們可以使用JavaScript代碼實現這個功能。代碼如下：
```javascript
function toggleCode() {
var code = document.getElementById('code');
if (code.style.display === 'none') {
code.style.display = 'block';
} else {
code.style.display = 'none';
}
}
```
然后，我們在按鈕上添加一個`onclick`屬性，值為`toggleCode()`，表示在點擊按鈕時調用`toggleCode()`函數。
```html```
現在，我們完成了代碼隱藏顯示的功能。當頁面加載時，這段代碼會被隱藏；當用戶點擊"Toggle Code"按鈕時，代碼段會展示出來。這讓頁面更易于閱讀和瀏覽。
總結一下，使用HTML的點擊事件來隱藏代碼段的顯示，可以讓頁面更加簡潔和易讀。我們需要使用``標簽來包裹代碼段，并使用JavaScript代碼為展示代碼的按鈕綁定一個點擊事件，讓它在點擊時顯示或隱藏這個代碼段。
