• 技术文章 >web前端 >html教程

    html中的特殊字符如何源码输出

    VV2020-09-01 16:17:13转载850

    要实现Html中特殊字符不被转义(源码输出),有以下三种方法:方法一:

    (推荐教程: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解析:

    1、input和textarea通过js设置value值,不会对特殊字符(&quot;)进行html解析

    2、input和textarea直接写在value,会对特殊字符(&quot;)进行html解析

    3、input和textarea通过jquery设置value值,不会对特殊字符(&quot;)进行html解析

    4、通过js或者jquery创建input和textarea,直接通过字符串拼接value,会对特殊字符(&quot;)进行html解析

    5、通过js或者jquery创建input和textarea,通过js或者jquery设置value,不会对特殊字符(&quot;)进行html解析6.通过js或者jquery创建textarea,通过js(innerHTML)或者jquery(html())设置value,会对特殊字符(&quot;)进行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值,不会对特殊字符(&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 = 't10<textarea id="t9">' + str + '</textarea><br><br>';
    	$("#div1").append(t9);
    	alert("t10:" + $("#t10").val());//"
    	
    	//5.通过js或者jquery创建input和textarea,通过js或者jquery设置value,不会对特殊字符(&quot;)进行html解析
    	var t10 = 't10<textarea id="t10"></textarea><br><br>';
    	$("#div1").append(t10);
    	$("#t10").val(str);
    	alert("t10:" + $("#t10").val());//&quot;
    	
    	//6.通过js或者jquery创建textarea,通过js(innerHTML)或者jquery(html())设置value,会对特殊字符(&quot;)进行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'" +">" + "&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,如有侵犯,请联系admin@php.cn删除
    专题推荐:html 特殊字符
    上一篇:www中的超文本文件是用什么语言编写的 下一篇:利用html实现一个三级菜单
    大前端线上培训班

    相关文章推荐

    • pHp include 和 request的问题!(include文件不执行,直接将php源码输出• 总结HTML/CSS中的特殊字符• 浅谈html标题,段落,换行,水平线,特殊字符• 如何将html特殊字符编码转换成特殊字符?有什么方法• 输入一个字符,如何判断是字母,数字还是特殊字符

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网