logo标签列表

如何在HTML文档中显示HTML标签？

htmlpre
14

我只是想创建像这样的东西：

<strong>blah blah</strong>

我已经尝试了很久，但是不知道为什么每当我加上代码和预格式标签时，它们都不按照应该的方式工作。 它们会取消文本格式 - 我看不到任何格式，尽管这些标签并没有出现。例如，我写下：

<pre><b>abc</b></pre>

abc 文字没有出现加粗，但我无法看到标签本身。我该如何解决？ 我不想使用实体符号，如 &fdaf;，因为我不是在编写输入的文本。

你的问题有些令人困惑。你的输入是什么，显示的结果又是什么？你是想要以粗体打印出“abc”，还是想要同时使用粗体和等宽字体，或者你想要实现什么目标？ - Mario
3
@Mario，我认为这个问题非常清楚。Ariel想要打印“<b>abc</b>”。 - Erik B
1
检查下面来自fuzzyanalysis的解决方案，使用<xmp>标签 - 尽管它甚至不符合HTML 4规范，但它适用于我的目的（不在现网站上显示）。 - Luke
8个回答
25
使用<xmp>标签，例如：e.g.
<xmp>
  <html>
    <body>This is my html inside html.</body>
  </html>
</xmp>

您还可以在<xmp>标签内添加样式和格式。

2
嘿，这个可行！与所有上述必须使用正则表达式或替换的说法相反！ - Luke
10
这是已过时的。 - Michael Cole
19

替换传入的文本为 &lt; 和 &gt; 标签应该在源代码视图中可见，但在“普通视图”中不可见。

3
谢谢你的负评......我的回答并没有错，只是不可能以其他方式完成。如果你想要负评那就负评吧。替换<和>为&lt;和&gt;是必须的，没有其他方法可选。 - Scoregraphic
1
为什么有些人会提问，然后给正确的答案投反对票呢？这是对 HTML 渲染方式的否认，哈哈。 - GBa
@Ariel，我确信这两个答案在技术上都是正确的。一个评论或澄清，表明你正在寻找一种不需要手动操作的解决方案，比一个冷漠的负投票更友好。 - metavida
1
我根本没有给任何东西投反对票。我知道那是答案。为什么要指责我？我刚回来。 - Ariel
9

您可以使用JavaScript来动态更改元素。

如果您使用jQuery：

$( 'pre' ).text( $( 'pre' ).html() );

做到了。
8

就像mkluwe所说的那样，你应该使用JavaScript（或服务器端脚本）来正确地转义任何用户输入。这里有另一个JavaScript函数可以尝试：

String.prototype.escapeHTML = function () {                                        
  return(                                                                 
    this.replace(/>/g,'&gt;').
         replace(/</g,'&lt;').
         replace(/"/g,'&quot;')
  );
};
var codeEl = document.getElementById('test');
if (codeEl) {
  codeEl.innerHTML = codeEl.innerHTML.escapeHTML();
}

我没有在IE中测试过这个代码，但理论上它应该可以工作。你可以在以下页面查看结果：http://jsbin.com/oruri5/2/edit

@CyleHunter 同意！在服务器端完成这个任务是我的首选和建议。然而，我想提出一个带有可工作代码的解决方案，由于我不知道 Ariel 的设置是否允许服务器端代码，所以我选择了 JS。 - metavida
抱歉问一个非常基础的问题：是否可以在包含在 <script type="text/javascript"></script> 标签内的页面的任何位置中包含它？而且这种方法在现代浏览器中仍然有效吗？ - FlorianL
5
我知道的最简单的方法是用&lt;和&gt;替换<和>，这样它就不再是html了。还有几个类似于&符号的代码等等。
文本从哪里来？如果是在javascript中，那么你最简单的方法就是在javascript中进行正则表达式替换。
1
不要使用<xmp>、<plaintext>和<listing>，如MDN所建议：
使用<pre>元素或者如果语义上合适，使用<code>元素。请注意，您需要将<字符转义为&lt;以确保它不被解释为标记。
1

你必须写像 &fdaf 这样的东西，因为浏览器拒绝相信你对所有内容都是指 <pre>。这是正确的行为，否则你怎么能从 <pre> 部分中逃脱呢？你必须遍历文档，并为每个小于号替换为 &lt;。通常情况下，你不需要为大于号或和符号进行替换。

哦，我明白了。你不想相信一个正确的答案，所以你给它投了反对票。 - Pete Wilson
0

在@mkluwe的回答基础上，这里有一个例子：

<html>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js">        </script>
  </head>
  <body>
    <pre>
      <a href="http://localhost:3000/l/1/2/3" target="_blank">
        <img src="http://localhost:3000/b/1/2/3/4" target="_blank">
      </a>
    </pre>
    <script>
      $( 'pre' ).text( $( 'pre' ).html() );
    </script>
  </body>
</html>
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接