Html 如何在网页中添加纯文本代码？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14929223/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to add plain text code in a webpage?
提问by Tom Nolan
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 <p><div></div></p>, I want the div to display in the browser as text not have the browser interpret it as html. Is this complicated to do?
例如，如果我有<p><div></div></p>，我希望 div 在浏览器中显示为文本，而不是让浏览器将其解释为 html。这做起来复杂吗？
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.
我一直在为学校写教程，如果我可以将代码直接以文本形式而不是图像形式添加到网页中，那么学生就可以复制粘贴它会容易得多。
回答by Matt Healy
Look at how this website itself achieves this:
看看这个网站本身是如何实现这一点的：
<p>For example, if I have <code><p><div></div></p></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?</p>
You need to replace the < and > with their HTML character entities.
您需要将 < 和 > 替换为它们的 HTML 字符实体。
回答by Chris
You want to look into something called HTML Entities.
你想研究一个叫做HTML Entities.
If you want the <character to appear on a website, for example, you can write this HTML code: <. These are the five basic HTML Entitiesand their source code equivalents:
<例如，如果您希望该字符出现在网站上，您可以编写以下 HTML 代码：<. 这些是五个基本的HTML Entities及其源代码等效项：
< <
> >
" "
' '
& &
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 (htmlspecialchars()and Server.HtmlEncode, respectively).
如果您使用的是编程语言（例如 PHP 或 ASP.NET），那么可能有一个内置命令可以为您进行转换（分别为htmlspecialchars()和Server.HtmlEncode）。
回答by Majali
There are many ways to use:
有多种使用方法：
Replace
<with<`<h1>This is heading </small></h1>`Place the code inside
</xmp><xmp>tags<xmp> <ul> <li>Coffee</li> <li>Tea</li> </ul> </xmp>
替换
<为<`<h1>This is heading </small></h1>`将代码放在
</xmp><xmp>标签内<xmp> <ul> <li>Coffee</li> <li>Tea</li> </ul> </xmp>
I do not recommend other ways because they do not work on all browsers like <plaintext>or <listing>.
我不推荐其他方式，因为它们不适用于所有浏览器，例如<plaintext>或<listing>。
回答by Nik
To add plain text code in a webpage, we need to do HTML Character Escapingfor these five characters in out text:
要在网页中添加纯文本代码，我们需要对输出文本中的这五个字符进行HTML 字符转义：
< as <
> as >
& as &
' as '
" as "
< as <
> as >
& as &
' as '
" as "
(OR)
（或者）
We can directly use the <xmp>tag like:
我们可以直接使用<xmp>标签，如：
<xmp>Code with HTML Tags like <div> etc. </xmp>
<xmp>tag however disturbs the style and is obsolete.
<xmp>然而，标签扰乱了风格并且已经过时。
回答by Ralph Nelson
Use the tag <PRE>before a block of reformatted text and </PRE>after.
The text between these tags is rendered as monospaced characters with line breaks and spaces at the same points as in the original file. This may be helpful for rendering poetry without adding a lot of HTML code. Try this:
<PRE>在重新格式化的文本块之前和</PRE>之后使用标记。这些标签之间的文本呈现为等宽字符，在与原始文件中相同的点处带有换行符和空格。这可能有助于在不添加大量 HTML 代码的情况下呈现诗歌。尝试这个：
Mary had a little lamb.
Its fleece was white as snow.
And everywhere that Mary went
the lamb was sure to go.
回答by Explosion Pills
Use the html entity/special character of the tag, such as <(for less than)
使用标签的html实体/特殊字符，如<（小于）
<p> in html -> <p> in browser
You could also write <p>since there is no ambiguity about the opening tag.
你也可以写，<p>因为开始标签没有歧义。
Many languages have built in methods to convert HTML special characters such as php's htmlspecialchars
许多语言都内置了转换 HTML 特殊字符的方法，例如 php 的 htmlspecialchars
回答by kufudo
You need to escape the HTML tags, namely the less-than sign. Write it as <and it will appear as < on the HTML page.
您需要转义 HTML 标签，即小于号。将其写为<，它将在 HTML 页面上显示为 <。
回答by Garrett Bodman
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.
我刚刚在 CSS-Tricks 上发现了一个更简单的解决方案......只需让最外层的包装器是一个“pre”标签，然后是一个“code”标签，然后在代码标签内把你的代码放在括号中。
回答by abalter
The simplest way to do it without having to reformat your text using entities is to use JQuery.
无需使用实体重新格式化文本的最简单方法是使用 JQuery。
<div id="container"></div>
<script>
$('#container').text("<div><h1>Hello!</h1><p>I like you.</p></div>");
</script>
If you then do alert($('#container').prop('innerHTML'));, you get <div><h1>Hello!</h1><p>I like you.</p></div>
如果你这样做alert($('#container').prop('innerHTML'));，你会得到<div><h1>Hello!</h1><p>I like you.</p></div>
How useful that technique is depends somewhat on where your material is coming from.
该技术的有用程度在某种程度上取决于您的材料来自何处。
回答by Stonydallas
Your html needs to not be in tags. If you use the <> tags you will have it converted into code not text, if I was to write <br>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 < > (< >)and then you get what you need.
您的 html 不需要在标签中。如果您使用 <> 标签，您会将其转换为代码而不是文本，如果我要写<br>在句子的中间，
那么它会这样做您需要在代码中编写代码，可以这么说，使用 < >(< >)然后你会得到你需要的东西。
