如何在网页中展示HTML代码且不触发浏览器渲染

问题场景对比 #

当前输出：

注意：使用
来实现换行

预期输出：

注意：使用 <br> 来实现换行

解决方法 #

• 特殊字符实体转义
  浏览器默认会把所有尖括号包裹的内容识别为HTML标签执行，要让标签原样展示，需要把标签的特殊符号替换为HTML字符实体，常用转义规则如下：
  • 左尖括号 < 替换为 <
  • 右尖括号 > 替换为 >
  • 和号 & 替换为 &
    上述问题就是代码里的<br>没有做转义，被浏览器当成实际的换行标签解析了，所以才会出现文字后直接换行、看不到<br>文本的问题，把<br>转义为<br>即可达到预期展示效果。
• 配合代码语义标签使用
  用<pre>和<code>标签包裹转义后的代码内容，既可以保留代码的缩进、换行格式，也能明确告知浏览器该部分内容为代码不需要解析，完整示例如下：

<html>
<head>
</head>
<body>
  注意：使用 <br> 来实现换行
</body>
</html>

内容的提问来源于stack exchange，提问作者Vishal Vishwakarma