如何在 HTML 中將 HTML 標籤顯示為純文字?


HTML 標籤用於定義網頁結構。各種型別的標籤可用於處理HTML中的文字。在本文中,我們將使用純文字標籤在輸出中顯示 HTML 標籤。本文中使用的示例將幫助您瞭解如何在各種情況下使用此純文字標籤來將 HTML 標籤顯示為純文字。

以下是將 HTML 文字顯示為純文字的 HTML 實體:

語法

<plaintext>...write the HTML tags</plaintext>

純文字是一種允許在輸出中列印 HTML 標籤的標籤。一旦標籤開始,它就不需要結束標籤。如果我們使用結束標籤,那麼它也將列印在輸出中。

使用的屬性

示例中使用的屬性如下:

示例 1

在這個示例中,我們將對元素(即 bodyh1pre)設定一些樣式。pre 元素定義預格式化的文字,並透過在標籤內提供前後空格來設定多個 HTML 元素。這將把 HTML 標籤表示為 HTML 中的純文字。

<!DOCTYPE html>
<html>
<head>
   <title>Plain text </title>
</head>
<body style="background-color: yellow;">
   <h1 style="text-align: center;">Display the html text as plain text</h1>
   <pre style="font-weight: bold; font-size:22px; color: green;">
      Paragraph element: < p > < /p >
      Body element: < body > < /body >
      Center element: < center > < /center >
      Highlight the text: < mark > < /mark >
      Bold text: < b > < /b >
      Ordered list: < ol > < /ol >
      Unordered list: < ul > < /ul >
      Heading element: < h1 > < /h1 >
      Title element: < title > < /title >
      Description list: < dl > < /dl >
      Break tag: < br >
      Horizontal tag: < hr >
   </pre>
</body>
</html>

示例 2

在這個示例中,我們將使用 h1 元素設定問題陳述的主要標題,並使用內聯 CSS 的 text-align 屬性使標題居中。然後使用純文字元素將多個 HTML 元素設定為純文字,並在網頁中獲取輸出。

<!DOCTYPE html>
<html>
<head>
   <title>Plain text </title>
</head>
<body style=>
   <h1 style="text-align:center;">Display the html text as plain text</h1>
   <plaintext style="font-size:20px;">
   <p>Paragraph element</p>
   <body>Body element</body>
   <center>Center element</center>
   <mark>Highlight the text</mark>
   <b>Bold text</b>
   <ol>Ordered list</ol>
   <ul>Unordered list</ul>
   <h1>Heading element</h1>
   <title>Title element</title>
   <dl>Description list</dl>
</body>
</html>

示例 3

在這個示例中,我們將使用以下 HTML 字元:即 < 用於設定標籤的開頭“<”和 > 用於設定標籤的結尾“>”。還將使用更多字元進行標點符號。例如,“”用於在文字中設定雙引號。所有這些步驟都涵蓋了 HTML 中將 HTML 標籤顯示為純文字。

<!DOCTYPE html>
<html>
<title> HTML entities </title>
<head>
</head>
<body>
   <pre>
      <h1> This is the HTML text as plain text </h1>
      <p> This is paragraph </p>
      <center> This is center </center>
      <ul>
         <li> list1 </li>
         <li> list2 </li>
         <li> " list3 " </li> 
         <li> " list4 " </li>
         <li> list5 </li>
      </ul>
   </pre>
</body>
</html>

結論

我們看到了將 HTML 文字顯示為純文字的三個示例之間的區別。第一個示例透過在標籤內使用一些空格來顯示 HTML 的純文字,第二個示例使用純文字標籤來顯示 HTML 標籤。最後,第三個示例使用 HTML 實體來顯示純文字作為 HTML 文字。

更新於:2023年11月12日

3K+ 次瀏覽

啟動您的 職業生涯

完成課程後獲得認證

開始學習
廣告