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

要实现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>
			<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>

html 特殊字符

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

相关文章