<blockquote>最基础的方法是使用<pre><code>标签组合，保留代码格式并正确显示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></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></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></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><code>
<!DOCTYPE html>
<html>
<head>
<title>示例</title>
</head>
<body>
<h1>Hello, World!</h1>
</body>
</html>
</code></pre></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></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;'><p>这是一个段落。</p></pre>
登录后复制
</div><p>这种方法比较繁琐，容易出错，但是比较灵活。</p>
</li>
<li>
<p><strong>使用JavaScript动态生成</strong></p>
<div class="aritcle_card">
<a class="aritcle_card_img" href="/ai/1478">
<img src="https://img.php.cn/upload/ai_manual/000/000/000/175680175192363.png" alt="豆绘AI">
</a>
<div class="aritcle_card_info">
<a href="/ai/1478">豆绘AI</a>
<p>豆绘AI是国内领先的AI绘图与设计平台，支持照片、设计、绘画的一键生成。</p>
<div class="">
<img src="/static/images/card_xiazai.png" alt="豆绘AI">
<span>485</span>
</div>
</div>
<a href="/ai/1478" class="aritcle_card_btn">
<span>查看详情</span>
<img src="/static/images/cardxiayige-3.png" alt="豆绘AI">
</a>
</div>
<p>有时候，你可能需要从JavaScript里动态生成HTML代码，然后显示出来。</p><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></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><code class="html">
<!DOCTYPE html>
<html>
<head>
<title>示例</title>
</head>
<body>
<h1>Hello, World!</h1>
</body>
</html>
</code></pre></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></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></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>（小于号 <）和 <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代码展示标签使用的详细内容，更多请关注php中文网其它相关文章！
广告
328
收藏
