html中如何直接显示html代码

淩亂°似流年 2021-10-19 05:24 525阅读 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 条评论，525人围观）

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

相关阅读

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

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

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

相关 html中直接使用element-ui

element-ui是饿了么团队基于Vue开发的组件库，所以若要直接在html中使用，需要挂载vue的js文件。 <script src="https://cdn.s

清疚/ 2023年03月03日 08:51/ 0 赞/ 11 阅读

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

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

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

相关 react中如何渲染html代码

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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