blocks|key|5108821|text|看看这个网站本身是如何做到这一点的：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|5108822|For+example,+if+I+have+<code>&lt;p&gt;&lt;div&gt;&lt;/div&gt;&lt;/p&gt;</code>,+I+want+the+div+to+display+in+the+browser+as+text+not+have+the+browser+interpret+it+as+html.+Is+this+complicated+to+do?|code-block|syntax|javascript|5108823|您需要将<和>替换为其HTML字符实体。|5108824|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

Look at how this website itself achieves this:

<pre><code>&lt;p&gt;For example, if I have &lt;code&gt;&amp;lt;p&amp;gt;&amp;lt;div&amp;gt;&amp;lt;/div&amp;gt;&amp;lt;/p&amp;gt;&lt;/code&gt;, I want the div to display in the browser as text not have the browser interpret it as html. Is this complicated to do?&lt;/p&gt;
</code></pre>

You need to replace the &lt; and > with their HTML character entities.

blocks|key|5109038|text|有很多方法可以使用：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|5109039|5109040|将<替换为&lt;|ordered-list-item|offset|length|style|CODE|5109041|5109042|对</xmp><xmp>标记中的代码执行&lt;h1>This+is+heading+&lt;/small>&lt;/h1>|5109043|Place|unordered-list-item|5109044|5109045|咖啡茶|5109046|我不推荐使用其他方法，因为它们并不适用于所有浏览器，如<plaintext>或<listing>。|5109047|entityMap^0|0|0|1|1|5|4|0|0|1|B|K|16|0|0|0|0|R|B|13|9|0^^$0|@$1|2|3|4|5|6|7|W|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|X|8|@]|9|@]|A|$]]|$1|C|3|D|5|E|7|Y|8|@$F|Z|G|10|H|I]|$F|11|G|12|H|I]]|9|@]|A|$]]|$1|J|3|-4|5|6|7|13|8|@]|9|@]|A|$]]|$1|K|3|L|5|6|7|14|8|@$F|15|G|16|H|I]|$F|17|G|18|H|I]]|9|@]|A|$]]|$1|M|3|N|5|O|7|19|8|@]|9|@]|A|$]]|$1|P|3|-4|5|6|7|1A|8|@]|9|@]|A|$]]|$1|Q|3|R|5|6|7|1B|8|@]|9|@]|A|$]]|$1|S|3|T|5|6|7|1C|8|@$F|1D|G|1E|H|I]|$F|1F|G|1G|H|I]]|9|@]|A|$]]|$1|U|3|-4|5|6|7|1H|8|@]|9|@]|A|$]]]|V|$]]

There are many ways to use: 

<ol>
<li>Replace <code>&lt;</code> with <code>&amp;lt;</code>

<pre><code>`&amp;lt;h1&gt;This is heading &amp;lt;/small&gt;&amp;lt;/h1&gt;`
</code></pre></li>
<li>Place the code inside <code>&lt;/xmp&gt;&lt;xmp&gt;</code> tags

<pre><code>&lt;xmp&gt;
 &lt;ul&gt;
 &lt;li&gt;Coffee&lt;/li&gt;
 &lt;li&gt;Tea&lt;/li&gt;
 &lt;/ul&gt;
&lt;/xmp&gt;
</code></pre></li>
</ol>

I do not recommend other ways because they do not work on all browsers like <code>&lt;plaintext&gt;</code> or <code>&lt;listing&gt;</code>.

blocks|key|1758829|text|您需要研究一下名为HTML+Entities的东西。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1758830|例如，如果你想让<字符出现在网站上，你可以编写这样的代码：&lt;。以下是五个基本的HTML+Entities及其源代码等价物：|1758831|<+&lt;
>+&gt;
"+&quot;
'+&apos;
&+&amp;|code-block|syntax|javascript|1758832|如果您使用的是编程语言(如PHP或ASP.NET)，那么可能有一个内置命令可以为您执行转换(分别是htmlspecialchars()和Server.HtmlEncode+)。|1758833|entityMap^0|9|D|0|8|1|T|4|16|D|0|0|1D|I|1W|H|0^^$0|@$1|2|3|4|5|6|7|Q|8|@$9|R|A|S|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|T|8|@$9|U|A|V|B|C]|$9|W|A|X|B|C]|$9|Y|A|Z|B|C]]|D|@]|E|$]]|$1|H|3|I|5|J|7|10|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|6|7|11|8|@$9|12|A|13|B|C]|$9|14|A|15|B|C]]|D|@]|E|$]]|$1|O|3|-4|5|6|7|16|8|@]|D|@]|E|$]]]|P|$]]

You want to look into something called <code>HTML Entities</code>.

