如何将 html 代码放入 html 的代码块中？ [复制]答案

【问题标题】：How do I put html code in code blocks in html? [duplicate]如何将 html 代码放入 html 的代码块中？ [复制]
【发布时间】：2020-12-10 12:02:00
【问题描述】：

就像我想要一个像下面这样的代码块。

  <div>
     abcd
  </div>

当我将它附在 pre 下时，它什么也不做。

我在谷歌上搜索并找到了这个“如果你想使用包含 HTML 的代码示例，你必须为你的使用 HTML 实体。如果你不这样做，它将被解释为实际的 HTML。”

虽然不知道是什么意思

【问题讨论】：

标签： html

【解决方案1】：

有很多方法可以做到这一点。在这篇文章中，我将为您提供一些定义和示例。

使用 HTML 特殊字符

<code>
   &lt;div class=&quot;div_class&quot;&gt; <br>
         &nbsp;&nbsp;&nbsp;abcd <br>
   &lt;/div&gt;
</code>

&lt; 代表less-than sign：<
&gt; 代表greater-than sign：>

使用 ASCII 字符集

<code>
   &#60;div class&#61;&#34;div_class&#34;&#62; <br>
         &nbsp;&nbsp;&nbsp;abcd <br>
   &#60;&#47;div&#62;
</code>

&#47; 代表slash sign：/
&#60; 代表less-than sign：<
&#62; 代表greater-than sign：>

参见参考here

仅使用 HTML

<code>
   <span><</span>div class="div_class"<span>></span> <br>
         &nbsp;&nbsp;&nbsp;abcd <br>
   <span></</span>div<span>></span>
</code>

完全使用 ASCII 字符集

<code>
   &#60;&#100;&#105;&#118; &#99;&#108;&#97;&#115;&#61;&#34;&#100;&#105;&#118;&#95;&#99;&#108;&#97;&#115;&#34;&#62; <br>
         &nbsp;&nbsp;&nbsp;&#97;&#98;&#99;&#100; <br>
   &#60;&#47;&#100;&#105;&#118;&#62;
</code>

&#47; 代表slash sign：/
&#60; 代表less-than sign：<
&#62; 代表greater-than sign：>
&#97; 代表character A：a
&#98; 代表character B：b
&#99; 代表character C：c
&#100; 代表character D：d
&#105; 代表character I：i
&#118; 代表character V：v

参见参考here

【讨论】：

【解决方案2】：

<pre class="default prettyprint prettyprinted" style="">
 <code>
  <span class="pln"></span>
  <span class="tag">&lt;div&gt;</span>
  <span class="pln">abcd</span>
  <span class="tag">&lt;/div&gt;</span>
 </code>
</pre>

这是 StackoverFlow 制作的 HTML 代码。

如果您想自动编写代码，最好的解决方案是使用 JavaScript 处理从后端获取的纯文本数据。

比如用 Markdown：

data = Markdown(data)
$(".Markdown-div").html(data)

【讨论】：

【解决方案3】：

某些字符在 HTML 中是保留的。如果您在文本中使用小于 () 符号，浏览器可能会将它们与标签混合。字符实体用于显示 HTML 中的保留字符。

要显示小于号 (< 或 &#60; 要显示小于号 (< 或 &#62; 以下是其他一些参考资料，https://dev.w3.org/html5/html-author/charref

所以，如果你想在你的 HTML 输出中显示，你必须写 &lt;html&#gt; 或 &60;html&#62; 例如

<body>
This is a sample &#60;html&#62; 
</body>

【讨论】：

【解决方案4】：

请试试这个代码：

<code>
  &lt;div&gt; <br />
  abcd
 <br /> &lt;/div&gt; 
  </code>

【讨论】：