在編程學(xué)習(xí)和文檔編寫過程中，清晰地展示代碼是一項(xiàng)關(guān)鍵技能。HTML 作為網(wǎng)頁開發(fā)的基礎(chǔ)語言，提供了多種展示計(jì)算機(jī)代碼的方法。本文將為你詳細(xì)介紹如何使用 HTML 展示計(jì)算機(jī)代碼，并結(jié)合最新技術(shù)標(biāo)準(zhǔn)規(guī)范，幫助你在編程獅（w3cschool.cn）的學(xué)習(xí)之旅中更高效地記錄和分享代碼。
什么是 HTML
HTML（HyperText Markup Language）是用于創(chuàng)建網(wǎng)頁的標(biāo)準(zhǔn)標(biāo)記語言。它通過一系列的標(biāo)簽（tags）來定義網(wǎng)頁的結(jié)構(gòu)和內(nèi)容，瀏覽器會根據(jù)這些標(biāo)簽來解析和顯示網(wǎng)頁。HTML 是所有網(wǎng)頁開發(fā)的基礎(chǔ)，無論你是想成為前端開發(fā)工程師還是全棧開發(fā)工程師，掌握 HTML 都是必不可少的。
HTML 展示代碼的基本方法
1. 使用 <code> 標(biāo)簽
<code> 標(biāo)簽用于定義代碼片段，它可以告訴瀏覽器這是代碼內(nèi)容，通常瀏覽器會以等寬字體（monospace font）來顯示 <code> 標(biāo)簽中的內(nèi)容，這使得代碼更易于閱讀。例如：
<p>這是一個(gè)簡單的 Python 代碼示例：</p>
<code>
print("Hello, 編程獅！")
</code>在瀏覽器中顯示為：
這是一個(gè)簡單的 Python 代碼示例：
print("Hello, 編程獅！")
<code> 標(biāo)簽適合用于在文本中插入一小段代碼，比如函數(shù)名、變量名或者簡短的代碼行。
2. 使用 <pre> 標(biāo)簽
<pre> 標(biāo)簽（preformatted text）用于定義預(yù)格式化的文本。在 <pre> 標(biāo)簽中的文本會保留空格和換行，這使得它非常適合展示代碼塊，因?yàn)榇a的縮進(jìn)和格式對于代碼的可讀性至關(guān)重要。例如：
<pre>
<html>
<head>
<title>編程獅示例</title>
</head>
<body>
<p>這是一個(gè)編程獅的示例頁面。</p>
</body>
</html>
</pre>在瀏覽器中顯示為：
<html>
<head>
<title>編程獅示例</title>
</head>
<body>
<p>這是一個(gè)編程獅的示例頁面。</p>
</body>
</html>
注意：在上面的示例中，我們使用了 HTML 實(shí)體（如 < 表示 <，> 表示 >），因?yàn)橹苯釉?HTML 中寫 < 和 > 可能會被瀏覽器誤解為 HTML 標(biāo)簽。在展示 HTML 代碼時(shí)，需要對這些特殊字符進(jìn)行轉(zhuǎn)義。
3. 結(jié)合 <code> 和 <pre> 標(biāo)簽
為了更好地展示代碼塊，你可以將 <code> 標(biāo)簽和 <pre> 標(biāo)簽結(jié)合使用，這樣既能保留代碼的格式，又能以等寬字體顯示代碼。例如：
<pre><code>
function sayHello() {
console.log("Hello, W3Cschool！");
}
sayHello();
</code></pre>在瀏覽器中顯示為：
function sayHello() {
console.log("Hello, W3Cschool！");
}
sayHello();這種方法是展示代碼塊的最佳實(shí)踐，能夠確保代碼在網(wǎng)頁中正確顯示并易于閱讀。
HTML 展示代碼的高級技巧
1. 添加語法高亮
雖然 HTML 本身不支持語法高亮，但你可以通過 CSS 來實(shí)現(xiàn)簡單的語法高亮效果。例如，為關(guān)鍵字、字符串、注釋等添加不同的顏色。以下是一個(gè)簡單的示例：
<style>
.keyword { color: purple; }
.string { color: red; }
.comment { color: green; }
</style>
<pre><code>
<html>
<head>
<title>編程獅示例</title>
</head>
<body>
<p>這是一個(gè)編程獅的示例頁面。</p>
</body>
</html>
</code></pre>通過 CSS 類來為不同的代碼元素添加顏色，可以讓你的代碼展示更加專業(yè)和美觀。在實(shí)際項(xiàng)目中，通常會使用專門的代碼高亮庫，如 Prism.js 或 Highlight.js，這些庫提供了豐富的主題和語言支持，能夠輕松實(shí)現(xiàn)漂亮的代碼高亮效果。
2. 使用第三方代碼高亮庫
為了更方便地實(shí)現(xiàn)代碼高亮，你可以使用第三方代碼高亮庫。以下是一個(gè)使用 Prism.js 的示例：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML 代碼展示 - 編程獅</title>
<!-- 引入 Prism.js 的 CSS -->
<link rel="stylesheet" />
</head>
<body>
<h1>Python 代碼示例</h1>
<pre><code class="language-python">
def say_hello():
print("Hello, W3Cschool！")
say_hello()
</code></pre>
<h1>HTML 代碼示例</h1>
<pre><code class="language-html">
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>編程獅示例</title>
</head>
<body>
<p>歡迎來到編程獅！</p>
</body>
</html>
</code></pre>
<!-- 引入 Prism.js 的 JS 文件 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.28.0/prism.min.js"></script>
<!-- 引入 Prism.js 的 Python 語言支持 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.28.0/components/prism-python.min.js"></script>
</body>
</html>
在瀏覽器中打開這個(gè)頁面，你會看到代碼被自動高亮顯示，不同的語法元素（如關(guān)鍵字、字符串、標(biāo)簽等）會顯示為不同的顏色，這樣可以大大提升代碼的可讀性。
3. 創(chuàng)建代碼縮放和折疊功能
為了在頁面上更高效地展示代碼，尤其是當(dāng)代碼很長時(shí)，你可以添加代碼縮放和折疊功能。這通常需要結(jié)合 JavaScript 來實(shí)現(xiàn)。以下是一個(gè)簡單的示例：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>代碼縮放和折疊示例 - 編程獅</title>
<style>
.code-container {
margin: 20px 0;
padding: 10px;
background-color: #f5f5f5;
border: 1px solid #ddd;
border-radius: 5px;
overflow: hidden;
}
.code-header {
display: flex;
justify-content: space-between;
padding: 5px 0;
border-bottom: 1px solid #ddd;
cursor: pointer;
}
.code-content {
padding: 10px 0;
max-height: 200px;
overflow-y: auto;
}
.collapsed {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease-out;
}
</style>
</head>
<body>
<h1>代碼縮放和折疊示例</h1>
<div class="code-container">
<div class="code-header" onclick="toggleCode(this)">
<span>點(diǎn)擊展開/折疊代碼</span>
<span>Python 示例代碼</span>
</div>
<div class="code-content collapsed">
<pre><code>
def factorial(n):
if n == 0:
return 1
else:
return n * factorial(n-1)
print(factorial(5)) # 輸出 120
</code></pre>
</div>
</div>
<div class="code-container">
<div class="code-header" onclick="toggleCode(this)">
<span>點(diǎn)擊展開/折疊代碼</span>
<span>HTML 示例代碼</span>
</div>
<div class="code-content collapsed">
<pre><code>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>編程獅示例</title>
</head>
<body>
<h1>歡迎來到編程獅！</h1>
<p>這是我的第一個(gè) HTML 頁面。</p>
</body>
</html>
</code></pre>
</div>
</div>
<script>
function toggleCode(element) {
const content = element.nextElementSibling;
content.classList.toggle('collapsed');
}
</script>
</body>
</html>
在這個(gè)示例中，我們通過 CSS 和 JavaScript 實(shí)現(xiàn)了代碼塊的折疊和展開功能。用戶可以點(diǎn)擊代碼塊的頭部來展開或折疊代碼內(nèi)容，這樣可以節(jié)省頁面空間，提升用戶體驗(yàn)。
在編程獅中實(shí)踐 HTML 代碼展示
在編程獅（w3cschool.cn）的學(xué)習(xí)過程中，你可以在以下場景中實(shí)踐 HTML 代碼展示：
- 課程筆記：在學(xué)習(xí)編程獅的 HTML、CSS、JavaScript 課程時(shí)，用 HTML 記錄代碼示例，制作自己的學(xué)習(xí)筆記網(wǎng)頁。
- 項(xiàng)目分享：在編程獅的項(xiàng)目展示區(qū)，用 HTML 創(chuàng)建一個(gè)漂亮的網(wǎng)頁來展示你的代碼和項(xiàng)目成果。
- 問題求助：在編程獅的討論區(qū)提問時(shí)，使用
<pre>和<code>標(biāo)簽清晰地展示你的代碼，方便其他學(xué)習(xí)者和專家?guī)椭憬鉀Q問題。
推薦學(xué)習(xí)資源
如果你想更系統(tǒng)地學(xué)習(xí) HTML 和編程技術(shù)，編程獅（w3cschool.cn）提供了以下優(yōu)質(zhì)課程：
- HTML5 基礎(chǔ)教程：全面講解 HTML 的基本語法和常用標(biāo)簽，適合零基礎(chǔ)學(xué)習(xí)者。
- CSS3 入門與實(shí)戰(zhàn)：學(xué)習(xí)如何使用 CSS 美化網(wǎng)頁，結(jié)合 HTML 創(chuàng)建精美的頁面。
- JavaScript 基礎(chǔ)入門課程：掌握前端開發(fā)的核心技術(shù)，實(shí)現(xiàn)網(wǎng)頁的交互效果。
- Python 編程基礎(chǔ)：學(xué)習(xí) Python 語言，結(jié)合 HTML 展示代碼，提升編程能力。
- Web前端入門掃盲課程：寫給編程純小白的無門檻微課。
總結(jié)
通過本文的介紹，你已經(jīng)掌握了如何在 HTML 中展示計(jì)算機(jī)代碼的基本方法和高級技巧。在編程獅（w3cschool.cn）的學(xué)習(xí)旅程中，無論是記錄筆記還是分享項(xiàng)目，這些技能都將幫助你更高效地表達(dá)和交流。掌握 HTML 不僅能讓你更好地展示代碼，也是成為前端開發(fā)工程師的重要一步。如果你希望進(jìn)一步提高編程和文檔編寫能力，歡迎深入學(xué)習(xí)編程獅上的相關(guān)課程，開啟你的技術(shù)成長之路。
