阻止<a>变成<code>标记中的超链接

Question

我正在尝试添加一个<a>和<img>，这样实际的文本就会出现在我的页面上。而不是链接。

所以我希望实际的HTML显示在我的页面上，如下所示：

目前，一幅死亡图像出现..。我以为只有<code>才能阻止这种情况，而只是展示了简单的html？

无论如何，这是我的当前代码，我希望它能以纯文本形式从字面上回显<a href="/hello"><img style="" src="/hello.png" /></a>。

pre {
    white-space: pre-wrap; /* css-3 */
    white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
    white-space: -pre-wrap; /* Opera 4-6 */
    white-space: -o-pre-wrap; /* Opera 7 */
    word-wrap: break-word; /* Internet Explorer 5.5+ */
    background-color: #f5f5f5;
    margin: 20px;
    padding: 20px;
    color: #f9f9f9;
    background-color: #222;
    text-shadow: 0 1px 0 #000;
    border-radius: 8px;
    border-bottom: 1px solid #555;
    box-shadow: 0 1px 5px rgba(0,0,0,0.4) inset, 0 0 20px rgba(0,0,0,0.2) inset;
    font: 16px/24px 'Courier New', Courier, 'Lucida Sans Typewriter', 'Lucida Typewriter', monospace;
}

<pre>
<code>
<a href="/hello"><img style="" src="/hello.png" /></a>
</code>
</pre>

​

如果以前有人问过这个问题，我很抱歉，但我很难用语言表达我的问题，以找到一个好的答案。

Answer 1

屏幕上有</code></a>标记来打印纯文本(<a href="https://developer.mozilla.org/fr/docs/Web/HTML/Element/plaintext"><code>plaintext</code></a>)，但是这不是最好的选择，使用html实体来键入括号。</div><div>​</div><pre><code>pre { white-space: pre-wrap; /* css-3 */ white-space: -moz-pre-wrap; /* Mozilla, since 1999 */ white-space: -pre-wrap; /* Opera 4-6 */ white-space: -o-pre-wrap; /* Opera 7 */ word-wrap: break-word; /* Internet Explorer 5.5+ */ background-color: #f5f5f5; margin: 20px; padding: 20px; color: #f9f9f9; background-color: #222; text-shadow: 0 1px 0 #000; border-radius: 8px; border-bottom: 1px solid #555; box-shadow: 0 1px 5px rgba(0, 0, 0, 0.4) inset, 0 0 20px rgba(0, 0, 0, 0.2) inset; font: 16px/24px 'Courier New', Courier, 'Lucida Sans Typewriter', 'Lucida Typewriter', monospace; }</code></pre><pre><code>&lt;pre&gt; &lt;code&gt; &lt;xmp&gt; &lt;a href=&quot;/hello&quot;&gt;&lt;img style=&quot;&quot; src=&quot;/hello.png&quot; /&gt;&lt;/a&gt; &lt;/xmp&gt; &lt;/code&gt; &lt;/pre&gt;</code></pre><div>​</div><div>即使这样做有效，<strong>最佳实践也是将</strong> <strong><code>&amp;lt;</code></strong> <strong>和</strong> <strong><code>&gt;</code></strong> <strong>转换为</strong><strong><code>&amp;lt;</code></strong> <strong>&</strong> <strong><code>&amp;gt;</code></strong> ( list <a href="https://www.freeformatter.com/html-entities.html">https://www.freeformatter.com/html-entities.html</a> )，以避免脚本在DOM中出错。</div><div>​</div><pre><code>pre { white-space: pre-wrap; /* css-3 */ white-space: -moz-pre-wrap; /* Mozilla, since 1999 */ white-space: -pre-wrap; /* Opera 4-6 */ white-space: -o-pre-wrap; /* Opera 7 */ word-wrap: break-word; /* Internet Explorer 5.5+ */ background-color: #f5f5f5; margin: 20px; padding: 20px; color: #f9f9f9; background-color: #222; text-shadow: 0 1px 0 #000; border-radius: 8px; border-bottom: 1px solid #555; box-shadow: 0 1px 5px rgba(0, 0, 0, 0.4) inset, 0 0 20px rgba(0, 0, 0, 0.2) inset; font: 16px/24px 'Courier New', Courier, 'Lucida Sans Typewriter', 'Lucida Typewriter', monospace; }</code></pre><pre><code>&lt;pre&gt; &lt;code&gt; &amp;lt;a href=&quot;/hello&quot;&amp;gt;&amp;lt;mg style=&quot;&quot; src=&quot;/hello.png&quot; /&amp;gt;&amp;lt;/a&amp;gt; &lt;/code&gt; &lt;/pre&gt;</code></pre><div>​</div><div></div>

Answer 2

和只处理文本的显示方式.使用单空格字体。(<pre>还有一个额外的优点，就是新行不需要<br/>标记。)

但是，该代码中的任何元素仍将由浏览器按其认为合适的方式呈现。

您需要转义标签中的任何HTML，以便按您所期望的方式显示.

​

pre {
    white-space: pre-wrap; /* css-3 */
    white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
    white-space: -pre-wrap; /* Opera 4-6 */
    white-space: -o-pre-wrap; /* Opera 7 */
    word-wrap: break-word; /* Internet Explorer 5.5+ */
    background-color: #f5f5f5;
    margin: 20px;
    padding: 20px;
    color: #f9f9f9;
    background-color: #222;
    text-shadow: 0 1px 0 #000;
    border-radius: 8px;
    border-bottom: 1px solid #555;
    box-shadow: 0 1px 5px rgba(0,0,0,0.4) inset, 0 0 20px rgba(0,0,0,0.2) inset;
    font: 16px/24px 'Courier New', Courier, 'Lucida Sans Typewriter', 'Lucida Typewriter', monospace;
}

<pre>
<code>
&lt;a href="/hello">&lt;img style="" src="/hello.png" />&lt;/a>
</code>
</pre>

​

注意，您可以同时执行< 和 >，但是您只需要前者才能工作。

Answer 3

尝试为<插入一个<，为>插入一个>。