Home > Article > Web Front-end > How to output source code of special characters in html
To realize that special characters in Html are not escaped (source code output), there are the following three methods: Method 1:
(Recommended tutorial: html tutorial)
Embed the HTML code into dda0382816147154cb03abb1389d6da32334fc968468dbb7526ded40414a4bae中
<script type='text/html' style='display:block'> <input type="text" /> </scipt>
Example:
body> <pre class="brush:php;toolbar:false"> <script type="text/html" style="display: block;"> <div>哈哈哈</div> <h4>dfdfd</h4> </script>
Method 2:
Sometimes I want some html tags not to be It is interpreted and translated by the browser and displayed directly as it is. At this time, you can add 43e1fc467495bab219a3286f74139f6ac4d9033ad21c358430e75a24655d3d0f outside the code you want to display, so that the content in the 43e1fc467495bab219a3286f74139f6a tag will be displayed intact. come out.
<xmp> <table> <tr> <th width="140">a</td> <th width="140">b</td> <th width="140">c</td> </tr> </table> </xmp>
Method 3:
When dynamically creating html, sometimes it is necessary to display the source code of certain content without parsing the html:
1. Input and textarea set the value through js , special characters (") will not be parsed in html
2. input and textarea are written directly in value, special characters (") will be parsed in html
3. input and Textarea sets the value through jquery, and special characters (") will not be parsed in HTML
4. Create input and textarea through js or jquery, and directly splice value through strings, and special characters (") will not be parsed
4. ) perform html parsing
5. Create input and textarea through js or jquery, set value through js or jquery, and do not perform html parsing of special characters (") 6. Create textarea through js or jquery, through Setting value in js (innerHTML) or jquery (html()) will perform html parsing of special characters (") 7. Adding scripts to js or jquery requires special processing, and type='text/html' represents source code output, which is not possible. HTML parsing and rendering
<!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值，不会对特殊字符(")进行html解析
document.getElementById("t1").value=""";
document.getElementById("t2").value=""";
alert("t1:" + document.getElementById("t1").value);//"
alert("t2:" + document.getElementById("t2").value);//"
//2.input和textarea直接写在value，会对特殊字符(")进行html解析
alert("t3:" + document.getElementById("t3").value);//"
alert("t4:" + document.getElementById("t4").value);//"
//3.input和textarea通过jquery设置value值，不会对特殊字符(")进行html解析
$("#t5").val(""");
$("#t6").val(""");
alert("t5:" + $("#t5").val());//"
alert("t6:" + $("#t6").val());//"
var str = """;
//4.通过js或者jquery创建input和textarea，直接通过字符串拼接value，会对特殊字符(")进行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，不会对特殊字符(")进行html解析
var t10 = 't10<textarea id="t10"></textarea><br><br>';
$("#div1").append(t10);
$("#t10").val(str);
alert("t10:" + $("#t10").val());//"
//6.通过js或者jquery创建textarea，通过js(innerHTML)或者jquery（html()）设置value，会对特殊字符(")进行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'" +">" + ""</" + "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="""/><br><br>
t4<textarea id="t4">"</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>The above is the detailed content of How to output source code of special characters in html. For more information, please follow other related articles on the PHP Chinese website!