举例说明如何原样输出HTML代码，不被浏览器解析？

在前端开发中，有时我们可能希望输出一些HTML代码，但是不希望这些代码被浏览器解析执行，而是希望它们以纯文本的形式显示出来。这通常用于展示HTML代码示例或者教学场景。为了实现这一目的，我们可以使用以下几种方法：

1. 使用HTML实体

将HTML代码中的特殊字符（如<、>、"等）替换为对应的HTML实体。这样，浏览器就不会将这些字符识别为HTML标签，而是将它们作为普通文本显示。

例如，要将<p>Hello, World!</p>这段代码原样输出，可以将其转换为：

<p>Hello, World!</p>

在HTML中，<代表小于号<，>代表大于号>。

<pre>标签用于展示预格式化的文本。文本在<pre>标签中会保持原始的空格和换行符。以等宽字体的形式原样输出。

例如：

;/p&gt;</code></pre>

HTML代码中的特殊字符转换为HTML实体，以防止浏览器解析它们。

3. 使用JavaScript动态插入文本

通过JavaScript将HTML代码作为文本插入到DOM中，也可以避免浏览器的解析。你可以创建一个文本节点，并将其插入到某个元素中。

例如：

<div id="output"></div>

<script>
  const outputDiv = document.getElementById('output');
  const htmlCode = '<p>Hello, World!</p>';
  const textNode = document.createTextNode(htmlCode.replace(/</g, '&lt;').replace(/>/g, '&gt;'));
  outputDiv.appendChild(textNode);
</script>

在这个例子中，我们首先获取了一个ID为output的<div>元素。然后，我们定义了一个包含HTML代码的字符串htmlCode。接着，我们使用replace方法将字符串中的<和>字符替换为对应的HTML实体。最后，我们创建了一个文本节点，并将其插入到<div>元素中。

4. 使用CSS控制显示

虽然CSS主要用于样式控制，但你也可以利用它来辅助显示HTML代码。例如，你可以使用white-space: pre;来保留文本中的空格和换行符。不过，这种方法通常与其他方法结合使用，而不是单独使用。

总的来说，为了原样输出HTML代码而不被浏览器解析，最常见且有效的方法进行展示。