如何在 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+ 次浏览

启动您的 职业生涯

完成课程后获得认证

开始学习
广告
© . All rights reserved.