If you want the <code>&lt;</code> character to appear on a website, for example, you can write this HTML code: <code>&amp;lt;</code>. These are the five basic <code>HTML Entities</code> and their source code equivalents:

<pre><code>&lt; &amp;lt;
&gt; &amp;gt;
" &amp;quot;
' &amp;apos;
&amp; &amp;amp;
</code></pre>

If you are using a programming language (such as PHP or ASP.NET), then there is probably a built-in command that will do the conversion for you (<code>htmlspecialchars()</code> and <code>Server.HtmlEncode</code>, respectively).

blocks|key|5593113|text|要在网页中添加纯文本代码，需要使用五个字符对HTML字符进行转义：|type|unstyled|depth|inlineStyleRanges|offset|length|style|BOLD|entityRanges|data|5593114|<+as+&lt;|CODE|5593115|>+as+&gt;|5593116|&+as+&amp;|5593117|'+as+&apos;|5593118|"+as+&quot;|5593119|(或)|5593120|<xmp>标签也可以作为替代，这个标签干扰了样式并且已经过时了。|5593121|<xmp>Code+with+HTML+Tags+like+<div>+etc.+</xmp>|code-block|syntax|javascript|5593122|entityMap^0|M|A|0|0|9|0|0|9|0|0|A|0|0|B|0|0|B|0|0|0|5|0|0^^$0|@$1|2|3|4|5|6|7|11|8|@$9|12|A|13|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|14|8|@$9|15|A|16|B|H]]|D|@]|E|$]]|$1|I|3|J|5|6|7|17|8|@$9|18|A|19|B|H]]|D|@]|E|$]]|$1|K|3|L|5|6|7|1A|8|@$9|1B|A|1C|B|H]]|D|@]|E|$]]|$1|M|3|N|5|6|7|1D|8|@$9|1E|A|1F|B|H]]|D|@]|E|$]]|$1|O|3|P|5|6|7|1G|8|@$9|1H|A|1I|B|H]]|D|@]|E|$]]|$1|Q|3|R|5|6|7|1J|8|@]|D|@]|E|$]]|$1|S|3|T|5|6|7|1K|8|@$9|1L|A|1M|B|H]]|D|@]|E|$]]|$1|U|3|V|5|W|7|1N|8|@]|D|@]|E|$X|Y]]|$1|Z|3|-4|5|6|7|1O|8|@]|D|@]|E|$]]]|10|$]]

To add plain text code in a webpage, HTML Character Escaping is needed on five characters:
<code>
&lt; as &amp;lt; &gt; as &amp;gt; &amp; as &amp;amp; &apos; as &amp;apos; &quot; as &amp;quot;</code>
(OR)
<code>&lt;xmp&gt;</code> tag may also be used as an alternate, this tag disturbs the style and is obsolete.
<pre><code>&lt;xmp&gt;Code with HTML Tags like &lt;div&gt; etc. &lt;/xmp&gt;
</code></pre>

blocks|key|1758718|text|使用标记的html实体/特殊字符，例如&lt;+(表示小于)|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1758719|&lt;p&gt;+in+html+->++in+browser|code-block|syntax|javascript|1758720|您也可以编写&lt;p>，因为开始标记没有歧义。|1758721|许多语言都内置了转换超文本标记语言特殊字符的方法，比如php的htmlspecialchars|1758722|entityMap^0|J|4|0|0|6|6|0|V|G|0^^$0|@$1|2|3|4|5|6|7|Q|8|@$9|R|A|S|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|T|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|U|8|@$9|V|A|W|B|C]]|D|@]|E|$]]|$1|M|3|N|5|6|7|X|8|@$9|Y|A|Z|B|C]]|D|@]|E|$]]|$1|O|3|-4|5|6|7|10|8|@]|D|@]|E|$]]]|P|$]]

Use the html entity/special character of the tag, such as <code>&amp;lt;</code> (for less than)

<pre><code>&amp;lt;p&amp;gt; in html -&gt; &lt;p&gt; in browser
</code></pre>

You could also write <code>&amp;lt;p&gt;</code> since there is no ambiguity about the opening tag.

Many languages have built in methods to convert HTML special characters such as php's <code>htmlspecialchars</code>

blocks|key|5108850|text|您需要转义HTML标记，即小于号。将其编写为&lt;，它将在HTML页面上显示为<。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|5108851|entityMap^0|M|4|0^^$0|@$1|2|3|4|5|6|7|H|8|@$9|I|A|J|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|K|8|@]|D|@]|E|$]]]|G|$]]

You need to escape the HTML tags, namely the less-than sign. Write it as <code>&amp;lt;</code> and it will appear as &lt; on the HTML page.

