html中的特殊字符如何源码输出

广告:宝塔服务器面板,一键全能部署及管理,送你10850元礼包,点我领取~~~

html中的特殊字符如何源码输出

要实现Html中特殊字符不被转义(源码输出),有以下三种方法:方法一:

(推荐教程:html教程)

将HTML代码嵌入到<script type='text/html' style='display:block'></scipt>中

<script type='text/html' style='display:block'> <input type="text" /> </scipt>
登录后复制

举例:

body><pre><script type="text/html" style="display: block;"><div>哈哈哈</div><h4>dfdfd</h4></script></pre></body>
登录后复制

方法二:

有时候想让一些html的标签不被浏览器解释翻译,直接原样的显示出来,这时可以在想要显示的代码的外面加上<xmp></xmp>,这样<xmp>标签里面的内容将原封不动的显示出来。

<xmp> <table><tr><th width="140">a</td><th width="140">b</td><th width="140">c</td></tr></table></xmp>
登录后复制

方法三:

动态创建html时,有时需要某些内容源码显示,不进行html解析:

1、input和textarea通过js设置value值,不会对特殊字符(&quot;)进行html解析

2、input和textarea直接写在value,会对特殊字符(&quot;)进行html解析

3、input和textarea通过jquery设置value值,不会对特殊字符(&quot;)进行html解析

4、通过js或者jquery创建input和textarea,直接通过字符串拼接value,会对特殊字符(&quot;)进行html解析

5、通过js或者jquery创建input和textarea,通过js或者jquery设置value,不会对特殊字符(&quot;)进行html解析6.通过js或者jquery创建textarea,通过js(innerHTML)或者jquery(html())设置value,会对特殊字符(&quot;)进行html解析7.js或者jquery添加script需要特殊处理,并且type='text/html'代表源码输出,不及进行html解析渲染

举例:

<!DOCTYPE html><html><head><meta charset="utf-8"> <title>菜鸟教程(runoob.com)</title> <script src="https://cdn.staticfile.org/jquery/1.8.3/jquery.min.js"></script><script>$(function() {//1.input和textarea通过js设置value值,不会对特殊字符(&quot;)进行html解析document.getElementById("t1").value="&quot;";document.getElementById("t2").value="&quot;";alert("t1:" + document.getElementById("t1").value);//&quot;alert("t2:" + document.getElementById("t2").value);//&quot;//2.input和textarea直接写在value,会对特殊字符(&quot;)进行html解析alert("t3:" + document.getElementById("t3").value);//"alert("t4:" + document.getElementById("t4").value);//"//3.input和textarea通过jquery设置value值,不会对特殊字符(&quot;)进行html解析$("#t5").val("&quot;");$("#t6").val("&quot;");alert("t5:" + $("#t5").val());//&quot;alert("t6:" + $("#t6").val());//&quot;var str = "&quot;";//4.通过js或者jquery创建input和textarea,直接通过字符串拼接value,会对特殊字符(&quot;)进行html解析var t9 = 't10<textarea id="t9">' + str + '</textarea><br><br>';$("#div1").append(t9);alert("t10:" + $("#t10").val());//"//5.通过js或者jquery创建input和textarea,通过js或者jquery设置value,不会对特殊字符(&quot;)进行html解析var t10 = 't10<textarea id="t10"></textarea><br><br>';$("#div1").append(t10);$("#t10").val(str);alert("t10:" + $("#t10").val());//&quot;//6.通过js或者jquery创建textarea,通过js(innerHTML)或者jquery(html())设置value,会对特殊字符(&quot;)进行html解析var t11 = 't11<textarea id="t11"></textarea><br><br>';$("#div1").append(t11);$("#t11").html(str);alert("t11的text:" + $("#t11").text());//"alert("t11的val:" + "t11.val()=" + $("#t11").val());//"//7.js或者jquery添加script需要特殊处理,并且type='text/html'代表源码输出,不及进行html解析渲染 $("#div1").append("<script type='text/html' style='display:block'" +">" + "&quot;</" + "script>"); });</script></head><body>t1<input type="text" id="t1" value=""/><br><br>t2<textarea id="t2"></textarea><br><br>t3<input type="text" id="t3" value="&quot;"/><br><br>t4<textarea id="t4">&quot;</textarea><br><br>t5<input type="text" id="t5" value=""/><br><br>t6<textarea id="t6"></textarea><br><br><div id="div1"></div></body></html>
登录后复制

以上就是html中的特殊字符如何源码输出的详细内容,更多请关注9543建站博客其它相关文章!

9543建站博客
一个专注于网站开发、微信开发的技术类纯净博客。

作者头像
admin创始人

肥猫,知名SEO博客站长,14年SEO经验。

上一篇:教你如何实现一个H5微场景
下一篇:过去五年里,JavaScript中的一些超级有用的特性!

发表评论

关闭广告
关闭广告