如何使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決議（參考第5條）：
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值，不會對特殊字符(")進行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>
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/1472.html
標籤：其他
上一篇：Vue創建專案步驟
下一篇：iframe和父頁面相互傳值,并兼容跨域問題.(專案實測成功) from accessing a cross-origin frame