html 使用特殊含义字符

在进行对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标签,因为它可以处理含有特殊意义的字符。

猜你喜欢

转载自www.cnblogs.com/huangshizhou/p/9902794.html