如何在 HTML 中将 HTML 标签显示为纯文本?

htmlweb developmentfront end technology更新于 2024/7/3 8:12:17

HTML 标签用于定义网页结构。各种类型的标签都可用于处理 HTML 中的文本。在本文中，我们将使用纯文本标签在输出中显示 HTML 标签。本文中的示例将帮助您了解如何以各种方式使用此纯文本标签将 HTML 标签显示为纯文本。

以下是将 HTML 文本显示为纯文本的 HTML 实体 -

语法

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

纯文本是一种允许在输出中打印 HTML 标签的标签类型。标签一旦开始，就不需要结束标签。如果我们使用了结束标签，那么它也会在输出中打印出来。

使用的属性

示例中使用的属性如下:-

background-color - 定义正文的背景颜色。
text-align - 定义文本的水平对齐方式。

示例 1

在此示例中，我们将为元素(即 body、h1 和 pre)设置一些样式。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 属性使其居中。然后使用 plaintext 元素将多个 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 标签视为纯文本。

<!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>