HTML 或超文本標記語言是一種 Web 開發程式語言，它使用標籤來定義、聲明和在任何網頁元素上執行操作。標籤使用符號，結束標記前面應有“/”。程式碼標籤是一種標籤，允許程式設計師在其之間編寫程式碼區塊，例如 和 <code> 。 ……。 ，因為 HTML 中的每個標籤都必須有一個結束標籤。
文法及解釋：
基本語法如下所示，其中元素帶有一對，程式碼片段寫在這些標籤之間。這裡不執行標籤省略，因為預設起始標籤和結束標籤都是必要的。
<pre class="brush:php;toolbar:false"> <code> …. …. </code>
程式碼標籤在 HTML 中如何運作？
預設情況下，的內容是標籤字體使用等寬字體顯示，這表示給定內容中的所有字元具有相同的寬度。它在 HTML 5 和 HTML4 標準中都有指定。
HTML 使用各種文字大小以及更多字體和縮排屬性。有一種場景，需要在瀏覽器中顯示一些內容，同時包含文字和程式碼片段，那麼我們就需要使用這個標籤。程式碼標籤與預先格式化標籤 <pre class="brush:php;toolbar:false"> 配對，它保留了來源文件中寫入的文字的確切格式。 </pre>
為了在同一行開始文本，使用了這個標籤，它實際上刪除了空格。為了以字體樣式表示程式碼，最好使用CSS樣式的程式碼選擇器並給出視覺權重。要選擇字體，最好將 CSS 設定為等寬字體。瀏覽器相容性方面，chrome、edge、opera、safari、Firefox 皆支援。即使這個元素也支援事件和全域屬性。程式碼標籤使用預先定義語言的類別屬性以及
此程式碼標籤在實作時使用了一些元素。
-
:定義程式碼片段 - : 解釋變數
- ：拋出電腦輸出
- ：幫助顯示鍵盤輸入
實作 HTML 程式碼標籤的範例
這是程式碼標籤上具有不同樣式的範例。
範例#1
這裡第一個範例程式是顯示程式碼，這形成了基本的內聯概念。
代碼：
<em># Display the sum</em><br>
<strong>program adds two numbers</strong><br>
<pre class="brush:php;toolbar:false">
<code>
nu1 = 2.5
nu2 = 5.3
sum = float(nu1) + float(nu2)
print('The sum of two num {0} and {1} is {2}'.format(nu1, nu2, sum))</code>
output from a program
input
Variable declaration
產生的輸出如下所示，它顯示了程式碼的內容以及使用 的輸出。網頁上的標籤。為了換行片段的多行，電腦程式碼下面使用了元素。
輸出：
使用多個同一程式中的元素。
代碼：
<h1 id="Various-Programming-language">Various Programming language</h1> <h2 id="Java"> Java</h2> <code> import java.io.*;<br> System.out.println(); </code> <h2 id="C-programming">C programming</h2> <code> #include <stdio.h><br> void main()<br> printf() </stdio.h></code>
我們有一個小程式碼快照，在網頁上顯示上述程式碼的 Java 和 C 程式設計範例。
輸出：
範例#2
第二個範例顯示了一個範例程序，該程序以居中對齊方式顯示程式碼。
代碼：
<code> <center> x = 3; y = 2; c = "To add a program"; </center> </code>
輸出：
範例#3
此外，我還包括了
顯示程式以及描述內容的概念（給出語義資訊）。甚至我們可以在它們之間添加任何功能程式碼以提供程式的好處。
代碼：
<h1 id="Demo-of-article-tag">Demo of article tag</h1> <p>The <code> fact()</code> this method is used to calculate a factorial of a given number.</p>
代碼：
code {
background-color: #8A2BE2;
border-radius: 2px;
font-family: "Courier New", monospace;
padding: 0 4px;
}
輸出：
範例#4
使用 href linkOutput 的 html 程式碼格式。
代碼：
<h1 id="Demo-of-code-tag">Demo of code tag</h1> <p>This is an implementaion of a <a href="http://www.educba.com" title="online tutorial"><code>link to edu</code></a> displayed with code tag.</p>
代碼：
code {
background-color: #6495ED;
border-radius: 5px;
font-family: "italic", monospace;
padding: 1 5px;
}
輸出：
範例#5
為了正確地編寫程式碼並查看和閱讀時尚，我們必須使用