HTML 樣本標籤-html教學-PHP中文網

實作 HTML samp 標籤的範例

範例#4

結論

首頁

web前端

html教學

HTML 樣本標籤

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Sep 04, 2024 pm 04:25 PM

html html5 HTML Tutorial HTML Properties HTML tags

通常需要在網頁上以適當的字體樣式和格式的文字顯示程式或原始程式碼的輸出，這將正確表示輸出的範例。 HTML 提供了短語標籤來表示具有一定結構意義的文字區塊。 samp 是 HTML 中提供的標籤之一，用於以適當的格式表示程式或腳本的輸出樣本。使用此標籤，可以將文字顯示為程式的範例輸出，而無需使用任何外部 CSS 或樣式元件。

文法：

就像Html中的其他短語標籤一樣，samp標籤的語法非常簡單。以下是 samp 標籤的語法，

<samp> . . . . . </samp>

登入後複製

samp 標籤的語法以起始標籤 開頭。並以結束標記 結束。兩個標籤之間的空格將包含我們想要顯示為程式或腳本輸出的文本，如下所示，

<samp> Sample of output of a program or script text. . . </samp>

登入後複製

屬性：

samp 標籤沒有任何可用的特定屬性或特殊屬性，但它支援 HTML 中現有的可用全域屬性和事件屬性。

實作 HTML samp 標籤的範例

samp標籤預設會以內嵌方式顯示內容，並且通常使用瀏覽器支援的等寬字體顯示其中的文字。

範例#1

我們先來看看 samp 標籤實作的簡單範例。

代碼：




 samp tag in HTML 


<samp> Sample of output of a program or script text. . . </samp>

登入後複製

輸出：

HTML 樣本標籤

在這裡，我們有簡單的標籤樣本，其中包含範例文字。輸出會自動以等寬字型列印。

範例#2

讓我們將使用 samp 標籤產生的文字輸出與普通文字進行比較。

代碼：

<!DOCTYPE html>
<html>
<head>
<title> samp tag in HTML </title>
<style>
.sample {
font-family: monospace;
}
</style>
</head>
<body>
<samp> Sample of output of a program or script text using samp tag. . . </samp>
<br>
<br>
<div> Sample of output of a program or script text without using samp tag </div>
<br>
<div class = "sample"> Sample of output of a program or script text without using samp tag,
<br> but with font family as monospace </div>
</body>
</html>

登入後複製

輸出：

HTML 樣本標籤

在這裡，我們使用三種不同的樣式顯示輸出。在正文標籤中，我們基本上有三行文本，將使用不同的樣式進行列印。第一個輸出是使用與第一個範例類似的 samp 標籤。然後我們將其輸出與普通文字進行比較，可以在第二行中看到。在第三行中，我們使用了樣式元素來實現與 samp 元素相同的效果。我們將樣式用作等寬字體系列，它將顯示類似於 samp 標籤的輸出。

請注意我們如何使用一些 CSS 樣式來實現類似 samp 標籤的效果。在網站開發中，不強制建議使用 samp 標籤，因為使用現代 CSS 樣式元素可以達到相同的效果。我們在現代網站開發中使用它們可以達到比samp標籤更好的效果。這並不意味著不建議使用 samp 標籤，而是取決於網站開發人員的選擇；它可以用在可以使用非常簡單的標籤實現效果的地方，而無需使用任何複雜的樣式。

範例#3

也可以在 samp 標籤上套用 CSS 效果，因為它已經支援全域屬性，如前面所解釋的。讓我們在範例中現有的 samp 元素中添加一些 CSS 樣式。

代碼：

<!DOCTYPE html>
<html>
<head>
<title> samp tag in HTML </title>
<style>
.sample {
font-family: monospace;
}
samp {
font-weight: bold;
}
</style>
</head>
<body>
<samp> Sample of output of a program or script text using samp tag. . . </samp>
<br>
<br>
<div> Sample of output of a program or script text without using samp tag </div>
<br>
<div class = "sample"> Sample of output of a program or script text without using samp tag,
<br> but with font family as monospace </div>
</body>
</html>

登入後複製

輸出:

HTML 樣本標籤

在這裡，我們將字體粗細套用到 samp 標籤的現有樣式。也可以使用其他 CSS 樣式元素（例如字體樣式、字體系列、顏色屬性等）來修改 samp 標籤的樣式。

範例#4

讓我們使用一些有趣的樣式效果來展示如何實現程式輸出的獨特樣式。

代碼：

<!DOCTYPE html>
<html>
<head>
<title> samp tag in HTML </title>
<style>
.sample {
font-family: monospace;
}
samp {
font-weight: bold;
letter-spacing: 2px;
color: green;
}
</style>
</head>
<body>
<samp> Sample of output of a program or script text using samp tag. . . </samp>
<br>
<br>
<div> Sample of output of a program or script text without using samp tag </div>
<br>
<div class = "sample"> Sample of output of a program or script text without using samp tag,
<br> but with font family as monospace </div>
</body>
</html>

登入後複製

輸出：

HTML 樣本標籤