如何使 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 条):
input 和 textarea 通过 JS 设置 value 值, 不会对特殊字符 (") 进行 HTML 解析
input 和 textarea 直接写在 value, 会对特殊字符 (") 进行 HTML 解析
input 和 textarea 通过 jQuery 设置 value 值, 不会对特殊字符 (") 进行 HTML 解析
通过 JS 或者 jQuery 创建 input 和 textarea, 直接通过字符串拼接 value, 会对特殊字符 (") 进行 HTML 解析
通过 JS 或者 jQuery 创建 input 和 textarea, 通过 JS 或者 jQuery 设置 value, 不会对特殊字符 (") 进行 HTML 解析
通过 JS 或者 jQuery 创建 textarea, 通过 JS(innerHTML)或者 jQuery(HTML())设置 value, 会对特殊字符 (") 进行 HTML 解析
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://blog.csdn.net/menghuanzhiming/article/details/101312849