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

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

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

(推荐教程:html教程)

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

<script type='text/html'> <input type="text" /> </scipt>

举例r : d l O d f P |

	body>
<pre>
<script type="text/html">
<div>哈哈哈</div>
<h4>dfdfd</h4>
</script&M O j g R s mgt;
</pre>
</body&g9 y at;

方法二:

有时候想让一些html的标签不被浏览器解释翻译,直接原样的显示出来,这时可以在想要显示的代码的外面加上<? 0 B G 7 Y &xmp></xmp>,这G 4 M q 5 : h样<xmp>标签里面的内容V S d q 5将原封不动的显示出来。

<xmp>
<table>
<tr>
<th width="140">a</td>
<th width="14~ % p l 8 E ~ x V0">b</td>
<4 I # J $ w `th8 c | width="140">c</td>
</tr>n # 5 H 3 o 6
</table>
</xmp>

方法三:

动态创建html时,有时需要某些内容源码- ) y 8 ; ^ f显示,不进行html解析:

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

2、input和textarea直接写在vU d galue,会对特殊字 @ 6 v n l 8 a符(&quot;)进行htmlx ) 7 O E Y z解析

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

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

5、通过js或者jquery创建input和textarea,通过js或者jquery设置value,不会对特殊字符(V y $ Q d ~ * l&aa x ; m Hmp;quot;)进行html解析6.通过js或者jquery创建textarea,通过js(innerHTML)或者jquery(html())设置value,会对特殊字符(&quot;)进行html解析7.js或者jquery添加script需要特殊处理,并且type='text/html'代表源码输出,不及进行html解~ o : V S y t U (析渲染

举例:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教- N y 4 [ 2程(runoob.com)&Z v G % olt;/title>
<script src="https://cdn.staticfile.org/jquery/1.8.3/j n O z |quer` ; l & d Ny.mio ] [ . n In.js"&gf r X 8 Y Vt;</script>
<script>t L C L a H
$(fu % # @ v p i .unction() {
//1.input和textarea通过js设置value值,不会对特殊字符l 3 S(&quot;)进行html解析
document.getElementById("t1").value="&quot;";
document.getElementById("t2").value="&quot;";
alert("t1:" + document.getElementByIdV p L F("t1").value);//6  1&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): Z V K;V x 8 _ ] )//"
//3.input和textarea通过jquery设置value值,不会对特殊字符(&quot;)进行html解析
$("#t5").val("&quot;");
$("#t6").. Q O z h 7 b #val("&b @ P i [;quot;");
aA # #lert("t5:" + $("#t5").val());//&quot;
alert("t6:" + $("#t6").val. ^ S w y l T n());S 7 k x 4 i h 2//&quot;
var str = "& | L $quot;";
//4.通过js或者jquery创建input和textarea,直接通过字符k C b &串拼接value,会对特殊字符(&quot;)进行html解析
var t9 = 't10<textarz # 1 u l S  F =ea id="t9">' + str + l p Y ? T W A . o'<I O 5 T d ~/textarea>[ | / o - w : ];&ld s 4 {t;br>) ? - / y d G<br>';
$("#div1").append(O b # | { r At9);
alert("t10:" + $("#t10").val());//"
//5.通过js或者jquery创建input和textarea,通过js或者jquery设置value,不会对特殊字符(&quot;)进行html解析
var t10 = 't10<textarea id="t10"></2 - S Btextarea><br><br>';
$("#div1").append(! 1 g L C I $t10);
$("#t10"x w 7 d z).val(str);
alert("t10:" + $("#t10").val());//&quot;
//6.通q @ I过js或者jquery创建textarea,通过js(innerHTML)或者jquery(html())设置value,会e ~ ) % I 0 7对特殊字符(&quot;| : #)进行html解析
var t11 = 't11<textarea id="t11"></texM ; 6tarea><br><br>';
$("#div1").appe~ a N M 8 Rnd(t11);
$("#t11").html(str);
al_ ^ S C G nert("t11的text:" + $("#t11").textO 2 x());//"
alert("t11的val:" + "t11.M y =val()=" + $("#t11").val());//"
//7.js或者jquery添加script需要特殊处理,并且type='text/ht/ x N } ! - Cml'代表源码输出,不及进行c c  J *  [html解析渲染
$("#div1").append("<script type='text/html'" +">" + J U / o"&quot;</" + "script>");
});
</script>
</head>
<body&[ } &gt;
t1<input type="text" id="t1" value=""/><br><br&g s P D G xgt;
t2<textarea id="t2"></textarea><br><br>
t3<input ty- @ T c O | ipe="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>; b O ^ _;<bR 7 p & } M ) 5 sr>
<div id="div1"></di3 Z B Uv>
</body>
<+ J - a # T 1 j 7/html>

以上b e ( s f B就是html中的特殊字符如何源码输出的详细内容。