在 HTML 中显示 HTML 片段 [英] Display HTML snippets in HTML

问题描述

如何在网页上显示 HTML 片段而不需要将每个 < 替换为 < 并将 > 替换为 <代码>>?

How can I show HTML snippets on a webpage without needing to replace each < with < and > with >?

换句话说，是否有一个标签在你点击结束标签之前不要渲染 HTML?

In other words, is there a tag for don't render HTML until you hit the closing tag?

推荐答案

是否有在点击结束标记之前不呈现 HTML 的标记?

不，没有.在 HTML 中，转义一些字符是必不可少的:

No, there is not. In HTML proper, there’s no way short of escaping some characters:

• & 为 &
• < 为 <

• & as &
• < as <

(顺便说一句，没有必要逃避>，但人们经常出于对称的原因这样做.)

(Incidentally, there is no need to escape > but people often do it for reasons of symmetry.)

当然，您应该将生成的转义 HTML 代码括在 <pre><code>...</code></pre> 中以 (a) 保留空格和行中断，并且 (b) 将其标记为代码元素.

And of course you should surround the resulting, escaped HTML code within <pre><code>…</code></pre> to (a) preserve whitespace and line breaks, and (b) mark it up as a code element.

所有其他解决方案，例如将您的代码包装到 </code> 或(已弃用)<code><xmp></code> 元素中，<strong>将中断</strong></em>.<sup>1</sup><em class="showen"></em></p> <p class="en"><em>All other solutions, such as wrapping your code into a <code><textarea></code> or the (deprecated) <code><xmp></code> element, <strong>will break</strong></em>.<sup>1</sup></p> <p class="cn">以 XML 形式向浏览器声明的 XHTML(通过 HTTP <code>Content-Type</code> 标头！—仅设置 <code>DOCTYPE</code> 是<em>不够</em>) 也可以使用 CDATA 部分:<em class="showen"></em></p> <p class="en">XHTML that is declared to the browser as XML (via the HTTP <code>Content-Type</code> header! — merely setting a <code>DOCTYPE</code> is <em>not enough</em>) could alternatively use a CDATA section:</p> <pre><code><code><![CDATA[Your <code> here]]> </code></code></pre> <p class="cn">但这仅适用于 XML，不适用于 HTML，甚至这也不是万无一失的解决方案，因为代码不能包含结束分隔符 <code>]]></code>.因此，即使在 XML 中，最简单、最可靠的解决方案也是通过转义.<em class="showen"></em></p> <p class="en">But this only works in XML, not in HTML, and even this isn’t a foolproof solution, since the code mustn’t contain the closing delimiter <code>]]></code>. So even in XML the simplest, most robust solution is via escaping.</p> <p class="cn"><sup>1</sup> 例子:</p> <p class="cn"></p> <div class="cn"></div> <div class="cn"></div> <pre><code><code>textarea {border: none; width: 100%;}</code></code></pre> <p class="cn"></p> <pre><code><code><textarea readonly="readonly"> <p>Computer <textarea>says</textarea> <span>no.</span> </textarea> <xmp> Computer <xmp>says</xmp> <span>no.</span> </xmp></code></code></pre> <p class="cn"></p> <p class="cn"></p> <p class="cn"></p> <p>这篇关于在 HTML 中显示 HTML 片段的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！</p> </div> <div class="arc-body-main-more"> <span onclick="unlockarc('2626721');">查看全文</span> </div> </div> <div> </div> <div class="wwads-cn wwads-horizontal" data-id="166" style="max-width:100%;border: 4px solid #666;"></div> </div> </article> <div id="arc-ad-2" class="mb-1"> <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-5038752844014834" crossorigin="anonymous"></script> <ins class="adsbygoogle" style="display:block" data-ad-format="autorelaxed" data-ad-client="ca-pub-5038752844014834" data-ad-slot="3921941283"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> <div class="widget bgwhite radius-1 mb-1 shadow widget-rel"> <h5>相关文章</h5> <ul> <li> <a target="_blank" title="在HTML页面中显示代码片段" href="/772952.html"> 在HTML页面中显示代码片段; </a> </li> <li> <a target="_blank" title="在HTML中显示HTML代码段" href="/2121148.html"> 在HTML中显示HTML代码段; </a> </li> <li> <a target="_blank" title="在HAML中导入HTML片段？" href="/871008.html"> 在HAML中导入HTML片段？; </a> </li> <li> <a target="_blank" title="在PowerPoint中显示HTML" href="/1708407.html"> 在PowerPoint中显示HTML; </a> </li> <li> <a target="_blank" title="在 JTable 中显示 HTML" href="/2427591.html"> 在 JTable 中显示 HTML; </a> </li> <li> <a target="_blank" title="Scala:解析HTML片段" href="/1551708.html"> Scala:解析HTML片段; </a> </li> <li> <a target="_blank" title="如何在html中显示html？" href="/515171.html"> 如何在html中显示html？; </a> </li> <li> <a target="_blank" title="在php中的html片段上获取错误" href="/1229843.html"> 在php中的html片段上获取错误; </a> </li> <li> <a target="_blank" title="HTML敏捷性包 - 从HTML文档获取HTML片段" href="/448792.html"> HTML敏捷性包 - 从HTML文档获取HTML片段; </a> </li> <li> <a target="_blank" title="HTML + FLEX：在HTML后面显示Flash" href="/764165.html"> HTML + FLEX：在HTML后面显示Flash; </a> </li> <li> <a target="_blank" title="PHP在HTML页面中显示html电子邮件" href="/674550.html"> PHP在HTML页面中显示html电子邮件; </a> </li> <li> <a target="_blank" title="在textarea中显示html输出而不是HTML代码" href="/1106795.html"> 在textarea中显示html输出而不是HTML代码; </a> </li> <li> <a target="_blank" title="在HTML中显示JavaScript对象" href="/1064573.html"> 在HTML中显示JavaScript对象; </a> </li> <li> <a target="_blank" title="在HTML中显示unicode符号" href="/860779.html"> 在HTML中显示unicode符号; </a> </li> <li> <a target="_blank" title="在uitextview中显示html文本" href="/914715.html"> 在uitextview中显示html文本; </a> </li> <li> <a target="_blank" title="在HTML Div中显示XML" href="/1103066.html"> 在HTML Div中显示XML; </a> </li> <li> <a target="_blank" title="在 uitextview 中显示 html 文本" href="/2634092.html"> 在 uitextview 中显示 html 文本; </a> </li> <li> <a target="_blank" title="TextBlock 在 WPF 中显示 HTML" href="/2437188.html"> TextBlock 在 WPF 中显示 HTML; </a> </li> <li> <a target="_blank" title="在 HTML 中显示 unicode 符号" href="/2721194.html"> 在 HTML 中显示 unicode 符号; </a> </li> <li> <a target="_blank" title="在div中显示html文件" href="/876090.html"> 在div中显示html文件; </a> </li> <li> <a target="_blank" title="解析lxml中的html主体片段" href="/1584662.html"> 解析lxml中的html主体片段; </a> </li> <li> <a target="_blank" title="用PHP包装HTML的HTML片段（并从HTML标签生成目录）" href="/653058.html"> 用PHP包装HTML的HTML片段（并从HTML标签生成目录）; </a> </li> <li> <a target="_blank" title="在HTML显示JSON" href="/58387.html"> 在HTML显示JSON; </a> </li> <li> <a target="_blank" title="漂亮的HTML片段输出" href="/870412.html"> 漂亮的HTML片段输出; </a> </li> <li> <a target="_blank" title="AngularStrap标签加载HTML片段" href="/198819.html"> AngularStrap标签加载HTML片段; </a> </li> </ul> </div> <div class="mb-1"> <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-5038752844014834" crossorigin="anonymous"></script> <ins class="adsbygoogle" style="display:block" data-ad-format="autorelaxed" data-ad-client="ca-pub-5038752844014834" data-ad-slot="3921941283"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> </div> <div class="side"> <div class="widget widget-side bgwhite mb-1 shadow"> <h5>前端开发最新文章</h5> <ul> <li> <a target="_blank" title="为什么Chrome（在Electron内部）突然重定向到chrome-error：// chromewebdata？" href="/1996151.html"> 为什么Chrome（在Electron内部）突然重定向到chrome-error：// chromewebdata？; </a> </li> <li> <a target="_blank" title="错误102（net :: ERR_CONNECTION_REFUSED）：服务器拒绝连接" href="/749568.html"> 错误102（net :: ERR_CONNECTION_REFUSED）：服务器拒绝连接; </a> </li> <li> <a target="_blank" title="如何解决'重定向已被CORS策略阻止：没有'Access-Control-Allow-Origin'标题'？" href="/1009885.html"> 如何解决'重定向已被CORS策略阻止：没有'Access-Control-Allow-Origin'标题'？; </a> </li> <li> <a target="_blank" title="如何处理“Uncaught（in promise）DOMException：play（）失败，因为用户没有首先与文档交互。”在桌面上使用Chrome 66？" href="/884909.html"> 如何处理“Uncaught（in promise）DOMException：play（）失败，因为用户没有首先与文档交互。”在桌面上使用Chrome 66？; </a> </li> <li> <a target="_blank" title="警告：添加非被动事件侦听器到滚动阻塞'touchstart'事件" href="/818517.html"> 警告：添加非被动事件侦听器到滚动阻塞'touchstart'事件; </a> </li> <li> <a target="_blank" title="如何在浏览器中播放.TS文件（视频/ MP2T媒体类型）？" href="/343346.html"> 如何在浏览器中播放.TS文件（视频/ MP2T媒体类型）？; </a> </li> <li> <a target="_blank" title="此请求已被阻止;内容必须通过HTTPS提供" href="/886417.html"> 此请求已被阻止;内容必须通过HTTPS提供; </a> </li> <li> <a target="_blank" title="资源解释为样式表，但转换为MIME类型text / html（似乎与web服务器无关）" href="/562873.html"> 资源解释为样式表，但转换为MIME类型text / html（似乎与web服务器无关）; </a> </li> <li> <a target="_blank" title="通过HTTPS加载页面但请求不安全的XMLHttpRequest端点" href="/885901.html"> 通过HTTPS加载页面但请求不安全的XMLHttpRequest端点; </a> </li> <li> <a target="_blank" title="拒绝从执行脚本'*'，因为它的MIME类型（“应用/ JSON'）不是可执行文件，并严格MIME类型检查被启用。" href="/47347.html"> 拒绝从执行脚本'*'，因为它的MIME类型（“应用/ JSON'）不是可执行文件，并严格MIME类型检查被启用。; </a> </li> </ul> </div> <div class="widget widget-side bgwhite mb-1 shadow"> <h5> 热门教程 </h5> <ul> <li> <a target="_blank" title="Java教程" href="/OnLineTutorial/java/index.html"> Java教程 </a> </li> <li> <a target="_blank" title="Apache ANT 教程" href="/OnLineTutorial/ant/index.html"> Apache ANT 教程 </a> </li> <li> <a target="_blank" title="Kali Linux教程" href="/OnLineTutorial/kali_linux/index.html"> Kali Linux教程 </a> </li> <li> <a target="_blank" title="JavaScript教程" href="/OnLineTutorial/javascript/index.html"> JavaScript教程 </a> </li> <li> <a target="_blank" title="JavaFx教程" href="/OnLineTutorial/javafx/index.html"> JavaFx教程 </a> </li> <li> <a target="_blank" title="MFC 教程" href="/OnLineTutorial/mfc/index.html"> MFC 教程 </a> </li> <li> <a target="_blank" title="Apache HTTP客户端教程" href="/OnLineTutorial/apache_httpclient/index.html"> Apache HTTP客户端教程 </a> </li> <li> <a target="_blank" title="Microsoft Visio 教程" href="/OnLineTutorial/microsoft_visio/index.html"> Microsoft Visio 教程 </a> </li> </ul> </div> <div class="widget widget-side bgwhite mb-1 shadow"> <h5> 热门工具 </h5> <ul> <li> <a target="_blank" title="Java 在线工具" href="/Onlinetools/details/4"> Java 在线工具 </a> </li> <li> <a target="_blank" title="C(GCC) 在线工具" href="/Onlinetools/details/6"> C(GCC) 在线工具 </a> </li> <li> <a target="_blank" title="PHP 在线工具" href="/Onlinetools/details/8"> PHP 在线工具 </a> </li> <li> <a target="_blank" title="C# 在线工具" href="/Onlinetools/details/1"> C# 在线工具 </a> </li> <li> <a target="_blank" title="Python 在线工具" href="/Onlinetools/details/5"> Python 在线工具 </a> </li> <li> <a target="_blank" title="MySQL 在线工具" href="/Onlinetools/Dbdetails/33"> MySQL 在线工具 </a> </li> <li> <a target="_blank" title="VB.NET 在线工具" href="/Onlinetools/details/2"> VB.NET 在线工具 </a> </li> <li> <a target="_blank" title="Lua 在线工具" href="/Onlinetools/details/14"> Lua 在线工具 </a> </li> <li> <a target="_blank" title="Oracle 在线工具" href="/Onlinetools/Dbdetails/35"> Oracle 在线工具 </a> </li> <li> <a target="_blank" title="C++(GCC) 在线工具" href="/Onlinetools/details/7"> C++(GCC) 在线工具 </a> </li> <li> <a target="_blank" title="Go 在线工具" href="/Onlinetools/details/20"> Go 在线工具 </a> </li> <li> <a target="_blank" title="Fortran 在线工具" href="/Onlinetools/details/45"> Fortran 在线工具 </a> </li> </ul> </div> </div> </div> <script type="text/javascript">var eskeys = '在,html,中,显示,html,片段'; var cat = 'cc';';//qianduan</script> </div> <div id="pop" onclick="pophide();"> <div id="pop_body" onclick="event.stopPropagation();"> <h6 class="flex flex101"> 登录 <span onclick="pophide();">关闭</span> </h6> <div class="pd-1"> <div class="wxtip center"> <span>扫码关注<em>1秒</em>登录</span> </div> <div class="center"> <img id="qr" src="https://huajiakeji.com/Content/Images/qrydx.jpg" alt="" style="width:150px;height:150px;" /> </div> <div style="margin-top:10px;display:flex;justify-content: center;"> <input type="text" placeholder="输入验证码" id="txtcode" autocomplete="off" /> <input id="btngo" type="button" onclick="chk()" value="GO" /> </div> <div class="center" style="margin: 4px; font-size: .8rem; color: #f60;"> 发送“验证码”获取 <em style="padding: 0 .5rem;">|</em> <span style="color: #01a05c;">15天全站免登陆</span> </div> <div id="chkinfo" class="tip"></div> </div> </div> </div> <script type="text/javascript" src="https://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script> <script type="text/javascript" src="https://cdn.bootcss.com/jquery-cookie/1.4.1/jquery.cookie.min.js"></script> <script type="text/javascript" src="https://img01.yuandaxia.cn/Scripts/highlight.min.js"></script> <script type="text/javascript" src="https://img01.yuandaxia.cn/Scripts/base.js?v=0.22"></script> <script type="text/javascript" src="https://img01.yuandaxia.cn/Scripts/tui.js?v=0.11"></script> <footer class="footer"> <div class="container"> <div class="flink mb-1"> 友情链接： <a href="https://www.it1352.com/" target="_blank">IT屋</a> <a href="https://huajiakeji.com/" target="_blank">Chrome插件</a> <a href="https://www.cnplugins.com/" target="_blank">谷歌浏览器插件</a> </div> <section class="copyright-section"> <a href="https://www.it1352.com" title="IT屋-程序员软件开发技术分享社区">IT屋</a> ©2016-2022 <a href="http://www.beian.miit.gov.cn/" target="_blank">琼ICP备2021000895号-1</a> <a href="/sitemap.html" target="_blank" title="站点地图">站点地图</a> <a href="/Home/Tags" target="_blank" title="站点标签">站点标签</a> <a target="_blank" alt="sitemap" href="/sitemap.xml">SiteMap</a> <a href="/1155981.html" title="IT屋-免责申明"><免责申明></a> 本站内容来源互联网,如果侵犯您的权益请联系我们删除. </section> <!--统计代码--> <script type="text/javascript"> var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?0c3a090f7b3c4ad458ac1296cb5cc779"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script> <script type="text/javascript"> (function () { var bp = document.createElement('script'); var curProtocol = window.location.protocol.split(':')[0]; if (curProtocol === 'https') { bp.src = 'https://zz.bdstatic.com/linksubmit/push.js'; } else { bp.src = 'http://push.zhanzhang.baidu.com/push.js'; } var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(bp, s); })(); </script> </div> </footer> </body> </html>