Web開發(fā)中常見的“亂碼”

題來源：

在微信公眾號開發(fā)指定回復消息為文本格式的時候，嘗試了幾種換行方式都不行，最終了解即 XML 的換行應使用：

是字符實體編號（16進制），可以用于處理XML中文本的換行。

對應的正確代碼在第9行（部分文字有修改）：

<xml>
 <ToUserName><![CDATA[<%= toUserName %>]]></ToUserName>
 <FromUserName><![CDATA[<%= fromUserName %>]]></FromUserName>
 <CreateTime><% createTime %></CreateTime>
 <MsgType><![CDATA[<%= msgType %>]]></MsgType>
 <% if (msgType === 'text') { if(content!=="zs") { %>
 <Content><![CDATA[<%= content %>]]></Content>
 <% } else { %>
 <Content>歡迎來到報名圖書館暑假工！
報名步驟：
①將招聘推文轉發(fā)至朋友圈或者40人以上的群，讓更多同學了解本招聘。為招聘方宣傳以找到更多優(yōu)質學生員工。
→<a >點此進入招聘推文</a>
②回復你的資料：報名+姓名+電話號碼+深圳哪個區(qū)+可上班時間
</Content>
 <% }} else if (msgType === 'zs') { %>
 <Content><a >ddwadwada</a></Content>
 <% } else if (msgType === 'image') { %>
 <Image>
 <MediaId><![CDATA[<%= content.mediaId %>]]></MediaId>
 </Image>
 ...
</xml>

由這個問題，我們想到web開發(fā)中還有一些類似的“亂碼”，這些亂碼又有哪些規(guī)律呢？

字符實體

字符實體是XML和HTML中的字符編碼方式，也就是上面事例中提到的，格式為：

& + 實體名稱 + ;
& + (# + unicode編碼) + ;

實體名稱一般是有意義的詞，方便大家記憶，比如小于號<的實體名稱是lt，也就是less than的縮寫。只有部分符號是有實體名稱的，使用unicode編碼是更通用的寫法。

像文字類一般不會采用這種編碼方式，主要用于在HTML或XML文檔中輸出一些保留字符和空格，比如我想在HTML中展示一段html代碼就需要使用字符實體

比如我們要展示`<p>情深深雨蒙蒙</p>` 以下兩種表示是等效的
?
<pre>
 <p>情深深雨蒙蒙</p>
 <p>情深深雨蒙蒙</p>
</pre>

總而言之，字符實體是HTML和XML中的編碼方式，比如在HTML文檔中寫入：我，那么最終頁面上看到的是我這個漢字。

unicode字符

編程語言中的unicode字符的格式為：

\u + 16進制unicode編碼

絕大多數編程語言，包括CSS中都支持unicode字符，不過HTML和XML是不支持的。那么什么時候使用unicode字符呢？一般來說有兩種場景：

避免文件保存時采用不同編碼導致的亂碼，因為\u已經聲明了是unicode。
正則匹配中的一些應用：Unicode編碼及在正則表達式中的使用

在JS中可以使用charCodeAt()獲取字符串的10進制unicode編碼

URL編碼

類似%E6%88%91這樣的，叫做URL編碼，在鏈接的參數里非常常見

網絡標準RFC 1738做了硬性規(guī)定：

“只有字母和數字[0-9a-zA-Z]、一些特殊符號”$-_.+!*'(),”[不包括雙引號]、以及某些保留字，才可以不經過編碼直接用于URL。”

所以像漢字，空格這些都必須經過轉碼。上面講的unicode字符，字符實體用的都是unicode編號，而URL編碼用的則是utf-8, 規(guī)則是將utf-8編碼每隔兩個字符加一個%

UTF 是英文 Unicode Transformation Format 的縮寫，意為把 Unicode 字符轉換為某種格式。unicode和utf-8并不是同一種東西，但是又存在著聯(lián)系：unicode是信源編碼，對字符集數字化; utf-8，utf-16這些是信道編碼，為更好的存儲和傳輸。

簡單說，unicode就是一組數字，每一個數字對應一個字符。utf-8就是對字符的傳輸和保存時的規(guī)則。比如說“我”這個字，unicode碼（16進制）是6211，utf-8是E68891, 那么對應的URL編碼就是%E6%88%91;

{
 Unicode編碼: 0x6211,
 UTF8編碼: E68891,
 UTF16編碼: FEFF6211,
 UTF32編碼: 0000FEFF00006211
 URL編碼: %E6%88%91
}

更多細節(jié)可以參考《阮一峰：關于URL編碼》

總結

Web開發(fā)中常見的幾種亂碼包括：Unicode字符、字符實體、URL編碼。如以下情況都表示“我”：

Unicode字符： \u6211
字符實體編號（16進制）：我
字符實體編號（10進制）：我
URL編碼：%E6%88%91

這些編碼規(guī)則的本質都是一些特殊符號 + Unicode編碼 所組成。

希望本文能幫助到您！

點贊+轉發(fā)，讓更多的人也能看到這篇內容（收藏不點贊，都是耍流氓-_-）

關注｛我｝，享受文章首發(fā)體驗！

每周重點攻克一個前端技術難點。更多精彩前端內容私信我回復“教程”

原文鏈接：http://eux.baidu.com/blog/fe/web%E5%BC%80%E5%8F%91%E4%B8%AD%E5%B8%B8%E8%A7%81%E7%9A%84%E4%B9%B1%E7%A0%81

作者：鄭佳潤

開發(fā)過程中，經常遇到中文亂碼問題，以前總是解決就好，并沒有對該問題總結一下，現(xiàn)在來總結一下開發(fā)過程中常見的中文亂碼問題。

一、有必要了解一些基本的編碼知識：

這篇字符編碼筆記是必讀的
jsp的三次編碼
第一階段：JVM將.jsp文件編譯為.java文件。JVM先讀取pageEncoding的值，根據該值去讀取.jsp文件，然后由指定的編碼方案生成UTF-8的.java文件。
第二階段：JVM將.java文件轉換為.class文件，從UTF-8至UTF-8。這個過程就與任何編碼的設置都沒有關系了，經過這個階段后.java文件就轉換成了統(tǒng)一的UTF-8編碼的.class文件了。
第三階段：服務器將處理的結果返回給瀏覽器，這個階段則依靠contentType的charset，如果設置了charset則瀏覽器就會使用指定的編碼格式進行解碼，否則采用默認的ISO-8859-1編碼格式進行解碼處理。
jsp中的編碼設置

pageEncoding:<%@ page pageEncoding=”UTF-8”%>
上文中第一階段，使用該值去讀取jsp文件，為避免中文亂碼，跟jsp文件編碼一致；對服務器響應進行重新編碼，即jsp的輸出流在瀏覽器中顯示的編碼（不是主要作用）。
contentType: <%@ page contentType=”text/html;charset=UTF-8”%>
使用該值對服務器響應進行重新編碼，即jsp的輸出流在瀏覽器中顯示的編碼；對表單get和post請求數據編碼；上文中第一階段，使用該值去讀取jsp文件（不是主要作用）。
< META http-equiv=”Content-Type” content=”text/html;charset=UTF-8”>
網頁的編碼信息，說明頁面制作所使用的編碼。
request.setCharacterEncoding()
可用在servlet和jsp頁面中，作用是設置對客戶端請求進行重新編碼的編碼，即post方式提交的數據進行編碼。
response.setCharacterEncoding()
與<%@ page contentType=”text/html;charset=UTF-8”%>一樣。
response.setContentType()
與<%@ page contentType=”text/html;charset=UTF-8”%>一樣。
response.setHeader(“Content-Type”,”text/html;charset=UTF-8”)
與< META http-equiv=”Content-Type” content=”text/html; charset=UTF-8”>一樣。
注意：上文1,2,3中有部分功能是一樣的，是有優(yōu)先級的，在讀取jsp文件時，1>2；在對服務器響應進行編碼的時候，2>1>3，一般情況下，1，2都寫。

http請求默認以”ISO-8859-1”的編碼來傳送URL的。

二、中文亂碼的幾種情況及最簡單的解決方案：

pageEncoding設置錯誤
pageEncoding設置為jsp文件的編碼類型。
查詢字符串包含中文
中文的編碼方式取決于瀏覽器，chrome為UTF-8，IE為GB2312，這是由于瀏覽器并沒有遵循URI編碼規(guī)范。有兩種解決方法：

開發(fā)過程中，將查詢字符串提前編碼，
如：http://www.baidu.com/demo?demo=%D6%D0%B9%FA (UTF-8編碼)
在Servlet的doGet()方法中添加

1	String value = new String(request.getParameter("parameterName").getBytes("ISO-8859-1")，"瀏覽器的編碼方式");

表單中的get和post數據包含中文
中文的編碼方式取決于上文的contentType中的charset，有兩種解決辦法：

在Servlet的doPost()方法中添加request.setCharacterEncoding(“charset的值”);(僅對post有用)
在Servlet的doPost()方法中添加

1	String value = new String(request.getParameter("parameterName").getBytes("ISO-8859-1")，"charset的值");

三、原理

我們通過上面的方法可以解決亂碼問題，下面講講原理：

客戶端發(fā)到服務器的數據需要在客戶端進行編碼，類似于：String parameterName = "中國".getBytes("UTF-8")然后將編碼后的數據發(fā)到服務器。
客戶端接受數據，request.getParameter(“”)的作用就是對接收到的數據進行解碼，默認使用ISO-8859-1進行解碼，可以使用request.setCharacterEncoding(“”)進行設置，但僅對post有用。假如我們使用默認的ISO-8859-1，肯定亂碼，因為編碼跟解碼不一致，那此時怎么辦呢，引出了上文中的兩種解決方案：使用request.setCharacterEncoding(“”)改變request.getParameter(“”)的解碼方式或者new String(request.getParameter("parameterName").getBytes("ISO-8859-1")，"charset的值")將request.getParameter(“”)解碼的數據重新編碼再解碼。

四、其他

在jsp中的頁面使用response.setContentType()等設置字符集會破壞jsp容器自身的頁面編碼，會引起html中字符亂碼，腳本不會亂，所以不建議設置。在開發(fā)中多采用page指令設置字符集。

1234567891011121314151617

<%	response.setContentType("text/html;charset=UTF-8");	String str = new String("你好".getBytes("iso-8859-1"),"utf-8");%><!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><br><%=str %></body></html>

網頁測試

TML 超文本標記語言（英語：HyperText Markup Language）是一種用于創(chuàng)建網頁的標準標記語言。

【注】對于中文網頁需要使用 <meta charset="utf-8"> 聲明編碼，否則會出現(xiàn)亂碼。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>頭條</title>
</head>
<body>
    <h1>標題1</h1>
    <p>段落1</p>
</body>
</html>
//實例解析
/**DOCTYPE 聲明了文檔類型
位于標簽 <html> 與 </html> 描述了文檔類型
位于標簽 <body> 與 </body> 為可視化網頁內容
位于標簽 <h1> 與 </h1> 作為一個標題使用
位于標簽 <p> 與 </p> 作為一個段落顯示 **/

html在瀏覽器顯示內容區(qū)

HTML 文本相關標簽

h1-h6 文本標題, 特點: 獨占一行, 自帶上下間距, 字體加粗
p 段落標簽, 特點: 獨占一行,自帶上下間距
hr 水平分割線
br 換行
b 加粗
i 斜體
u 下劃線
s 刪除線
sub 下標
sup 上標

<!--特點: 字體加粗 獨占一行 自帶上下間距-->
<h1 align="center">內容標題1</h1>
<h2 align="right">內容標題2</h2>
<h3>內容標題3</h3>
<h4>內容標題4</h4>
<h5>內容標題5</h5>
<h6>內容<br>標題6</h6>
<hr>
<!--段落標簽p 特點: 獨占一行 自帶上下間距-->
<p>段落1</p>
<p>段落2</p><p>段落3</p>
加粗<b>標簽</b>
斜體<i>標簽</i>
下劃線<u>標簽</u>
刪除線<s>標簽</s>
<sub> 下標</sub> 
<sup> 上標</sup>

HTML 列表標簽

無序列表: ul和li 組合 unordered list list item 列表項
有序列表: ol和li 組合 ordered list
列表嵌套: 有序列表和無序列表可以任意無限嵌套 .

<!--無序列表-->
<ul>
    <li>貂蟬</li>
    <li>孫尚香</li>
    <li>孫悟空</li>
    <li>豬八戒</li>
    <li>劉禪</li>
</ul>
<!--無序、有序列表-->
<ul>
    <li>涼菜
        <ol>
            <li>拍黃瓜</li>
            <li>涼皮</li>
        </ol>
    </li>
    <li>炒菜
        <ol>
            <li>宮保雞丁</li>
            <li>辣椒小炒肉</li>
        </ol>
    </li>
</ul>

HTML圖片標簽

src: 資源路徑

1）相對路徑: 訪問站內資源

圖片和頁面在同級目錄: 直接寫圖片名

圖片在頁面的上級目錄: ../圖片名

圖片在頁面的下級目錄: 文件夾名/圖片名

2）絕對路徑: 訪問站外資源, 圖片盜鏈, 有找不到圖片的風險

alt: 圖片不能正常顯示時顯示的文本
title: 圖片標題
width/height: 設置寬高 , 只設置寬度時高度會自動等比例縮放

①像素

②上級元素百分比

<!--alt: 當圖片不能正常顯示時 顯示的文本-->
<!--title: 圖片標題-->
<img src="aa.jpg" alt="這是個美女圖片">
<img src="../b.jpg" title="這是標題" alt="">
<!--width/height-->
兩種賦值方式: 1. 像素  2. 上級元素的百分比
只設置寬度時 高度會自動等比例縮放-->
<img src="abc/c.jpg" width="50" alt="">
<img src="abc/c.jpg" width="50%" alt="">
<img src="https://www.baidu.com/e47f5058f84a655.png" alt="">

HTML超鏈接a

href: 資源路徑, 作用類似圖片標簽的src
a標簽包裹文本為文本超鏈接, 包裹圖片為圖片超鏈接
頁面內部跳轉, 在目的地的元素里面添加id=xxx 然后在超鏈接里面添加href="#xxx"

<!--超鏈接-->
<a id="top" href="http://www.baidu.com">超鏈接1</a>
<a href="day01.html">超鏈接2</a>
<a href="a.jpg">超鏈接3</a>
<a href="http://www.celinf.cn"><img src="a.jpg" width="100"></a>
<a href="#top">回到頂部</a>

HTML表格table

相關標簽: table tr表示行 td表示列 th表頭 caption標題
相關屬性: border邊框 colspan跨列 rowspan跨行

<!--表格一 -->
<table border="1">
    <tr>
        <td colspan="2">1-1</td><td rowspan="2">1-3</td>
    </tr>
    <tr>
        <td rowspan="2">2-1</td><td>2-2</td>
    </tr>
    <tr>
        <td colspan="2">3-2</td>
    </tr>
</table>
<!--表格二 -->
<table border="1">
    <caption>購物車</caption>
    <tr>
        <th>編號</th><th>商品名</th><th>價格</th>
    </tr>
    <tr>
        <td>1</td><td>小米12 pro</td><td>5000</td>
    </tr>
    <tr>
        <td>2</td><td>華為電視</td><td>4000</td>
    </tr>
    <tr>
        <td>總價:</td><td colspan="2">9000元</td>
    </tr>
</table>

HTML表單form

作用: 獲取用戶輸入的各種信息并提交給服務器
學習form表單主要學習的就是下面這些控件

<form action="http://www.baidu.com" method="get">
    <!--maxlength最大字符長度  value設置默認值  readonly只讀-->
   用戶名:<input type="text" name="username" maxlength="5" value="abc" readonly ><br>
    密碼:<input type="password" name="password"><br>
    <!--value是單選框必須添加的屬性 否則提交on  checked默認選中-->
    性別:<input type="radio" name="gender" value="m" id="r1">
    <label for="r1">男</label>
    <input type="radio" name="gender" checked value="w">女<br>
     <!--多選框--> 
    興趣愛好:<input type="checkbox" name="hobby" value="cy">成員
    <input type="checkbox" name="hobby" checked value="hj">環(huán)境
    <input type="checkbox" name="hobby" value="tt">團體<br>
     <!--日期--> 
    生日:<input type="date" name="birthday"><br>
    <!--文件-->     
    文件:<input type="file" name="pic"><br>
    所在地:
    <!--value設置提交的內容    selected默認選中-->
    <select name="city">
        <option value="bj">北京</option>
        <option value="sh">上海</option>
        <option value="gz" selected>廣州</option>
    </select><br>
    <input type="submit" value="注冊">
</form>

HTML分區(qū)標簽

作用: 可以理解為是一個容器,將多個有相關性的標簽進行統(tǒng)一管理
塊級分區(qū)標簽div: 特點是獨占一行
行內分區(qū)標簽span: 特點是共占一行
頁面區(qū)域如何劃分? 至少分為三大區(qū)(頭,體,腳) 每個大的區(qū)域再劃分n個小的區(qū)域
HTML5的標準中新增了一些語義更強的分區(qū)標簽,為了提高代碼的可讀性. 這幾個標簽的作用和div一樣都是塊級分區(qū)標簽

header頭
footer腳
main主體
section區(qū)域
nav 導航

CSS 層疊樣式表（Cascading Style Sheet）

作用: 美化頁面(好比裝修)

如何在HTML頁面中添加CSS樣式代碼三種引入方式:

內聯(lián)樣式: 在標簽的style屬性中添加樣式代碼, 弊端:不能復用
內部樣式: 在head標簽里面添加一個style標簽, 在標簽體內寫樣式代碼, 可以實現(xiàn)復用但是只能在本頁面復用
外部樣式: 在單獨的css樣式文件中寫樣式代碼, 在html頁面中通過link標簽引入, 可以實現(xiàn)多頁面復用, 可以將html代碼和css樣式代碼分離

<head>
    <meta charset="UTF-8">
    <title>Title</title>
		<!--內部樣式-->
    <style>
       h2{color: blue}
    </style>
    <!--引入外部的css樣式文件-->
    <link rel="stylesheet" href="my.css">
</head>
<body>
<h1 style="color: red">內聯(lián)樣式1</h1>
<h1 style="color: red">內聯(lián)樣式2</h1>
<h2>內部樣式1</h2>
<h2>內部樣式2</h2>
<h3>外部樣式1</h3>
<h3>外部樣式2</h3>

選擇器

標簽名選擇器: 選取頁面中所有同名標簽 格式: 標簽名{樣式代碼}
id選擇器: 當需要選擇頁面中某一個元素時使用 格式: #id{樣式代碼}
類選擇器: 當需要選擇多個不相關的元素時,給多個元素添加相同的class屬性,然后通過類選擇器進行選擇 格式: .class{樣式代碼}
分組選擇器: 分組選擇器可以將多個選擇器合并成一個 h4,#id,.class{樣式代碼}
屬性選擇器: 通過元素的屬性選擇元素 格式: 標簽名[屬性名="屬性值"]{樣式代碼}
任意元素選擇器: 選擇頁面中所有標簽 格式: *{樣式代碼}

<head>   
	<meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*id選擇器*/
        #p1{color: red}
        /*類選擇器*/
        .c1{color: yellow}
        /*分組選擇器*/
        h4,#p1,.c1{background-color: blue}
        /*屬性選擇器*/
        input[type="text"]{color: red}
        /*任意元素選擇器*/
        /*邊框: 粗細 樣式 顏色*/
        *{border: 1px solid purple}
    </style>
</head>
<body>
<input type="text">
<input type="password">
<p id="p1">蘋果</p>
<p class="c1">香蕉</p>
<p>橘子</p>
<h3>冰箱</h3>
<h3 class="c1">洗衣機</h3>
<h3>電視機</h3>
<h4>張三</h4>

Idea快捷鍵

Alt+Insert 生成代碼(如get,set方法,構造函數等) 或者右鍵（Generate）
fori/sout/psvm + Tab 【Tab快捷，下：】

iter 快速生成 for…in 語句
inst 快速生成”if instanceof ”語句
itco 快速生成 iterator 的 for 循環(huán)
itit 快速生成 iterator 的 while 循環(huán)
itli 快速生成 list 的 for(i)循環(huán)
psf 快速生成“public static final” 語句
thr 快速生成“throw new” 語句

CTRL+ALT+T 把選中的代碼放在 TRY{} IF{} ELSE{} 里
ALT+/ 代碼提示
Ctrl+X 刪除行
Ctrl+D 復制行
Ctrl+/ 或 Ctrl+Shift+/ 注釋（// 或者/…/ ）
Alt+F1 查找代碼所在位置
CTRL+Z 倒退(撤銷)
ALT+F1 查找文件所在目錄位置
Alt+Shift+F9，選擇 Debug
Alt+Shift+F10，選擇 Run
Alt+F9，運行至斷點處
Alt+F10，定位到斷點
Shift+F6，重命名
Alt+F12 打開命令終端
Shift+Shift 搜索文件

學習記錄，如有侵權請聯(lián)系刪除。

在線咨詢

上一篇：前端：JS延長加載的方式有哪些？
下一篇：善用Axure寫PRD，如何生成適配手機的原型

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯(lián)系。

整合營銷服務商