HTML 程式碼標籤

PHPz原創: 2024-09-04 16:28:53811瀏覽

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

這裡第一個範例程式是顯示程式碼，這形成了基本的內聯概念。

代碼：

<!DOCTYPE html>
<html>
<body>
<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

產生的輸出如下所示，它顯示了程式碼的內容以及使用 的輸出。網頁上的標籤。為了換行片段的多行，電腦程式碼

下面使用了元素。

輸出：

HTML 程式碼標籤

使用多個同一程式中的元素。

代碼：

<!DOCTYPE html>
<html>
<body>
<h1>Various Programming language</h1>
<h2> Java</h2>
<code>
import java.io.*;<br>
System.out.println();
</code>
<h2>C programming</h2>
<code>
#include <stdio.h><br>
void main()<br>
printf()
</code>
</body>
</html>

我們有一個小程式碼快照，在網頁上顯示上述程式碼的 Java 和 C 程式設計範例。

輸出：

HTML 程式碼標籤

範例#2

第二個範例顯示了一個範例程序，該程序以居中對齊方式顯示程式碼。

代碼：

<!DOCTYPE html>
<html>
<body>
<code>
<center>
x = 3;
y = 2;
c = "To add a program";
</center>
</code>
</body>
</html>

輸出：

HTML 程式碼標籤

範例#3

此外，我還包括了

顯示程式以及描述內容的概念（給出語義資訊）。甚至我們可以在它們之間添加任何功能程式碼以提供程式的好處。

代碼：

<!DOCTYPE html>
<h1>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;
}

輸出：

HTML 程式碼標籤

範例#4

使用 href linkOutput 的 html 程式碼格式。

代碼：

<!DOCTYPE html>
<h1>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;
}

輸出：

HTML 程式碼標籤

範例#5

為了正確地編寫程式碼並查看和閱讀時尚，我們必須使用