html中的特殊字符如何源码输出-木庄网络博客

本文摘自PHP中文网，作者V，侵删。

要实现Html中特殊字符不被转义（源码输出），有以下三种方法：方法一：

（推荐教程：html教程）

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

1	`<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值，不会对特殊字符(")进行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值，不会对特殊字符(&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>