HTML中的代碼折疊是一個非常有用的功能，它讓代碼閱讀更加簡單、直觀。如果你有一個包含很多代碼的頁面，那么折疊代碼就成為了更加必要的功能。 在HTML中，我們可以使用pre和code標(biāo)簽來呈現(xiàn)代碼。pre標(biāo)簽可以保留代碼中的空格和換行，而code標(biāo)簽提供一個語法高亮的環(huán)境。如果在pre標(biāo)簽內(nèi)部添加一個“fold”類，則代碼就可以被折疊。 接下來是一個例子：

function sum(a, b) {
return a + b;
}

在頁面中，這段代碼將被折疊起來。折疊按鈕很簡單，只要在pre標(biāo)簽前添加一個帶有“fold-toggle”類的按鈕即可。JavaScript則會負(fù)責(zé)處理代碼的展開和折疊。展開接下來是JavaScript代碼： var codeBlocks = document.getElementsByClassName('fold'); for (var i = 0; i< codeBlocks.length; i++) { var code = codeBlocks[i].getElementsByTagName('code')[0]; code.style.display = 'none'; var toggleButton = codeBlocks[i].previousElementSibling; toggleButton.addEventListener('click', function() { if (code.style.display == 'none') { code.style.display = 'block'; toggleButton.innerHTML = '折疊'; } else { code.style.display = 'none'; toggleButton.innerHTML = '展開'; } }); } 這個腳本在頁面加載完畢后，會找到標(biāo)志為“fold”類的pre標(biāo)簽，并關(guān)閉其中的code標(biāo)簽。然后依次去找前一個元素節(jié)點，即剛剛提到的“fold-toggle”按鈕。對于這個按鈕，腳本為它添加了一個事件監(jiān)聽，當(dāng)被點擊時，會折疊或展開其中的代碼。代碼的展開和折疊則是通過修改元素的樣式來完成的。 以上就是使用HTML的技巧來實現(xiàn)代碼折疊功能的一個例子。通過添加一些JavaScript腳本，我們能夠為用戶提供更加良好的體驗。當(dāng)然這個例子比較基礎(chǔ)，實際應(yīng)用中可能還需要考慮安全和兼容等因素。但是基本的思路就是這樣，希望能對你有所幫助。