HTML是一種標(biāo)記語(yǔ)言，它被用來(lái)構(gòu)建網(wǎng)頁(yè)。在網(wǎng)頁(yè)中，有時(shí)需要展示代碼或者說(shuō)明文字，那么如何實(shí)現(xiàn)當(dāng)用戶點(diǎn)擊一段文字時(shí)，展示相關(guān)的代碼呢？這個(gè)問(wèn)題可以通過(guò)使用HTML中的pre標(biāo)簽來(lái)解決。 pre標(biāo)簽是一個(gè)用來(lái)展示代碼的HTML標(biāo)簽，它會(huì)將文本中的空格、制表符和換行符都保留下來(lái)，以代碼的格式展示。如果想要在用戶點(diǎn)擊某個(gè)元素后展示代碼，可以結(jié)合使用JavaScript來(lái)實(shí)現(xiàn)。 我們可以在HTML文檔中定義一個(gè)按鈕元素或者鏈接元素，當(dāng)用戶點(diǎn)擊它時(shí)，通過(guò)JavaScript來(lái)實(shí)現(xiàn)代碼的展示功能。如下所示：

點(diǎn)擊下方按鈕查看代碼：

展示代碼

// 這里放置你想要展示的代碼

上面的代碼使用了p標(biāo)簽來(lái)包裹了一段說(shuō)明文字，使用button標(biāo)簽來(lái)創(chuàng)建一個(gè)按鈕，當(dāng)用戶點(diǎn)擊按鈕時(shí)，會(huì)執(zhí)行showCode()函數(shù)。同時(shí)，還定義了一個(gè)pre標(biāo)簽來(lái)展示代碼。需要注意的是，預(yù)先將pre標(biāo)簽的display屬性設(shè)置為none，這樣就可以讓代碼默認(rèn)不可見(jiàn)。 下面是showCode()函數(shù)的代碼實(shí)現(xiàn)： function showCode() { document.getElementById("code").style.display = "block"; } 上面的代碼利用了JavaScript中提供的getElementById()方法，找到了我們預(yù)定義的pre標(biāo)簽，并將其display屬性設(shè)置為block，從而將代碼展示出來(lái)。當(dāng)然，這只是一個(gè)簡(jiǎn)單的實(shí)現(xiàn)，你還可以進(jìn)一步優(yōu)化它，比如展示代碼前先獲取代碼文件，并自動(dòng)添加高亮等代碼編輯器功能。 總之，通過(guò)使用HTML的pre標(biāo)簽、JavaScript以及CSS等技術(shù)，我們可以輕松地實(shí)現(xiàn)點(diǎn)擊后展示代碼的功能，這對(duì)于一些需要展示代碼的網(wǎng)頁(yè)來(lái)說(shuō)是非常有用的。