本篇文章给大家介绍一下html中直接显示html代码的方式。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。
百度了很多中做法，感觉很多都没有测试再胡说，特总结一下。
百度说的<code><code>和<code><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false;"></code>标签，我的测试结果如下：</p><p><strong>1.<code></strong></p><pre class="brush:js;toolbar:false;"><code>
<h1>hello</h1>
<h2>hello</h2>
<h3>hello</h3>
<h4>hello</h4>
<h5>hello</h5>
<h6>hello</h6>
</code></pre>
登录后复制
</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;"></strong></p><p>代码：</p><pre class="brush:js;toolbar:false;"><pre class="brush:php;toolbar:false;">
<h1>hello</h1>
<h2>hello</h2>
<h3>hello</h3>
<h4>hello</h4>
<h5>hello</h5>
<h6>hello</h6>
</pre>
登录后复制
</div><p>效果图：</p>
<div class="aritcle_card">
<a class="aritcle_card_img" href="/xiazai/code/10684">
<img src="https://img.php.cn/upload/webcode/000/000/013/176327820790052.jpg" alt="传媒公司模板(RTCMS)1.0">
</a>
<div class="aritcle_card_info">
<a href="/xiazai/code/10684">传媒公司模板(RTCMS)1.0</a>
<p>传媒企业网站系统使用热腾CMS(RTCMS),根据网站板块定制的栏目，如果修改栏目，需要修改模板相应的标签。站点内容均可在后台网站基本设置中添加。全站可生成HTML，安装默认动态浏览。并可以独立设置SEO标题、关键字、描述信息。源码包中带有少量测试数据，安装时可选择演示安装或全新安装。如果全新安装，后台内容充实后，首页才能完全显示出来。（全新安装后可以删除演示数据用到的图片，目录在https://</p>
<div class="">
<img src="/static/images/card_xiazai.png" alt="传媒公司模板(RTCMS)1.0">
<span>0</span>
</div>
</div>
<a href="/xiazai/code/10684" class="aritcle_card_btn">
<span>查看详情</span>
<img src="/static/images/cardxiayige-3.png" alt="传媒公司模板(RTCMS)1.0">
</a>
</div>
<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;"><xmp>
<h1>hello</h1>
<h2>hello</h2>
<h3>hello</h3>
<h4>hello</h4>
<h5>hello</h5>
<h6>hello</h6>
</xmp></pre>
登录后复制
</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中文网其它相关文章！
广告
262
收藏
取消收藏
