Maison  >  Article  >  interface Web  >  Comment afficher le code source des caractères spéciaux en HTML

Comment afficher le code source des caractères spéciaux en HTML

王林
王林avant
2020-09-01 16:17:133345parcourir

Comment afficher le code source des caractères spéciaux en HTML

Pour réaliser que les caractères spéciaux en HTML ne sont pas échappés (sortie du code source ), il existe les trois méthodes suivantes : Méthode 1 :

(Tutoriel recommandé : Tutoriel HTML)

Intégrer le code HTML dans 7eeddb97478480d877faef4f0a71cf072334fc968468dbb7526ded40414a4bae in

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

Exemple :

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

Méthode 2 :

Parfois, vous souhaitez que certaines balises html soient invisible Il est interprété et traduit par le navigateur et affiché directement tel quel. À ce stade, vous pouvez ajouter 43e1fc467495bab219a3286f74139f6ac4d9033ad21c358430e75a24655d3d0f en dehors du code que vous souhaitez afficher, afin que le contenu du fichier 43e1fc467495bab219a3286f74139f6a L'étiquette sera affichée intacte.

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

Troisième méthode :

Lors de la création dynamique de HTML, il est parfois nécessaire d'afficher le code source de certains contenus sans analyser le HTML :

Définissez la valeur de. input et textarea via js , aucune analyse HTML des caractères spéciaux (") ne sera effectuée

2. input et textarea sont écrits directement en valeur, et l'analyse HTML des caractères spéciaux (") sera effectuée

. 🎜>

3. L'entrée et la zone de texte définissent la valeur via jquery, et les caractères spéciaux (") ne seront pas analysés en HTML

4. Créez une entrée et une zone de texte via js ou jquery, et épissez directement la valeur. via des chaînes et des caractères spéciaux (" ) pour l'analyse HTML

5. Créez une entrée et une zone de texte via js ou jquery, définissez la valeur via js ou jquery, les caractères spéciaux (") ne seront pas analysés en HTML 6. Créer une zone de texte via js ou jquery, via la définition de la valeur dans js (innerHTML) ou jquery (html()) effectuera une analyse HTML des caractères spéciaux (") 7. L'ajout de scripts à js ou jquery nécessite un traitement spécial et type='text /html' représente la sortie du code source, ce qui n'est pas possible pour l'analyse et le rendu HTML


Exemple :

<!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>
.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration:
Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer