html中如何直接显示html代码

本篇文章给大家介绍一下html中直接显示html代码的方式。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。

百度了很多中做法，感觉很多都没有测试再胡说，特总结一下。
百度说的和<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">标签，我的测试结果如下：&lt;/p&gt;&lt;p&gt;&lt;strong&gt;1.&lt;code&gt;&lt;/strong&gt;&lt;/p&gt;&lt;pre class=&quot;brush:js;toolbar:false;&quot;&gt;&lt;code&gt; &lt;h1&gt;hello&lt;/h1&gt; &lt;h2&gt;hello&lt;/h2&gt; &lt;h3&gt;hello&lt;/h3&gt; &lt;h4&gt;hello&lt;/h4&gt; &lt;h5&gt;hello&lt;/h5&gt; &lt;h6&gt;hello&lt;/h6&gt; &lt;/code&gt;</pre><div class="contentsignin">登录后复制</div></div><p>效果图：<br><img src="https://img.php.cn/upload/article/000/000/062/f046ca874ec6bb2d90fa19e9ec825a2d-0.png" alt="在这里插入图片描述"><br> 代码依然被渲染，失败。说是渲染行内元素的，改为span依旧渲染。</p> <p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p> <p><strong>2.<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">&lt;/strong&gt;&lt;/p&gt;&lt;p&gt;代码：&lt;/p&gt;&lt;pre class=&quot;brush:js;toolbar:false;&quot;&gt;&lt;pre class=&quot;brush:php;toolbar:false&quot;&gt; &lt;h1&gt;hello&lt;/h1&gt; &lt;h2&gt;hello&lt;/h2&gt; &lt;h3&gt;hello&lt;/h3&gt; &lt;h4&gt;hello&lt;/h4&gt; &lt;h5&gt;hello&lt;/h5&gt; &lt;h6&gt;hello&lt;/h6&gt; </pre><div class="contentsignin">登录后复制</div></div><p>效果图：</p> <p><img src="https://img.php.cn/upload/article/000/000/062/f046ca874ec6bb2d90fa19e9ec825a2d-1.png" alt="在这里插入图片描述"><br> 同上依旧渲染。</p> <p><strong>3.<xmp></xmp></strong></p> <p>代码：</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false;">&lt;xmp&gt; &lt;h1&gt;hello&lt;/h1&gt; &lt;h2&gt;hello&lt;/h2&gt; &lt;h3&gt;hello&lt;/h3&gt; &lt;h4&gt;hello&lt;/h4&gt; &lt;h5&gt;hello&lt;/h5&gt; &lt;h6&gt;hello&lt;/h6&gt; &lt;/xmp&gt;</pre><div class="contentsignin">登录后复制</div></div><p>效果图：<br><img src="https://img.php.cn/upload/article/000/000/062/f046ca874ec6bb2d90fa19e9ec825a2d-2.png" alt="在这里插入图片描述"></p> <p>直接显示并且保留格式！可行！</p> <p>推荐学习：<a href="https://www.php.cn/course/list/11.html" target="_blank">html视频教程</a></p></strong></p>

以上就是html中如何直接显示html代码的详细内容，更多请关注php中文网其它相关文章！