html中特殊字符源碼輸出的方法

發(fā)布時間：2020-09-04 10:21:30 來源：億速云閱讀：268 作者：小新欄目：web開發(fā)

小編給大家分享一下html中特殊字符源碼輸出的方法，希望大家閱讀完這篇文章后大所收獲，下面讓我們一起去探討吧！

html中特殊字符源碼輸出的方法

要實現(xiàn)Html中特殊字符不被轉(zhuǎn)義（源碼輸出），有以下三種方法：方法一：

將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的標(biāo)簽不被瀏覽器解釋翻譯，直接原樣的顯示出來，這時可以在想要顯示的代碼的外面加上<xmp></xmp>，這樣<xmp>標(biāo)簽里面的內(nèi)容將原封不動的顯示出來。

<xmp>
 	<table>
		<tr>
			<th width="140">a</td>
			<th width="140">b</td>
			<th width="140">c</td>
		</tr>
	</table>
</xmp>

方法三：

動態(tài)創(chuàng)建html時，有時需要某些內(nèi)容源碼顯示，不進(jìn)行html解析：

1、input和textarea通過js設(shè)置value值，不會對特殊字符(")進(jìn)行html解析

2、input和textarea直接寫在value，會對特殊字符(")進(jìn)行html解析

3、input和textarea通過jquery設(shè)置value值，不會對特殊字符(")進(jìn)行html解析

4、通過js或者jquery創(chuàng)建input和textarea，直接通過字符串拼接value，會對特殊字符(")進(jìn)行html解析

5、通過js或者jquery創(chuàng)建input和textarea，通過js或者jquery設(shè)置value，不會對特殊字符(")進(jìn)行html解析6.通過js或者jquery創(chuàng)建textarea，通過js(innerHTML)或者jquery（html()）設(shè)置value，會對特殊字符(")進(jìn)行html解析7.js或者jquery添加script需要特殊處理，并且type='text/html'代表源碼輸出，不及進(jìn)行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設(shè)置value值，不會對特殊字符(&quot;)進(jìn)行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;)進(jìn)行html解析
	alert("t3:" + document.getElementById("t3").value);//"
	alert("t4:" + document.getElementById("t4").value);//"
	
	//3.input和textarea通過jquery設(shè)置value值，不會對特殊字符(&quot;)進(jìn)行html解析
	$("#t5").val("&quot;");
	$("#t6").val("&quot;");
	alert("t5:" + $("#t5").val());//&quot;
	alert("t6:" + $("#t6").val());//&quot;
	
	
	var str = "&quot;";
	
	//4.通過js或者jquery創(chuàng)建input和textarea，直接通過字符串拼接value，會對特殊字符(&quot;)進(jìn)行html解析
	var t9 = 't10<textarea id="t9">' + str + '</textarea><br><br>';
	$("#div1").append(t9);
	alert("t10:" + $("#t10").val());//"
	
	//5.通過js或者jquery創(chuàng)建input和textarea，通過js或者jquery設(shè)置value，不會對特殊字符(&quot;)進(jìn)行html解析
	var t10 = 't10<textarea id="t10"></textarea><br><br>';
	$("#div1").append(t10);
	$("#t10").val(str);
	alert("t10:" + $("#t10").val());//&quot;
	
	//6.通過js或者jquery創(chuàng)建textarea，通過js(innerHTML)或者jquery（html()）設(shè)置value，會對特殊字符(&quot;)進(jìn)行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'代表源碼輸出，不及進(jìn)行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中特殊字符源碼輸出的方法有了一定的了解，想了解更多相關(guān)知識，歡迎關(guān)注億速云行業(yè)資訊頻道，感謝各位的閱讀！

向AI問一下細(xì)節(jié)

html中特殊字符源碼輸出的方法

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