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"><<<</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標籤，因為它可以處理含有特殊意義的字元。