介绍
在HTML开发中，经常需要用到HTML代码直接展示的场景，比如博客中展示代码示例，官方文档中展示HTML代码等场景。本文将介绍如何在HTML中直接展示HTML代码。
使用<code>标签
介绍
<code>标签是HTML5新增的行内元素，用于表示计算机代码或者其他机器可以理解的内容。使用该标签包裹HTML代码即可实现直接展示效果。
语法
<code>
<p>这是HTML代码</p>
<a href="http://example.com">链接</a>
</code>
效果
使用<code>标签包裹HTML代码，可以得到下面的效果：
<p>这是HTML代码</p>
<a href="http://example.com">链接</a>
使用<pre>标签
介绍
<pre>标签也是HTML5中的元素，用于表示预定义格式的文本，通常用于展示计算机代码。使用该标签包裹HTML代码可以得到直接展示效果。
语法
<pre>
<p>这是HTML代码</p>
<a href="http://example.com">链接</a>
</pre>
效果
使用<pre>标签包裹HTML代码，可以得到下面的效果：
<p>这是HTML代码</p>
<a href="http://example.com">链接</a>
使用<xmp>标签
介绍
<xmp>标签是HTML4时期的元素，用于表示预定义格式的文本，同样可以用于展示计算机代码。使用该标签包裹HTML代码可以得到直接展示效果。
语法
<xmp>
<p>这是HTML代码</p>
<a href="http://example.com">链接</a>
</xmp>
效果
使用<xmp>标签包裹HTML代码，可以得到下面的效果：
<p>这是HTML代码</p>
<a href="http://example.com">链接</a>
使用<textarea>标签
介绍
<textarea>标签用于表示多行的文本输入控件，但是它也可以用来展示HTML代码。
语法
<textarea>
<p>这是HTML代码</p>
<a href="http://example.com">链接</a>
</textarea>
效果
使用<textarea>标签包裹HTML代码，可以得到下面的效果：
使用第三方库
介绍
除了以上的几种方法外，还可以使用第三方库来实现直接展示HTML代码的效果，比如Google的
<pre><code>语法
首先需要引入Google Fonts和
<pre><code><link href="https://fonts.googleapis.com/css?family=Roboto+Mono" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.rawgit.com/google/code-prettify/master/styles/sunburst.css" />
<script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js"></script>
然后使用<pre class="prettyprint"><code class="language-html">标签包裹HTML代码即可实现直接展示效果。
<pre class="prettyprint"><code class="language-html">
<p>这是HTML代码</p>
<a href="http://example.com">链接</a>
</code></pre>
效果
使用Google的
<pre><code><p>这是HTML代码</p>
<a href="http://example.com">链接</a>
总结
以上几种方法都可以实现HTML代码的直接展示效果，使用哪种方法可以根据实际的场景和需求进行选择。
如果要展示的代码比较简单，可以使用<code>标签或者<pre>标签；如果代码比较复杂或者要求高亮等特殊效果，可以使用Google的
<pre><code>在选择展示方法时，还要考虑到代码的可读性和可维护性。