html中如何直接显示html代码

淩亂°似流年 2021-10-19 05:24 486阅读 0赞

百度了很多中做法，感觉很多都没有测试再胡说，特总结一下。  
百度说的`<code>`和`<pre>`标签，我的测试结果如下：

**1.`<code>`**

<code>
        <h1>hello</h1>
        <h2>hello</h2>
          <h3>hello</h3>
          <h4>hello</h4>
        <h5>hello</h5>
        <h6>hello</h6>
      </code>

效果图：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xiMTEzNTkwOTI3Mw_size_16_color_FFFFFF_t_70]  
代码依然被渲染，失败。说是渲染行内元素的，改为span依旧渲染。

**2.`<pre>`**

代码：

<pre>
        <h1>hello</h1>
        <h2>hello</h2>
          <h3>hello</h3>
          <h4>hello</h4>
        <h5>hello</h5>
        <h6>hello</h6>
      </pre>

效果图：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xiMTEzNTkwOTI3Mw_size_16_color_FFFFFF_t_70 1]  
同上依旧渲染。

**3.`<xmp>`**

代码：

<xmp>
        <h1>hello</h1>
        <h2>hello</h2>
          <h3>hello</h3>
          <h4>hello</h4>
        <h5>hello</h5>
        <h6>hello</h6>
      </xmp>

效果图：  
![在这里插入图片描述][20190816143347861.png]

直接显示并且保留格式！可行！

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xiMTEzNTkwOTI3Mw_size_16_color_FFFFFF_t_70]: /images/20211018/164e7bfe778d4460861d1fb1cd991da5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xiMTEzNTkwOTI3Mw_size_16_color_FFFFFF_t_70 1]: /images/20211018/30e4976331df46e8b822f2b2974c1ffc.png
[20190816143347861.png]: /images/20211018/b1d1450d28c341baa61a894a094958bf.png

发表评论取消回复

表情：

评论列表（有 0 条评论，486人围观）

还没有评论，来说两句吧...

相关阅读

相关 UITextView,UIWebView 直接显示html代码

获取html到NSString NSURL \url = \[NSURLURLWithString:@"http://www.xtox.net/product/detail.

谁践踏了优雅/ 2023年10月18日 15:28/ 0 赞/ 72 阅读

相关 angular中自定义过滤器显示html代码

我们会用到$sce服务的trustAsHtml方法来实现转换。因为这个功能具有一定通用性，我们可以通过angularJS的过滤器来简化开发，这样只写一次，调用的时候就非常方

绝地灬酷狼/ 2022年12月23日 15:26/ 0 赞/ 114 阅读

相关 react中如何渲染html代码

想让div元素中的内容：`'<h3>哈哈</h3>'`正常渲染。百度查询放法： <div dangerouslySetInnerHTML={ {__

柔光的暖阳◎/ 2022年11月09日 12:43/ 0 赞/ 182 阅读

相关 html+显示在线时间,html显示时间

Windows 常用运行库下载 (DirectX、VC++、&period;Net Framework等) 经常听到有朋友抱怨他的电脑

痛定思痛。/ 2022年10月05日 12:46/ 0 赞/ 173 阅读

相关如何在html中加视频,在HTML中添加视频的代码

![c0b916d50a50ec28ed030ddaa2e0f8f8.png][] 参数和属性下列标记属性和参数描述了由“发布”命令创建的 HTML 代码。在编写自己的

不念不忘少年蓝@/ 2022年10月05日 12:44/ 0 赞/ 208 阅读

相关 Angular 4中如何显示html文本

我们都知道，如果使用两个大括号\{ \{ \}\}, HTML 文本不能正确解析。采用 <div [innerHTML]="exam.examArticle.ar

蔚落/ 2022年06月01日 11:06/ 0 赞/ 214 阅读

相关 textarea标签实现html转义textarea标签显示html代码

textarea标签实现html转义textarea标签显示html代码一、问题描述 1、假设有这么一段字符串： “ <script>alert("订单");

清疚/ 2022年05月25日 06:35/ 0 赞/ 289 阅读

相关 angularJs中添加过滤器显示Html代码

我们测试后发现高亮显示的html代码原样输出，这是angularJS为了防止html攻击采取的安全机制。我们如何在页面上显示html的结果呢？我们会用到$sce服务的trust

柔情只为你懂/ 2022年05月17日 06:37/ 0 赞/ 146 阅读

相关 html页面时钟显示--代码实现

<script type="text/javascript"> setInterval("fun(show_time)",1); func

你的名字/ 2022年05月15日 00:56/ 0 赞/ 304 阅读

相关 html中如何直接显示html代码

百度了很多中做法，感觉很多都没有测试再胡说，特总结一下。百度说的`<code>`和`<pre>`标签，我的测试结果如下： 1.`<code>` <code>

淩亂°似流年/ 2021年10月19日 05:24/ 0 赞/ 487 阅读