如何在 HTML 文档中显示 html 标签?

发布于 2024-10-25 21:58:45 字数 336 浏览 0 评论 0原文

我只是想创建类似的东西:

<strong>blah blah</strong>

我已经尝试这样做很长时间了,但由于某种原因,每当我放置代码和预标记时,它们都不会做他们应该做的事情。 他们确实取消了内容的格式 - 我没有看到任何格式,尽管标签没有出现。例如,我写道:

<pre><b>abc</b></pre>

abc 显示不是粗体,但我看不到标签本身。我怎样才能做到这一点? 我不想使用像 &fdaf; 这样的实体。因为我没有写传入的文本

I simply want to create something like that:

<strong>blah blah</strong>

I've been trying to do this for a long time though for some reason whenever I put the code and the pre tags they don't do what they should.
They do unformat the content - I don't see any formatting, though the tags don't appear. For example, I wrote :

<pre><b>abc</b></pre>

The abc is appearing not bold, but I can't see the tag itself. How can I do that?
I don't want to use entities like &fdaf; because I am not writing the incoming text

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(8

孤独岁月 2024-11-01 21:58:45

使用

标记,例如

<xmp>
  <html>
    <body>This is my html inside html.</body>
  </html>
</xmp>

您还可以在

内添加样式和格式。

Use the <xmp> tag, e.g.

<xmp>
  <html>
    <body>This is my html inside html.</body>
  </html>
</xmp>

You can also add styles and formatting inside <xmp> as well.

时光暖心i 2024-11-01 21:58:45

如何用 <> 替换传入文本 标签应该在源视图中可见,但在“普通视图”中不可见。

How about replacing the incoming texts by < and > The tags should be visible in source view, but not "in normal view".

血之狂魔 2024-11-01 21:58:45

您可以使用一些 JavaScript 来动态更改元素。

如果你使用jQuery

$( 'pre' ).text( $( 'pre' ).html() );

就可以了。

You could use some javascript to change elements on the fly.

If you use jQuery:

$( 'pre' ).text( $( 'pre' ).html() );

does the trick.

那些过往 2024-11-01 21:58:45

正如 mkluwe 所说,您应该使用 JavaScript(或服务器端脚本)来正确转义任何用户输入。这是您可以尝试的另一个 JavaScript 函数:

String.prototype.escapeHTML = function () {                                        
  return(                                                                 
    this.replace(/>/g,'>').
         replace(/</g,'<').
         replace(/"/g,'"')
  );
};
var codeEl = document.getElementById('test');
if (codeEl) {
  codeEl.innerHTML = codeEl.innerHTML.escapeHTML();
}

我还没有在 IE 中测试过它,但理论上它应该可以在 IE 中工作。您可以在以下页面查看结果:http://jsbin.com/oruri5/2/edit

Like mkluwe also said, you should use JavaScript (or a server-side script) to properly escape any user input. Here's another JavaScript function you could try:

String.prototype.escapeHTML = function () {                                        
  return(                                                                 
    this.replace(/>/g,'>').
         replace(/</g,'<').
         replace(/"/g,'"')
  );
};
var codeEl = document.getElementById('test');
if (codeEl) {
  codeEl.innerHTML = codeEl.innerHTML.escapeHTML();
}

I haven't tested this in IE, but it should work there in theory. Here's a page where you can view the results: http://jsbin.com/oruri5/2/edit

天冷不及心凉 2024-11-01 21:58:45

我知道的最简单的方法是替换 <和>与<和>这样它就不再是html了。还有其他几个类似的代码 &符号等。

文本从哪里来?如果它是在 javascript 中,那么最简单的方法是在 javascript 中进行正则表达式替换。

The easiest way I know is to replace the < and > with < and > that way it's not html anymore. There are several other codes like these for & symbols, etc.

Where is the text coming from? If it's in javascript than you're easiest way would be to do a regex replace in javascript.

请叫√我孤独 2024-11-01 21:58:45

必须写一些像&fdaf;这样的东西。因为浏览器拒绝相信您的意思是

对于一切。这是正确的行为,否则你怎么能摆脱 
 呢?部分?您必须仔细阅读文档并查找每个小于号替换的 <。对于大于号或与号(通常),不必这样做

You have to write stuff like &fdaf; because the browser refuses to believe that you mean <pre> for everything. This is the correct behavior, else how would you ever escape from a <pre> section? You have to go through the doc and for every less-than sign substitute <. You do not have to do that for the greater-than sign or for ampersand (usually).

木格 2024-11-01 21:58:45

请勿使用

</plaintext></code> 和 <code><listing></listing></code>。按照 <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/xmp" rel="nofollow noreferrer">MDN</a> 的建议使用:<p></p><blockquote><p>使用 <code></code></p><pre> 元素,或者如果语义足够,则使用 <code><code></code> 元素。请注意,您需要将 <code>&lt;</code> 字符转义为 <code>&lt;</code> 以确保它不会被解释为标记。<p></p> </code></pre></blockquote></div><div class="wt-content wt-comment-content hide pptcOriginalCommentContent_21834866"><p>Don't use <code>&lt;xmp&gt;</code>, <code>&lt;plaintext&gt;</code> and <code>&lt;listing&gt;</code>. Use as suggested by <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/xmp" rel="nofollow noreferrer">MDN</a>:</p><blockquote><p>Use the <code>&lt;pre&gt;</code> element or, if semantically adequate, the <code>&lt;code&gt;</code> element instead. Note that you will need to escape the <code>&lt;</code> character as <code>&lt;</code> to make sure it is not interpreted as markup.</p></blockquote></div><div class="wt-comments-tools"><span class="wt-info-model"><a href="javascript:" class="reply_btn" data-post_id="7343971" data-post_type="topic" data-post_author="4036" data-comment_id="21834866" data-comment_author="木格"><i class="wjsp wjsp-huifu"></i> 回复 </a></span><span class="wt-info-model"><a href="javascript:" data-id="21834866" data-type="comment" data-count="" class="follow_btn"><i class="wjsp wjsp-wujiaoxing"></i> 收藏 0 </a></span><a class="wt-info-model topicOriginalBtn" data-long_text="1" data-content_class="pptcOriginalCommentContent_21834866" href="javascript:">原文 <i class="wjsp wjsp-xiangyou"></i></a></div></div></div><div class="wt-comments-item" id="comment-21834867"><div class="pull-left wt-avatar"><a href="https://www.wenjiangs.com/author/bw2iqqpg" rel="nofollow"><img src="https://www.wenjiangs.com/wp-content/uploads/avatar/q101801500629956.jpg" width="96" height="96"></a></div><div class="wt-comments-text"><div class="wt-comments-info"><span class="wt-info-model"><a href="https://www.wenjiangs.com/author/bw2iqqpg" rel="nofollow">奶气</a> </span><span class="wt-info-model">2024-11-01 21:58:45</span></div><div class="wt-content wt-comment-content"><p>为了以@mkluwe的答案为基础,这里有一个例子:</p><pre><code>&lt;html&gt; &lt;head&gt; &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"&gt; &lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;pre&gt; &lt;a href="http://localhost:3000/l/1/2/3" target="_blank"&gt; &lt;img src="http://localhost:3000/b/1/2/3/4" target="_blank"&gt; &lt;/a&gt; &lt;/pre&gt; &lt;script&gt; $( 'pre' ).text( $( 'pre' ).html() ); &lt;/script&gt; &lt;/body&gt; &lt;/html&gt; </code></pre></div><div class="wt-content wt-comment-content hide pptcOriginalCommentContent_21834867"><p>to build on @mkluwe's answer, here is an example:</p><pre><code>&lt;html&gt; &lt;head&gt; &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"&gt; &lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;pre&gt; &lt;a href="http://localhost:3000/l/1/2/3" target="_blank"&gt; &lt;img src="http://localhost:3000/b/1/2/3/4" target="_blank"&gt; &lt;/a&gt; &lt;/pre&gt; &lt;script&gt; $( 'pre' ).text( $( 'pre' ).html() ); &lt;/script&gt; &lt;/body&gt; &lt;/html&gt; </code></pre></div><div class="wt-comments-tools"><span class="wt-info-model"><a href="javascript:" class="reply_btn" data-post_id="7343971" data-post_type="topic" data-post_author="4036" data-comment_id="21834867" data-comment_author="奶气"><i class="wjsp wjsp-huifu"></i> 回复 </a></span><span class="wt-info-model"><a href="javascript:" data-id="21834867" data-type="comment" data-count="" class="follow_btn"><i class="wjsp wjsp-wujiaoxing"></i> 收藏 0 </a></span><a class="wt-info-model topicOriginalBtn" data-long_text="1" data-content_class="pptcOriginalCommentContent_21834867" href="javascript:">原文 <i class="wjsp wjsp-xiangyou"></i></a></div></div></div><div class="loadMore">~没有更多了~</div></div></div></div><div class="fade modal" tabindex="-1" role="dialog" id="emailSubscribe"><div class="modal-dialog" role="document"><div class="esciBox"><h2>绑定邮箱获取回复消息</h2><p>由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!</p><div class="esciInput"><input type="email" class="form-control" v-model="user_email" placeholder="请输入您的邮箱"></div><div class="esciBtn"><button type="button" class="btn btn-primary" @click="bindEmail2">确认绑定</button></div></div></div></div></div></div><div class="col-md-4"><div class="side-topic-author"><div class="wt-container"><div class="mod-tit"><h3>关于作者</h3></div><div class="side-single-author-avatar"><a class="pull-left side-single-author-avatar-img" href="https://www.wenjiangs.com/author/jf5fnjrm" rel="nofollow"><img src="https://www.wenjiangs.com/wp-content/uploads/avatar/q101802200234684.jpg" width="96" height="96"> </a><a class="side-single-author-avatar-txt" href="https://www.wenjiangs.com/author/jf5fnjrm" rel="nofollow">心凉怎暖</a><p>暂无简介</p></div><div class="author-tatol side-single-author-count"><div class="author-tatol-item"><span class="item-num">0</span> <span class="item-name">文章</span></div><div class="author-tatol-item"><span class="item-num">0</span> <span class="item-name">评论</span></div><div class="author-tatol-item"><span class="item-num">23</span> <span class="item-name">人气</span></div></div><div class="side-single-author-do"><a href="javascript:" data-id="4036" data-type="user" class="follow_btn btn btn-success"><i class="wjsp wjsp-jia2"></i> 关注 </a><a data-href="/message?accept=4036" class="btn btn-info"><i class="wjsp wjsp-xiaoxi"></i> 发私信</a></div></div></div><div class="side-group"><script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-6502133150423173" crossorigin="anonymous"></script><ins class="adsbygoogle" style="display: block" data-ad-client="ca-pub-6502133150423173" data-ad-slot="3893261597" data-ad-format="auto" data-full-width-responsive="true"></ins><script>(adsbygoogle = window.adsbygoogle || []).push({});</script></div><div class="side-img"><a href="/downclient" title="客户端下载"><img src="/public/img/sidebar.png"></a></div><div class="side-topic-author"><div class="wt-container"><div class="mod-tit"><h3>相关话题</h3></div><div class="mod-con"><ul class="side-topic-rand-list"><li><a href="https://www.wenjiangs.com/group/topic-6432575.html" title="自动 Word 邮件合并未按预期工作">自动 Word 邮件合并未按预期工作</a></li><li><a href="https://www.wenjiangs.com/group/topic-6576771.html" title="关于从使用块返回的最佳实践">关于从使用块返回的最佳实践</a></li><li><a href="https://www.wenjiangs.com/group/topic-6579331.html" title="我如何获得图表系列? 父母的父母的详细信息?">我如何获得图表系列? 父母的父母的详细信息?</a></li><li><a href="https://www.wenjiangs.com/group/topic-7226307.html" title="根据三角形获取屏幕坐标">根据三角形获取屏幕坐标</a></li><li><a href="https://www.wenjiangs.com/group/topic-6417602.html" title="如何设置树结构子节点的顺序">如何设置树结构子节点的顺序</a></li><li><a href="https://www.wenjiangs.com/group/topic-7226308.html" title="按大小排序地图">按大小排序地图</a></li><li><a href="https://www.wenjiangs.com/group/topic-6531736.html" title="在 MSAccess 中,在 nvarchar 中插入 NULL 失败">在 MSAccess 中,在 nvarchar 中插入 NULL 失败</a></li><li><a href="https://www.wenjiangs.com/group/topic-6432573.html" title="无法加载类型... 升级到 W2K3 和 IIS6 时">无法加载类型... 升级到 W2K3 和 IIS6 时</a></li><li><a href="https://www.wenjiangs.com/group/topic-6466490.html" title="最好的分布式暴力对抗措施是什么?">最好的分布式暴力对抗措施是什么?</a></li><li><a href="https://www.wenjiangs.com/group/topic-6432574.html" title="C++ 中的 GUID Linux GCC 应用程序">C++ 中的 GUID Linux GCC 应用程序</a></li></ul></div></div></div><div class="side-tags"><div class="wt-container"><div class="mod-tit"><a href="/tags" class="pull-right">更多 <i class="wjsp wjsp-xiangyou"></i></a><h3>热门标签</h3></div><div class="mod-con"><a href="https://www.wenjiangs.com/tag/operating-system-xht">操作系统</a> <a href="https://www.wenjiangs.com/tag/programming-oci">程序设计</a> <a href="https://www.wenjiangs.com/tag/it-operation-and-maintenance">IT运维</a> <a href="https://www.wenjiangs.com/tag/linux%e7%b3%bb%e7%bb%9f%e7%ae%a1%e7%90%86">Linux系统管理</a> <a href="https://www.wenjiangs.com/tag/javascript">JavaScript</a> <a href="https://www.wenjiangs.com/tag/%e6%9c%8d%e5%8a%a1%e5%99%a8%e5%ba%94%e7%94%a8">服务器应用</a> <a href="https://www.wenjiangs.com/tag/solaris">solaris</a> <a href="https://www.wenjiangs.com/tag/c-c">C/C++</a> <a href="https://www.wenjiangs.com/tag/php">PHP</a> <a href="https://www.wenjiangs.com/tag/shell">Shell</a> <a href="https://www.wenjiangs.com/tag/bsd">BSD</a> <a href="https://www.wenjiangs.com/tag/vue-js">Vue.js</a> <a href="https://www.wenjiangs.com/tag/aix">aix</a> <a href="https://www.wenjiangs.com/tag/oracle">Oracle</a> <a href="https://www.wenjiangs.com/tag/python">Python</a> <a href="https://www.wenjiangs.com/tag/html">HTML</a> <a href="https://www.wenjiangs.com/tag/%e7%b3%bb%e7%bb%9f%e7%ae%a1%e7%90%86">系统管理</a> <a href="https://www.wenjiangs.com/tag/html5">HTML5</a> <a href="https://www.wenjiangs.com/tag/css">CSS</a> <a href="https://www.wenjiangs.com/tag/%e5%89%8d%e7%ab%af">前端</a></div></div></div><div class="side-group site-recUser"><div class="wt-container"><div class="mod-tit"><a href="/people" class="pull-right">更多 <i class="wjsp wjsp-xiangyou"></i></a><h3>推荐作者</h3></div><div class="mod-con"><div class="row wt-group"><div class="col-md-12"><div class="pull-left wt-group-avatar"><a href="https://www.wenjiangs.com/author/qq_B5t0hXza" rel="nofollow"><img src="http://thirdqq.qlogo.cn/g?b=oidb&k=iclF8icTUibSxfcIfLWiabw7tg&s=640&t=1610253257" width="96" height="96"></a></div><a data-id="4689" data-type="user" href="javascript:" class="follow_btn pull-right">关注</a><div class="wt-group-text"><h3 class="wt-group-tit"><a href="https://www.wenjiangs.com/author/qq_B5t0hXza" rel="nofollow">啊</a></h3><p><span class="wt-info-model">文章 0</span> <span class="wt-info-model">评论 0</span></p></div></div><div class="col-md-12"><div class="pull-left wt-group-avatar"><a href="https://www.wenjiangs.com/author/blmejpzb" rel="nofollow"><img src="https://www.wenjiangs.com/wp-content/uploads/avatar/16889910948169183.jpg" width="96" height="96"></a></div><a data-id="2508" data-type="user" href="javascript:" class="follow_btn pull-right">关注</a><div class="wt-group-text"><h3 class="wt-group-tit"><a href="https://www.wenjiangs.com/author/blmejpzb" rel="nofollow">横笛休吹塞上声</a></h3><p><span class="wt-info-model">文章 0</span> <span class="wt-info-model">评论 0</span></p></div></div><div class="col-md-12"><div class="pull-left wt-group-avatar"><a href="https://www.wenjiangs.com/author/c6q6jr0" rel="nofollow"><img src="https://www.wenjiangs.com/wp-content/uploads/avatar/1619139625323943.jpg" width="96" height="96"></a></div><a data-id="2176" data-type="user" href="javascript:" class="follow_btn pull-right">关注</a><div class="wt-group-text"><h3 class="wt-group-tit"><a href="https://www.wenjiangs.com/author/c6q6jr0" rel="nofollow">云雾</a></h3><p><span class="wt-info-model">文章 0</span> <span class="wt-info-model">评论 0</span></p></div></div><div class="col-md-12"><div class="pull-left wt-group-avatar"><a href="https://www.wenjiangs.com/author/wexe3gwn" rel="nofollow"><img src="https://www.wenjiangs.com/wp-content/uploads/avatar/1619090591252768.jpg" width="96" height="96"></a></div><a data-id="2136" data-type="user" href="javascript:" class="follow_btn pull-right">关注</a><div class="wt-group-text"><h3 class="wt-group-tit"><a href="https://www.wenjiangs.com/author/wexe3gwn" rel="nofollow">夏尔</a></h3><p><span class="wt-info-model">文章 0</span> <span class="wt-info-model">评论 0</span></p></div></div><div class="col-md-12"><div class="pull-left wt-group-avatar"><a href="https://www.wenjiangs.com/author/alipaysp_yxyxyl56fw" rel="nofollow"><img src="https://tfs.alipayobjects.com/images/partner/T1IcXgXndrXXXXXXXX" width="96" height="96"></a></div><a data-id="967" data-type="user" href="javascript:" class="follow_btn pull-right">关注</a><div class="wt-group-text"><h3 class="wt-group-tit"><a href="https://www.wenjiangs.com/author/alipaysp_yxyxyl56fw" rel="nofollow">alipaysp_yxYxYl56FW</a></h3><p><span class="wt-info-model">文章 0</span> <span class="wt-info-model">评论 0</span></p></div></div><div class="col-md-12"><div class="pull-left wt-group-avatar"><a href="https://www.wenjiangs.com/author/c3u3j4rl" rel="nofollow"><img src="https://www.wenjiangs.com/wp-content/uploads/avatar/328899111183221344.jpg" width="96" height="96"></a></div><a data-id="2822" data-type="user" href="javascript:" class="follow_btn pull-right">关注</a><div class="wt-group-text"><h3 class="wt-group-tit"><a href="https://www.wenjiangs.com/author/c3u3j4rl" rel="nofollow">涙—继续流</a></h3><p><span class="wt-info-model">文章 0</span> <span class="wt-info-model">评论 0</span></p></div></div></div></div></div></div><div class="side-friendship"><div class="wt-container"><div class="mod-tit"><a href="/friendship" class="pull-right">更多 <i class="wjsp wjsp-xiangyou"></i></a><h3>友情链接</h3></div><div class="mod-con"><a href="http://www.wenjiangs.com" target="_blank">文江博客</a></div></div></div><div class="side-toc"><div class="wt-container"><div class="mod-con"><div class="singleToc"><ul></ul></div></div></div></div></div></div></div></div><footer class=""><ul class="flink"><li><a href="/donation">捐赠本站</a></li><li><a href="/friendship">友情链接</a></li><li><a href="/specification">使用规范</a></li><li><a href="/agreement">服务协议</a></li><li><a href="/about">关于我</a></li></ul><p>©文江博客 Wenjiangs.com 2017-2024 / <a href="http://beian.miit.gov.cn" target="blank">蜀ICP备13016540号-2</a></p></footer><div class="side-tool"><div><a href="https://www.wenjiangs.com/feedback"><i class="wjsp wjsp-fankuiyijianfankui-xianxing"></i></a> <a href="javascript:" class="backup"><i class="wjsp wjsp-xiangshang"></i></a> <a href="javascript:" class="toComment"><i class="wjsp wjsp-liaotian2"></i></a> <a href="javascript:" class="toBottom"><i class="wjsp wjsp-xiangxia"></i></a></div></div><div class="privacy"><div class="privacyLeft">我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 <a href="/agreement">隐私政策</a> 了解更多相关信息。 单击 <code>接受</code> 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。</div><div class="privacyBtn"><button class="btn btn-default">取消</button> <button class="btn btn-primary">接受</button></div></div><div class="originaltextBox"><div class="otbTitle"><span class="otbtText">原文</span> <span class="otbtClose" aria-hidden="true">×</span></div><div class="otbContent"><div class="wt-content"></div></div></div></body></html>