>  기사  >  웹 프론트엔드  >  html로 특수문자 소스코드 출력하는 방법

html로 특수문자 소스코드 출력하는 방법

王林
王林앞으로
2020-09-01 16:17:133298검색

html로 특수문자 소스코드 출력하는 방법

Html의 특수 문자가 이스케이프되지 않는다는 것을 인식하려면(소스 코드 출력) 다음 세 가지 방법이 있습니다. 방법 1:

(권장 튜토리얼: html 튜토리얼)

HTML 코드 삽입fea643607d1e58b02f64494f1dea24542334fc968468dbb7526ded40414a4bae

<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이 아닙니다. Parsing

2. 입력 및 텍스트 영역은 값에 직접 작성되며 특수 문자(")는 html로 구문 분석됩니다

3. 입력 및 텍스트 영역은 jquery를 통해 값을 설정하고 특수 문자(")는 html로 구문 분석하지 않습니다.

4. js 또는 jquery를 통해 입력 및 텍스트 영역을 생성하고, 문자열을 통해 직접 값을 연결하고, 특수 문자(")의 HTML 구문 분석을 수행합니다.

5. js 또는 jquery를 통해 입력 및 텍스트 영역을 생성하고, js 또는 jquery를 통해 값을 설정합니다. 특수 문자(")는 html로 구문 분석되지 않습니다. 6. js 또는 jquery를 통해 텍스트 영역을 생성하고, 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
이 기사는 csdn.net에서 복제됩니다. 침해가 있는 경우 admin@php.cn으로 문의하시기 바랍니다. 삭제