ホームページ >ウェブフロントエンド >htmlチュートリアル >HTMLで特殊文字のソースコードを出力する方法

HTMLで特殊文字のソースコードを出力する方法

王林
王林転載
2020-09-01 16:17:133424ブラウズ

HTMLで特殊文字のソースコードを出力する方法

Html 内の特殊文字がエスケープされないことを認識するには (ソース コード出力)、次の 3 つの方法があります。 方法 1:

(推奨チュートリアル:

html チュートリアル)

HTML コードを 2a3f4b32b6cda3c369360da94d41f5a72334fc968468dbb7526ded40414a4bae中

<script type=&#39;text/html&#39; style=&#39;display:block&#39;> <input type="text" /> </scipt>

例:

	body>
		<pre class="brush:php;toolbar:false">
		<script type="text/html" style="display: block;">
			<div>哈哈哈</div>
			<h4>dfdfd</h4>
		</script>
		

方法 2:

一部の HTML タグをブロックしないようにしたい場合があります。このとき、表示したいコードの外側に43e1fc467495bab219a3286f74139f6ac4d9033ad21c358430e75a24655d3d0fを追加すると、43e1fc467495bab219a3286f74139f6aの内容がそのまま表示されます。タグはそのまま表示されます。

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

方法 3:

HTML を動的に作成する場合、HTML を解析せずに特定のコンテンツのソース コードを表示する必要がある場合があります:

1. 入力およびテキストエリアのセットjs を介した値、特殊文字 (") の HTML 解析は実行されません

2. input と textarea は value に直接書き込まれ、特殊文字 (") の HTML 解析は実行されます

3. 入力とテキストエリアは jquery を通じて値を設定しますが、特殊文字 (") は HTML では解析されません

4. js または jquery を通じて入力とテキストエリアを作成し、値を直接結合します文字列および特殊文字 (") は、HTML 解析の場合は解析されません (

4.)

5. js または jquery を通じて入力とテキストエリアを作成し、js または jquery を通じて値を設定します。特殊文字 (") の HTML 解析は実行しません。 6. js または jquery で textarea を作成します。js (innerHTML) または jquery (html()) で値を設定すると、特殊文字 (") の HTML 解析が実行されます。 7. 追加js または jquery へのスクリプトには特別な処理が必要であり、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 = &#39;t10<textarea id="t9">&#39; + str + &#39;</textarea><br><br>&#39;;
	$("#div1").append(t9);
	alert("t10:" + $("#t10").val());//"
	
	//5.通过js或者jquery创建input和textarea,通过js或者jquery设置value,不会对特殊字符(&quot;)进行html解析
	var t10 = &#39;t10<textarea id="t10"></textarea><br><br>&#39;;
	$("#div1").append(t10);
	$("#t10").val(str);
	alert("t10:" + $("#t10").val());//&quot;
	
	//6.通过js或者jquery创建textarea,通过js(innerHTML)或者jquery(html())设置value,会对特殊字符(&quot;)进行html解析
	var t11 = &#39;t11<textarea id="t11"></textarea><br><br>&#39;;
	$("#div1").append(t11);
	$("#t11").html(str);
	alert("t11的text:" + $("#t11").text());//"
	alert("t11的val:" + "t11.val()=" + $("#t11").val());//"
	
	//7.js或者jquery添加script需要特殊处理,并且type=&#39;text/html&#39;代表源码输出,不及进行html解析渲染 
	$("#div1").append("<script type=&#39;text/html&#39; style=&#39;display:block&#39;" +">" + "&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で特殊文字のソースコードを出力する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事はcsdn.netで複製されています。侵害がある場合は、admin@php.cn までご連絡ください。