分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 网页技术

html 使用特殊含义字符

发布时间:2023-09-06 02:20责任编辑:郭大石关键词:暂无标签

在进行对html页面或者jsp文件编写的时候,可能会遇到输出尖括号,也就是"<"和">"的时候,但是我们知道,在html页面中,

尖括号有着特殊的含义,如果在html页面中单独输出尖括号是不影响页面的展示效果的。

<!DOCTYPE html><html> ???<head> ???????<meta charset="UTF-8"> ???????<title></title> ???</head> ???<body> ???????<p id="input_textarea"><<<</p> ???????<p id="show_p"></p> ???????<button id="cl"></button> ???????<script type="text/javascript" src="js/jquery-3.3.1.min.js" ></script> ???????<script> ???????????$("#cl").click(function(){ ???????????????$("#show_p").text($("#input_textarea").text()); ???????????}) ???????</script> ???</body></html>

运行这段代码,然后点击按钮,然后使用控制台审查元素,我们可以看到,代码变成了

<body>
<p id="input_textarea">&lt;&lt;&lt;</p>
<p id="show_p">&lt;&lt;&lt;</p>
<button id="cl"></button>
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
<script>
$("#cl").click(function(){
$("#show_p").text($("#input_textarea").text());
})
</script>

</body>

也就是说将箭头转义成了无意义的字符,这样一来就不会影响页面的正常使用,而且不仅是360和谷歌浏览器,就连

IE浏览器也会显示成转义字符,所以说单独使用箭头是不会影响页面的,但是如果使用一个标签呢。

<!DOCTYPE html><html> ???<head> ???????<meta charset="UTF-8"> ???????<title></title> ???</head> ???<body> ???????<p id="input_textarea"><vedioo>ceshi</p> ???????<p id="show_p"></p> ???????<button id="cl"></button> ???????<script type="text/javascript" src="js/jquery-3.3.1.min.js" ></script> ???????<script> ???????????$("#cl").click(function(){ ???????????????$("#show_p").text($("#input_textarea").text()); ???????????}) ???????</script> ???</body></html>

运行这段代码,然后点击按钮,然后使用控制台审查元素,我们可以看到,代码变成了

<body>
<p id="input_textarea"><vedioo>ceshi</vedioo></p>
<p id="show_p">ceshi</p>
<button id="cl"></button>
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
<script>
$("#cl").click(function(){
$("#show_p").text($("#input_textarea").text());
})
</script>

</body>

我们知道<vedioo>标签是不属于html标签的,但是我们使用了尖括号让html以为它是一个标签,而且我们只输入了一个标签,

并没有输入结束标签,但是浏览器为我们自动补全了,于是它就变成了一个标签,但是我们看到id为show_p的文本是ceshi,

因为text()方法是获取文本而忽略标签,所以并没有获取到<vedioo>标签,但是不能用这种方式来进行过滤,我们来看下一种方式。

<!DOCTYPE html><html> ???<head> ???????<meta charset="UTF-8"> ???????<title></title> ???</head> ???<body> ???????<input id="input_textarea"> ???????<p id="show_p"></p> ???????<p id="w_p"></p> ???????<button id="cl"></button> ???????<script type="text/javascript" src="js/jquery-3.3.1.min.js" ></script> ???????<script> ???????????$("#cl").click(function(){ ???????????????$("#show_p").text($("#input_textarea").val()); ???????????????????????????}) ???????</script> ???</body></html>

运行这段代码,在输入框中输入"<videoo>paad"然后点击按钮,然后使用控制台审查元素,我们可以看到,代码变成了

<body>
<input id="input_textarea">
<p id="show_p">&lt;videoo&gt;paad</p>
<p id="w_p"></p>
<button id="cl"></button>
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
<script>
$("#cl").click(function(){
$("#show_p").text($("#input_textarea").val());

})
</script>

</body>

我们可以看到id尾show_p的元素中显示的是转义过的字符,虽然我不知道val()方法能不能处理特殊意义字符,但是通过实践可以得知

通过val()显示的箭头已经经过了转义。

但是用val()总是感觉不太合适,接下来我们看在jsp中应该怎么处理特殊意义字符。

<%@ page language="java" contentType="text/html; charset=UTF-8" ???pageEncoding="UTF-8"%><%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Insert title here</title></head><body><p>这是第二个页面</p><form action=""><input name="name"/><input type="submit" value="tijiao"/></form><c:out value="${param.name}"></c:out><%=request.getParameter("name") %></body></html>

这是一段jsp文件的代码,运行该文件,在输入框中输入"<video>dfdf",然后使用控制台审查元素,我们可以看到,代码变成了

<body>

<p>这是第二个页面</p>
<form action="">
<input name="name">
<input type="submit" value="tijiao">
</form>
&lt;video&gt;dfdf
<video>dfdf

</video></body>

我们可以看到,经过c:out标签输出的经过了特殊转义,但是使用jsp语句的也就是在<% %>中的代码输出的是没有经过转义的。

最后,我们可以总结一下,在html中,使用text()是获得元素的文本,但是text()会忽略标签,所以获得的是纯文本,如果希望获得标签,就要使用

val(),在输入框中输入含有标签的字段,然后获取的val()显示出来也会有标签。

在jsp中,想要输出的话,最好使用c:out标签,因为它可以处理含有特殊意义的字符。

html 使用特殊含义字符

原文地址:https://www.cnblogs.com/huangshizhou/p/9902794.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved