在进行对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"><<<</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>

也就是说将箭头转义成了无意义的字符，这样一来就不会影响页面的正常使用，而且不仅是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"><videoo>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>
<video>dfdf
<video>dfdf 
 
 
 
</video></body>

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

 

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

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

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