html如何让标签不转义

【html如何让标签不转义】html若何让标签不转义?有时需在网页上原文显示html标签,而不是作为html代码被浏览器诠释 。 这个应该怎么做?下面,小编来给大师介绍一下html若何让标签不转义 。

html如何让标签不转义


方式/
1起首,我们筹办一个演示所用的网页文件,网页代码如下所示:
<html>
   <head>
      <title>HTML 页面</title>
   </head>
   <body>
      <br/><br/>
      <center>
            <p>这是转义后<h1>h1标签</h1>和<b>B标签</b></p>
            <p>这里要实现不转义的结果:<h1>h1标签</h1>和<b>B标签</b> 。 </p>
      <center>
   </body>
</html>

html如何让标签不转义



2在浏览器窗口中打开结果如下图所示,可以看到,两行代码的标签都被浏览器诠释当作正常的html标签了 。 此刻我们要实现将第二行的h1和b尺度原样显示出来 。

html如何让标签不转义



3方式一:操纵<xmp></xmp>来实现标签原样显示
将网页中的第二个<p>标签中的内容用<xmp></xmp>包裹起来,如下图所示:

html如何让标签不转义



4保留后,在浏览器打开,从运行结果可以看出,第二个段落中的标签没有被转义,原文显示出来了,达到了我们需要的结果 。

html如何让标签不转义



5方式二:将要原文显示的标签的左尖括号用“&lt;”替代(不包罗引号)
操纵替代功能,将第二个段落中要原文显示的标签的左尖括号“<",如下图所示全数替代当作“&lt;”(不含引号) 。

html如何让标签不转义



6保留后,从浏览器中的浏览结果可以看出,也达到了我们的要求,原样显示出了hmtl标签,未被转义 。

html如何让标签不转义



7方式三:借助js剧本实现
要借助js剧本实现,我们起首要将第二个<p>标签中的内容给清空失落,同时为了便利操作,还需给第二个<p>标签增添id属性 。

html如何让标签不转义



8在网页文件中添加如下js代码:
<script language="javascript">
         document.getElementById("myid").innerText="这是第三种方式实现不转义的结果:<h1>h1标签</h1>和<b>B标签</b> 。 ";

猜你喜欢