如何在html标签不被解析的显示在html页面上

最新推荐文章于 2024-05-21 11:22:42 发布
最新推荐文章于 2024-05-21 11:22:42 发布
阅读量1.6w 收藏 10
点赞数 6
分类专栏： HTML html5 文章标签： pre code xmp
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ForMyQianDuan/article/details/80423345
版权

有三样标签可以用：

1、<xmp>
2、<pre>
3、<code>

不过，MDN上这样说：

Note: Do not use this element(<xmp>).
It has been deprecated since HTML3.2 and was not implemented in a consistent way. It was completely removed from the language in HTML5.
Use the <pre> element or, if semantically adequate, the <code> element instead. Note that you will need to escape the '<' character as '&lt;' to make sure it is not interpreted as markup.
A monospaced font can also be obtained on any element, by applying an adequate CSS style using monospace as the generic-font value for the font-family property.

原文：
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/xmp

所以，

<xmp>被淘汰了，但它是不转义标签，最好用的标签。目前在各个浏览器测试用了也还能支持。
下面我们看看，各种标签下如何让html标签不被解析到html页面上。

代码和用法：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<xmp>
    <div>xmp:你可以显示代码吗？</div>
</xmp>
<pre>
    &lt;div&gt;
    pre: 你可以显示代码么？
    &lt;/div&gt;
</pre>
<code>
    &lt;div&gt;
    code: 你可以显示代码么？
    &lt;/div&gt;
</code>
</body>
</html>

效果：
这里写图片描述

还有一个pre和code的区别：
http://www.php.cn/div-tutorial-369716.html
https://www.jianshu.com/p/6abc36c28e45