blocks|key|643346|text|您的html不需要在标签中。如果我在句子中间编写<>，如果您使用 标记，您会将其转换为代码而不是文本|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|643347|然后它会这样做，你将需要用代码编写代码，可以说，使用<>+(&lt;+&gt;)，然后你就可以得到你需要的东西。|643348|entityMap^0|W|4|0|T|B|0^^$0|@$1|2|3|4|5|6|7|J|8|@$9|K|A|L|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|M|8|@$9|N|A|O|B|C]]|D|@]|E|$]]|$1|H|3|-4|5|6|7|P|8|@]|D|@]|E|$]]]|I|$]]

Your html needs to not be in tags. If you use the &lt;> tags you will have it converted into code not text, if I was to write <code>&lt;br&gt;</code> in the middle of a sentence then it would do this You will need to Write the code in code so to speak, using the &lt; &gt; <code>(&amp;lt; &amp;gt;)</code>
and then you get what you need.

blocks|key|643372|text|我刚刚在CSS-Tricks发现了一个简单得多的解决方案...只需让您的最外层的包装器是一个'pre‘标签，然后是一个'+code’标签，然后在code标签内将您的代码放在括号中。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|643373|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

I just discovered a much simpler solution at CSS-Tricks...
Just have your outer-most wrapper be a 'pre' tag, followed by a 'code' tag, then inside the code tag put your code in paranthesis.

blocks|key|643727|text|无需使用实体重新格式化文本的最简单方法就是使用JQuery。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|643728|<div+id="container"></div>

<script>
++++$('#container').text("<div><h1>Hello!</h1>I+like+you.</div>");
</script>|code-block|syntax|javascript|643729|如果您随后执行alert($('#container').prop('innerHTML'));，则会得到&lt;div&gt;&lt;h1&gt;Hello!&lt;/h1&gt;&lt;p&gt;I+like+you.&lt;/p&gt;&lt;/div&gt;|offset|length|style|CODE|643730|这种技术有多有用，在一定程度上取决于你的材料来自哪里。|643731|entityMap^0|0|0|7|15|1H|28|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|S|8|@$I|T|J|U|K|L]|$I|V|J|W|K|L]]|9|@]|A|$]]|$1|M|3|N|5|6|7|X|8|@]|9|@]|A|$]]|$1|O|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]]|P|$]]

The simplest way to do it without having to reformat your text using entities is to use JQuery.

<pre><code>&lt;div id="container"&gt;&lt;/div&gt;

&lt;script&gt;
 $('#container').text("&lt;div&gt;&lt;h1&gt;Hello!&lt;/h1&gt;&lt;p&gt;I like you.&lt;/p&gt;&lt;/div&gt;");
&lt;/script&gt;
</code></pre>

If you then do <code>alert($('#container').prop('innerHTML'));</code>, you get <code>&amp;lt;div&amp;gt;&amp;lt;h1&amp;gt;Hello!&amp;lt;/h1&amp;gt;&amp;lt;p&amp;gt;I like you.&amp;lt;/p&amp;gt;&amp;lt;/div&amp;gt;</code>

How useful that technique is depends somewhat on where your material is coming from.

blocks|key|5109101|text|使用iframe和txt文件：<iframe+src="html.txt"></iframe>|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|5109102|entityMap^0|F|W|0^^$0|@$1|2|3|4|5|6|7|H|8|@$9|I|A|J|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|K|8|@]|D|@]|E|$]]]|G|$]]

Use iframe and txt file:
<code>&lt;iframe src="html.txt"&gt;&lt;/iframe&gt;</code>

I know it is possible because this website does it, but I tried researching how and just got a bunch of junk, so how do I add tags to a website paragraph without the browser interpreting it as code.

For example, if I have <code>&lt;p&gt;&lt;div&gt;&lt;/div&gt;&lt;/p&gt;</code>, I want the div to display in the browser as text not have the browser interpret it as html. Is this complicated to do?

I have been writing tutorials for school, and it would be much easier if I could add the code directly to the webpage in text form instead of images, so students can copy and paste it.

How to add plain text code in a webpage?

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

我知道这是可能的，因为这个网站就是这么做的，但我试着研究了一下是怎么做的，结果得到了一堆垃圾，那么我如何在网站段落中添加标签，而不是浏览器将其解释为代码。例如，如果我有<div></div>，我希望div在浏览器中显示为文本，而不是让浏览器将其解释为html。这很复杂吗？我一直在为学校编写教程，如果我可以将代码直接以文本形式添加到网页中，而不是图像，这样学生就可以复制和粘贴它，这会容

问如何在网页中添加纯文本代码？
EN

回答 10

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在网页中添加纯文本代码？EN

回答 10

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在网页中添加纯文本代码？
EN