小编给大家分享一下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> <h5>dfdfd</h5> </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值，不会对特殊字符(")进行html解析
2、input和textarea直接写在value，会对特殊字符(")进行html解析
3、input和textarea通过jquery设置value值，不会对特殊字符(")进行html解析
4、通过js或者jquery创建input和textarea，直接通过字符串拼接value，会对特殊字符(")进行html解析
5、通过js或者jquery创建input和textarea，通过js或者jquery设置value，不会对特殊字符(")进行html解析6.通过js或者jquery创建textarea，通过js(innerHTML)或者jquery（html()）设置value，会对特殊字符(")进行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值，不会对特殊字符(")进行html解析 document.getElementById("t1").value="""; document.getElementById("t2").value="""; alert("t1:" + document.getElementById("t1").value);//" alert("t2:" + document.getElementById("t2").value);//" //2.input和textarea直接写在value，会对特殊字符(")进行html解析 alert("t3:" + document.getElementById("t3").value);//" alert("t4:" + document.getElementById("t4").value);//" //3.input和textarea通过jquery设置value值，不会对特殊字符(")进行html解析 $("#t5").val("""); $("#t6").val("""); alert("t5:" + $("#t5").val());//" alert("t6:" + $("#t6").val());//" var str = """; //4.通过js或者jquery创建input和textarea，直接通过字符串拼接value，会对特殊字符(")进行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，不会对特殊字符(")进行html解析 var t10 = 't10<textarea id="t10"></textarea><br><br>'; $("#div1").append(t10); $("#t10").val(str); alert("t10:" + $("#t10").val());//" //6.通过js或者jquery创建textarea，通过js(innerHTML)或者jquery（html()）设置value，会对特殊字符(")进行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'" +">" + ""</" + "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="""/><br><br> t4<textarea id="t4">"</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中特殊字符源码输出的方法有了一定的了解，想了解更多相关知识，欢迎关注亿速云行业资讯频道，感谢各位的阅读！
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