ForMyWebFrontSide
关注
  • 6
    点赞
  • 踩
  • 10
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
html 如何使html标签不被解析，原样输出
PrimaryColor
12-12 3279
1.用xmp标签包裹元素： <xmp><a>原文输出</a></xmp> 2.用textarea标签包裹元素： <pre><textarea><a>原文输出</a></textarea></pre> 3.将html实体转换为html字符串。 ...
Android开发之利用jsoup解析HTML页面的方法
09-02
本文将详细介绍如何在Android项目中集成并使用jsoup来解析HTML页面。 首先，我们需要在Android项目中引入jsoup库。最简单的方式是通过Gradle依赖管理来添加jsoup。在项目的build.gradle文件（app模块）中，添加以下...
去除文本中的HTML标签
qq_16990363的专栏
11-01 2704
今天在做手机接口出现一个问题：   PC端使用在线编辑器编写的文档存入数据库是带有HTML标签，这些ＨＴＭＬ标签在电脑端没有问题，但时在移动端就会显示出ＨＴＭＬ的源代码， 如下图数据库中取出的数据： 上面图片中content列中的文本包含有很多HTML标签，这些标签在移动端都会以源代码的形式显示出来，那么应该怎么把这些HTML标签去掉呢？ 方法如下： 我们
如何使用js添加html标签
热门推荐
越努力越幸运的博客
06-01 2万+
文章目录如何使用js添加html标签 如何使用js添加html标签 其实很简单，只需要以下几个步骤： 1.使用getElementById获取想要写的标签的父标签对象（body除外，当然body也可以获取，当时没必要，因为他可以通过document.body直接调用） 2.使用createElement创建标签对象 3.设置标签的属性和文本信息 4.使用步骤1获取到的父标签对象的appendChild方法添加标签 详细代码如下： <!DOCTYPE html> <html lang="en
HTML网页设计结课作业——11张精美网页 html+css+javascript+bootstarp
最新发布
网页设计与制作 | HTML+CSS+JS
05-21 531
HTML实例网页代码, 本实例适合于初学HTML的同学。该实例里面有设置了css的样式设置，有div的样式格局，这个实例比较全面，有助于同学的学习,本文将介绍如何通过从头开始设计个人网站并将其转换为代码的过程来实践设计。 精彩专栏推荐👇🏻👇🏻👇🏻👇🏻 ❤ 【作者主页——获取更多优质源码】 ❤ 【web前端期末大作业——毕设项目精品实战案例(1000套)】 文章目录一、网页介绍一、网页效果二、代码展示1.HTML代码2.CSS代码三、个人总结四、更多干货 一、网页介绍 1 网页简介：此作
html标签在html页面正常显示而不被解析
tengtianshan的专栏
03-04 1318
最简单的方式有3种 　　1，用xmp标签包裹内容，代码如下： 　　 1 <xmp><a>xianshi xmp</a></xmp> 　　2,用textarea标签包裹内容，代码如下： 　　 <pre><textarea><a>woshi textarea</a></textarea></pre> 　　3，转义<为&lt;，>为&gt; .
关于js插入页面元素问题 在js中创建html元素并在 引入js的地方直接显示
为人
02-24 5402
最近开发网页,有许多组件需要js的方式引入有个需求是在引用js的层内直接显示插件,为保证通用性,事先不知道是哪个层.联想到flex 在页面引入embed 就是直接一个js查了下原来是使用 document.write()方法 ok!24.htm insertAdjacentHTML插入新内容
如何让浏览器不解析html？
dgce32897的博客
04-16 695
原问题： 在页面中，除了xmp，textarea以及js转义外，还有什么办法可以让html标签在不被浏览器解析而正常显示呢？ 答： 要符合“内部的html标签不被解析”，我们根据HTML5的标准，分元素类别讨论吧： Void Elements，如br等。他们不允许有内部文本。 Foreign Elements，如svg和mathml的相关标签跟xml语法一致，他们内部文本若...
用v-html解决Vue.js渲染中html标签不被解析的问题
10-20
在问题描述中提到的情况，开发者遇到了一个问题：从后台获取的JSON数据包含HTML标签，当尝试在Vue实例的模板中使用`v-for`循环遍历并显示这些数据时，HTML标签并未被解析，而是原样显示。例如，数据可能是这样的： ...
解析在Android中为TextView增加自定义HTML标签的实现方法
01-20
在Android开发中，TextView是一...这种方法极大地扩展了TextView的功能，使得在显示富文本时能更好地满足各种定制化需求。在实际开发中，可以根据项目的具体需求，设计更多的自定义标签，实现更复杂的交互和展示效果。
Vue解析带html标签的字符串为dom的实例
12-30
1.场景描述 如上接口中，content字段： content:这是内容 需要在网页中现实如下效果： 2.解决方法 ... ...v-html可以操作元素中的HTML标签，效果类似于jquery里的 .html()方法，在不安全...以上这篇Vue解析带html标签的字
html5实现页面的显示本地图片
04-04
这个方法会返回一个包含图片数据的DataURL，可以被直接设置为`<img>`元素的`src`属性，从而在页面上显示图片。 HTML5的File API还提供了其他有用的方法和属性，如`File.size`用于获取文件大小，`File.name`获取...
PHP前端页面中html标签解析失效解决方法
BBAIT的博客
08-21 1563
PHP前端页面中html标签解析失效解决方法 管理后台使用富文本编辑器将centent内容直接存入数据库，输出时把标签原样输出， 解决办法（PHP）： 组合使用strip_tags()函数以及htmlspecialchars_decode()函数 如下实例： $data = strip_tags(htmlspecialchars_decode($content)); 将$data返给前端即可 原因分析：当时数据$content字符串内容已经被转换成html实体了。需要使用htmlspecialchars_
html标签不解析直接输出代码问题处理
lilian129的专栏
03-02 1万+
PHP中，echo出一段字符串，字符串中含有许多html标签，比如,,等等，浏览器直接将这些标签原样输出了，没有解析，不解析html标签怎么办呢？ 处理方法：html_entity_decode($string, ENT_QUOTES, 'UTF-8'); 转载▼PHP中，echo出一段字符串，字符串中含有许多html标签，比如,,等等，浏览器直接将这些标签原样输出了，没有解析，不解析html
模板用html不被解析直接显示程序源代码
wwppp987的博客
07-26 1480
在页面中，除了xmp，textarea以及js转义外，还有什么办法可以让html标签在不被浏览器解析而正常显示呢？ https://segmentfault.com/q/1010000002516795 要符合“内部的html标签不被解析”，我们根据HTML5的标准，分元素类别讨论吧： Void Elements，如br等。 他们不允许有内部文本。 Foreign Elements，如svg和ma...
怎么让html的标签失去效果,使用HTML5标签属性type="date"时placeholder属性失效无法使用如何解决...
weixin_29430691的博客
06-03 736
本篇教程探讨了使用HTML5标签属性type="date"时placeholder属性失效无法使用如何解决，希望阅读本篇文章以后大家有所收获，帮助大家HTML5+CSS3从入门到精通 。<最近使用到了html5的一个新标签属性,type="date"时，发现placeholder属性失效无法使用。如果是这样的效果，那么客户体验是可想而知的差了。最后想了一下，想到用css+js双保险来搞定它。...
html不显示页面,HTML+CSS入门 如何使HTML标签在HTML页面正常显示而不被解析
weixin_39708822的博客
06-03 305
本篇教程介绍了HTML+CSS入门 如何使HTML标签在HTML页面正常显示而不被解析，希望阅读本篇文章以后大家有所收获，帮助大家HTML+CSS入门。<要想html标签在html页面正常显示而不被解析：最简单的方式有3种1，用xmp标签包裹内容，代码如下：1xianshixmp2,用textarea标签包裹内容，代码如下：woshitextarea3，转义为>&lta&...
HTML的<pre>标签中嵌套HTML标签时被解析的解决方案
进击的小宇宙
02-07 5755
1. 概述 &amp;amp;lt;pre&amp;amp;gt;标签中保留空格和换行，常用来展示代码片段，但如果直接嵌套HTML标签，会被浏览器解析，所以需要使用转义字符将代码片段转换为不被解析的文本。 2. 示例 我想显示以下代码片段： &amp;amp;lt;html&amp;amp;gt; &amp;amp;lt;head&amp;amp;gt; &amp;amp;lt;met
el 标签在html 中不被解析
06-03
如果你在 HTML 中使用了 `el-*` 标签，而这些标签并不是浏览器原生支持的标签，那么浏览器在解析 HTML 时就会忽略这些标签，而不是将其解析为 DOM 元素。 如果你使用的是 Element UI 组件库，那么你需要在 HTML 中引入 Element UI 的样式和脚本文件，以及 Vue.js 框架的脚本文件。如下所示： ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>My App</title> <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"> </head> <body> <div id="app"> <el-image src="https://picsum.photos/200"></el-image> </div> <script src="https://unpkg.com/vue/dist/vue.js"></script> <script src="https://unpkg.com/element-ui/lib/index.js"></script> <script> new Vue({ el: '#app' }) </script> </body> </html> ``` 在这个例子中，我们在 HTML 中引入了 Element UI 的样式文件和脚本文件，以及 Vue.js 框架的脚本文件。然后，我们在模板中使用了 `el-image` 标签，并在 Vue 实例中将其挂载到了 `#app` 元素上。当浏览器加载这个页面时，就会正确解析 `el-image` 标签，并渲染出图片。 如果你使用的是自定义组件库，那么你需要按照组件库的使用文档进行配置和引入。通常情况下，你需要在 HTML 中引入组件库的样式和脚本文件，以及 Vue.js 框架的脚本文件。然后，在 Vue 实例中注册组件，并在模板中使用自定义的组件标签。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值