<blockquote>最基础的方法是使用标签组合，保留代码格式并正确显示HTML实体，如，避免浏览器解析为标签。</blockquote><p><img src=”https://img.php.cn/upload/article/001/503/042/175795080252225.png” alt=”html文档代码怎么展示_html代码展示标签使用”></p><p>展示HTML文档代码，其实方法挺多的，但核心就在于怎么让<a style=”color:#f60; text-decoration:underline;” title=”浏览器” href=”https://www.php.cn/zt/16180.html” target=”_blank”>浏览器</a>知道，这段文字不是要渲染成网页，而是要原样显示出来。最简单直接的就是用<div class=”code” style=”position:relative; padding:0px; margin:0px;”><pre class="brush:php;toolbar:false;"><pre class="brush:php;toolbar:false;"></pre>
</div>和<div class=”code” style=”position:relative; padding:0px; margin:0px;”><pre class="brush:php;toolbar:false;"><code></pre>
</div>标签，但具体用哪个，或者怎么组合，还得看情况。</p><p><div class=”code” style=”position:relative; padding:0px; margin:0px;”><pre class="brush:php;toolbar:false;"><pre class="brush:php;toolbar:false;"></pre>
</div> 标签保留空格和换行，<div class=”code” style=”position:relative; padding:0px; margin:0px;”><pre class="brush:php;toolbar:false;"><code></pre>
</div> 标签表示一段<a style=”color:#f60; text-decoration:underline;” title=”计算机” href=”https://www.php.cn/zt/16013.html” target=”_blank”>计算机</a>代码。</p><h3>解决方案（直接输出解决方案即可）</h3><ol><li><p><strong>最基础的方法：<div class=”code” style=”position:relative; padding:0px; margin:0px;”><pre class="brush:php;toolbar:false;"><pre class="brush:php;toolbar:false;"></pre>
</div> 和 <div class=”code” style=”position:relative; padding:0px; margin:0px;”><pre class="brush:php;toolbar:false;"><code></pre>
</div> 标签</strong></p><p>这是最常用的方式，也是最直接的。</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><div class=”code” style=”position:relative; padding:0px; margin:0px;”><pre class=’brush:html;toolbar:false;’><pre class="brush:php;toolbar:false;"><code>
Hello, World!
</code></pre>
</div><p>注意 <div class=”code” style=”position:relative; padding:0px; margin:0px;”><pre class="brush:php;toolbar:false;"><</pre>
</div> 和 <div class=”code” style=”position:relative; padding:0px; margin:0px;”><pre class="brush:php;toolbar:false;">></pre>
</div>，这是HTML实体，分别代表 <div class=”code” style=”position:relative; padding:0px; margin:0px;”><pre class="brush:php;toolbar:false;"><</pre>
</div> 和 <div class=”code” style=”position:relative; padding:0px; margin:0px;”><pre class="brush:php;toolbar:false;">></pre>
</div>，因为直接写 <div class=”code” style=”position:relative; padding:0px; margin:0px;”><pre class="brush:php;toolbar:false;"><</pre>
</div> 和 <div class=”code” style=”position:relative; padding:0px; margin:0px;”><pre class="brush:php;toolbar:false;">></pre>
</div> 会被浏览器解析成HTML标签。</p></li><li><p><strong>使用HTML实体手动转义</strong></p><p>如果你不想用 <div class=”code” style=”position:relative; padding:0px; margin:0px;”><pre class="brush:php;toolbar:false;"><pre class="brush:php;toolbar:false;"></pre>
</div> 和 <div class=”code” style=”position:relative; padding:0px; margin:0px;”><pre class="brush:php;toolbar:false;"><code></pre>
</div>，或者需要在其他地方显示代码片段，那就手动转义HTML标签。</p><div class=”code” style=”position:relative; padding:0px; margin:0px;”><pre class=’brush:html;toolbar:false;’>
这是一个段落。
</pre>
</div><p>这种方法比较繁琐，容易出错，但是比较灵活。</p></li><li><p><strong>使用JavaScript动态生成</strong></p><p>有时候，你可能需要从JavaScript里动态生成HTML代码，然后显示出来。</p> <div class=”aritcle_card”> <a class=”aritcle_card_img” href=”/xiazai/code/10774″> <img src=”https://img.php.cn/upload/webcode/000/000/016/176368680836952.png” alt=”仿虎嗅网在线视频教育门户源码2.0″> </a> <div class=”aritcle_card_info”> <a href=”/xiazai/code/10774″>仿虎嗅网在线视频教育门户源码2.0</a> <p>仿虎嗅商学院在线视频教育门户网站源码，织梦内核，页面简洁，容易维护修改；适合做在线教育类网站，网站模板修改简单，网站设置多个广告位方便放置广告。适用于视频网站，在线教育、在线商学院；图片展示效果极佳;网站手工div+css，代码精简，首页排版整洁大方、布局合理、利于SEO、图文并茂、静态HTML；首页和全局重新做了全面优化，方便大家无缝使用。</p> <div class=””> <img src=”/static/images/card_xiazai.png” alt=”仿虎嗅网在线视频教育门户源码2.0″> <span>0</span> </div> </div> <a href=”/xiazai/code/10774″ class=”aritcle_card_btn”> <span>查看详情</span> <img src=”/static/images/cardxiayige-3.png” alt=”仿虎嗅网在线视频教育门户源码2.0″> </a> </div> <div class=”code” style=”position:relative; padding:0px; margin:0px;”><pre class=’brush:html;toolbar:false;’><div id=”codeContainer”></div><script>const code = `<!DOCTYPE html><html><head> <title>示例</title></head><body> <h1>Hello, World!</h1></body></html>`;document.getElementById(‘codeContainer’).innerText = code;</script></pre>
</div><p>这里用 <div class=”code” style=”position:relative; padding:0px; margin:0px;”><pre class="brush:php;toolbar:false;">innerText</pre>
</div> 属性，浏览器会自动转义HTML标签。 如果用 <div class=”code” style=”position:relative; padding:0px; margin:0px;”><pre class="brush:php;toolbar:false;">innerHTML</pre>
</div>，那就会被解析成HTML。</p></li><li><p><strong>使用第三方库：Prism.<a style=”color:#f60; text-decoration:underline;” title=”js” href=”https://www.php.cn/zt/15802.html” target=”_blank”>js</a> 或 highlight.js</strong></p><p>这些库可以自动识别代码的语言，并进行语法高亮，让代码看起来更漂亮。</p><p>使用方法一般是引入CSS和JS文件，然后在 <div class=”code” style=”position:relative; padding:0px; margin:0px;”><pre class="brush:php;toolbar:false;"><pre class="brush:php;toolbar:false;"></pre>
</div> 和 <div class=”code” style=”position:relative; padding:0px; margin:0px;”><pre class="brush:php;toolbar:false;"><code></pre>
</div> 标签上添加特定的class。</p><div class=”code” style=”position:relative; padding:0px; margin:0px;”><pre class=’brush:html;toolbar:false;’><link rel=”stylesheet” href=”prism.css”><script src=”prism.js”></script><pre class="brush:php;toolbar:false;"><code class="html"><!DOCTYPE html><html><head> <title>示例</title></head><body> <h1>Hello, World!</h1></body></html></code></pre>
</div><p><div class=”code” style=”position:relative; padding:0px; margin:0px;”><pre class="brush:php;toolbar:false;">class="html"</pre>
</div> 告诉Prism.js，这段代码是HTML代码。</p></li></ol><h3>如何选择合适的HTML代码展示方法？</h3><p>选择方法取决于你的需求。如果只是简单展示一段代码，用 <div class=”code” style=”position:relative; padding:0px; margin:0px;”><pre class="brush:php;toolbar:false;"><pre class="brush:php;toolbar:false;"></pre>
</div> 和 <div class=”code” style=”position:relative; padding:0px; margin:0px;”><pre class="brush:php;toolbar:false;"><code></pre>
</div> 就够了。如果需要语法高亮，或者需要动态生成代码，那就考虑用第三方库或者JavaScript。手动转义HTML实体一般不推荐，太麻烦了。</p><h3><a style=”color:#f60; text-decoration:underline;” title=”为什么” href=”https://www.php.cn/zt/92702.html” target=”_blank”>为什么</a>不直接用<div class=”code” style=”position:relative; padding:0px; margin:0px;”><pre class="brush:php;toolbar:false;"><textarea></pre>
</div>标签展示代码？</h3><p><div class=”code” style=”position:relative; padding:0px; margin:0px;”><pre class="brush:php;toolbar:false;"><textarea></pre>
</div> 标签也能显示文本，但它主要用于用户输入，而不是代码展示。虽然可以设置 <div class=”code” style=”position:relative; padding:0px; margin:0px;”><pre class="brush:php;toolbar:false;">readonly</pre>
</div> 属性，但样式不太好控制，而且没有语法高亮功能。用 <div class=”code” style=”position:relative; padding:0px; margin:0px;”><pre class="brush:php;toolbar:false;"><pre class="brush:php;toolbar:false;"></pre>
</div> 和 <div class=”code” style=”position:relative; padding:0px; margin:0px;”><pre class="brush:php;toolbar:false;"><code></pre>
</div> 更专业。</p><h3>HTML实体除了<div class=”code” style=”position:relative; padding:0px; margin:0px;”><pre class="brush:php;toolbar:false;"><</pre>
</div>和<div class=”code” style=”position:relative; padding:0px; margin:0px;”><pre class="brush:php;toolbar:false;">></pre>
</div>还有哪些常用的？</h3><p>除了 <div class=”code” style=”position:relative; padding:0px; margin:0px;”><pre class="brush:php;toolbar:false;"><</pre>
</div>（小于号 ），常用的HTML实体还有：</p><ul><li><div class=”code” style=”position:relative; padding:0px; margin:0px;”><pre class="brush:php;toolbar:false;">&</pre>
</div> (和号 &)</li><li><div class=”code” style=”position:relative; padding:0px; margin:0px;”><pre class="brush:php;toolbar:false;">”</pre>
</div> (双引号 “)</li><li><div class=”code” style=”position:relative; padding:0px; margin:0px;”><pre class="brush:php;toolbar:false;">'</pre>
</div> (单引号 ‘)</li><li><div class=”code” style=”position:relative; padding:0px; margin:0px;”><pre class="brush:php;toolbar:false;"> </pre>
</div> (不断行空格)</li></ul><p>这些实体在HTML中都有特殊含义，需要转义才能正确显示。</p>
以上就是HTML文档代码怎么展示_HTML代码展示标签使用的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1576092.html
微信扫一扫 
支付宝扫一扫 
