有没有一种 HTML/CSS 方式可以在不解析的情况下显示 HTML 标签？

Is there a HTML/CSS way to display HTML tags without parsing?

提问by Atadj

Is there any way that I could display HTML tags without parsing? Tags like XMPworked before perfectly but now it's replaced with PREthat isn't so cool. Take a look at this example:

有什么方法可以不解析就显示 HTML 标签？像XMP以前一样完美的标签，但现在它被替换了PRE，这不是那么酷。看看这个例子：

//This used to NOT PARSE HTML even if you used standard < and >.
<XMP>
<a hred="http://example.com">Link</a>
</XMP>

//New PRE tag requires &lt; and &gt; as replacement for < and >.
<PRE>
&#60;a href="http://example.com"&#62;Link&#60;/A&#62;
</PRE>

What I'm looking for is equivalent of old XMP tag. New PRE tag will parse code.

我正在寻找的相当于旧的 XMP 标签。新的 PRE 标签将解析代码。

回答by Jukka K. Korpela

You can use a scriptelement with its typeset to denote plain text, and set its displayproperty to block. This only affects the parsing behavior: no markup (tags or entity or character references) is recognized, except for the end tag of the element itself </script>. (So it is not quitethe same as xmp, where the recognized tag is </xmp>.) You can separately make white space handling similar to that of xmpand preand/or set the font the monospace as in those elements by default.

您可以使用script带有typeset的元素来表示纯文本，并将其display属性设置为block。这仅影响解析行为：除了元素本身的结束标记外，不识别任何标记（标记或实体或字符引用）</script>。（所以它不是很一样xmp，这里的认可标签</xmp>。）你可以单独做空白处理类似的xmp和pre和/或设置字体等宽为默认的那些元素。

Example:

例子：

<style>
    script {
        display: block;
    }
</style>

Then within document body:

然后在文档正文中：

<script type="text/plain">
    <i>&eacute;</i>
</script>

Tested on newest versions of IE, Chrome, Firefox, Opera. Didn't work in IE 8 and IE 7 emulation on IE 9, but that's probably a bug in the emulation.

在最新版本的 IE、Chrome、Firefox、Opera 上测试。在 IE 9 上的 IE 8 和 IE 7 仿真中不起作用，但这可能是仿真中的错误。

However, I don't see why you would use this instead of xmp, which hasn't stopped working. It's not in the specs, but if you are worried about that, you should have always been worried. Mentioned in HTML 2.0 (the first HTML spec ever) as avoidable, it was deprecated in HTML 3.2 and completely removed in HTML 4.0 (long ago: in 1997).

但是，我不明白您为什么要使用 this 而不是xmp，它并没有停止工作。它不在规格中，但如果您担心这一点，您应该一直担心。在 HTML 2.0（有史以来第一个 HTML 规范）中提到可以避免，它在 HTML 3.2 中被弃用，并在 HTML 4.0 中完全删除（很久以前：1997 年）。

The xmpis making a comeback rather than dying. The W3C HTML5 (characterized as the current HTML specification by W3C staff) declares xmpas obsolete and non-conforming, but it also imposes a requirementon browsers: “User agents must treat xmpelements in a manner equivalent to preelements in terms of semantics and for purposes of rendering. (The parser has special behavior for this element though.)” The old parsing behavior is thus not explicitly required, but clearly implied.

该xmp正卷土重来，而不是死亡。W3C HTML5（被 W3C 工作人员描述为当前的 HTML 规范）声明xmp为过时和不符合，但它也对浏览器提出了要求：“用户代理必须xmp以与pre元素相同的方式处理元素在语义和目的方面的渲染。（不过，解析器对此元素有特殊的行为。）”因此，旧的解析行为不是明确要求的，而是明确暗示的。

回答by Sean Cassiere

Hey Guys I personally think using the <code> </code>tags only works in Dream Weaver and the tag <xmp> </xmp>never stopped working unless you put in </xmp>it works fine. Using <textarea> </textarea>makes it so that others can edit your code on the website or the page so I recommend that the tag <xmp> </xmp>is still used and that that tag still lives on.

嘿伙计们，我个人认为使用<code> </code>标签只能在 Dream Weaver 中使用，并且标签<xmp> </xmp>永远不会停止工作，除非您放入</xmp>它工作正常。使用<textarea> </textarea>使其他人可以在网站或页面上编辑您的代码，因此我建议您<xmp> </xmp>仍然使用该标签并且该标签仍然存在。

回答by user3133463

The modern way is to use textarea with (boolean) attribute readonly. You could use XMP, but that is deprecated, so it may eventually stop being supported.
example:

现代方法是使用带有（布尔值）属性只读的 textarea。您可以使用 XMP，但它已被弃用，因此它最终可能会停止受支持。
例子：

<textarea readonly='true'>
    <p>This is some text</p>
</textarea>

回答by tjhorner

If you want to be more complex, another way is to create a custom tag using jQuery. For this example, I used <noparse>.

如果想要更复杂，另一种方法是使用 jQuery 创建自定义标记。在这个例子中，我使用了<noparse>.

$('noparse').each(function(){
    if($(this).attr('tagchecked') != 'true'){ //checks if already changed tag
        $(this).text($(this).html()).attr('tagchecked', 'true'); //makes the html into plaintext
    }
});

JSFiddle here

JSFiddle在这里

回答by Quentin

There isn't.

没有。

In theory you could use a CDATA block, but no browser supports that in text/html mode.

理论上你可以使用 CDATA 块，但没有浏览器支持 text/html 模式。

Use character references.

使用字符引用。

回答by morissette

And then... a few years go by, I have the same problem while converting my blog from wordpress to a vuejs spa backed by lambda and dynamodb.

然后……几年过去了，我在将我的博客从 wordpress 转换为由 lambda 和 dynamodb 支持的 vuejs spa 时遇到了同样的问题。

And the answer is; at least in my situation. Escape the entity.

答案是；至少在我的情况下。逃离实体。

<becomes <

<变成 <

>becomes >

>变成 >

etc. etc.

等等等等

Hope this helps.

希望这可以帮助。

回答by Peter Korinek TellusTalk

I suggest using the html iframe tag and put the text you like to display in the src attribute. you only have to url or base64 encode it first.

我建议使用 html iframe 标记并将您喜欢显示的文本放在 src 属性中。你只需要先对它进行 url 或 base64 编码。

example (urlencoded):
<iframe src="data:text/plain,%22%3Chello%3E%22"></iframe>

example (base64):
<iframe src="data:text/plain;base64,IjxoZWxsbz4i"></iframe>

Result displayed as:
"<hello>"

回答by Erik Funkenbusch

Well, one way would be to use jQuery. the jQuery .text() method will encode special characters. And the original un-encoded text will remain if you view source.

嗯，一种方法是使用 jQuery。jQuery .text() 方法将编码特殊字符。如果您查看源代码，原始未编码的文本将保留。

<div id="text">
    <a href="">This is an anchor</a>
</div>

<script>
    var t = $('#text'); t.html(t.text());
</script>

回答by Niet the Dark Absol

Technically you could use <textarea>, but it would require that there be no </textarea>tag in the code you are trying to show. It'd just easier to escape the <.

从技术上讲，您可以使用<textarea>，但它要求</textarea>您尝试显示的代码中没有标签。逃离<.