整合營(yíng)銷(xiāo)服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢(xún)熱線(xiàn)：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢(xún)熱線(xiàn)：
這里是云端源想IT，幫你輕松學(xué)IT”
嗨~ 今天的你過(guò)得還好嗎？
世界微塵里
吾寧愛(ài)與憎
- 2024.03.18 -
在互聯(lián)網(wǎng)的世界中，表單是用戶(hù)與網(wǎng)站進(jìn)行互動(dòng)的重要橋梁。無(wú)論是注冊(cè)新賬號(hào)、提交反饋、還是在線(xiàn)購(gòu)物，表單都扮演著至關(guān)重要的角色。在網(wǎng)頁(yè)中，我們需要跟用戶(hù)進(jìn)行交互，收集用戶(hù)資料，此時(shí)就需要用到表單標(biāo)簽。
HTML提供了一系列的表單標(biāo)簽，使得開(kāi)發(fā)者能夠輕松地創(chuàng)建出功能豐富的表單。今天我們就來(lái)深入探討這些標(biāo)簽，了解它們的作用以及如何使用它們來(lái)構(gòu)建一個(gè)有效的用戶(hù)界面。
在HTML中，一個(gè)完整的表單通常由表單域、表單控件（表單元素）和提示信息三個(gè)部分構(gòu)成。
表單域
表單控件
這些是用戶(hù)與表單交云的各種元素，如<input>（用于創(chuàng)建不同類(lèi)型的輸入字段）、<textarea>（用于多行文本輸入）、<button>（用于提交表單或執(zhí)行其他操作）、<select>和<option>（用于創(chuàng)建下拉列表）等。
提示信息
這些信息通常通過(guò)<label>標(biāo)簽提供，它為表單控件提供了描述性文本，有助于提高可訪問(wèn)性。<label>標(biāo)簽通常與<input>標(biāo)簽一起使用，并且可以通過(guò)for屬性與<input>標(biāo)簽的id屬性關(guān)聯(lián)起來(lái)。
這三個(gè)部分共同構(gòu)成了一個(gè)完整的HTML表單，使得用戶(hù)可以輸入數(shù)據(jù)，并通過(guò)點(diǎn)擊提交按鈕將這些數(shù)據(jù)發(fā)送到Web服務(wù)器進(jìn)行處理。
在表單域中可以定義各種表單元素，這些表單元素就是允許用戶(hù)在表單中輸入或者選擇的內(nèi)容控件。下面就來(lái)介紹HTML中常用的表單元素。
1、<form>標(biāo)簽：基礎(chǔ)容器
作用：定義一個(gè)表單區(qū)域，用戶(hù)可以在其中輸入數(shù)據(jù)進(jìn)行提交。
<form action="submit.php" method="post">其中action屬性指定了數(shù)據(jù)提交到的服務(wù)器端腳本地址，method屬性定義了數(shù)據(jù)提交的方式（通常為GET或POST）。
2、<input>標(biāo)簽：數(shù)據(jù)輸入
<input>標(biāo)簽是一個(gè)單標(biāo)簽，用于收集用戶(hù)信息。允許用戶(hù)輸入文本、數(shù)字、密碼等。
<input type="text" name="username" placeholder="請(qǐng)輸入用戶(hù)名">type屬性決定了輸入類(lèi)型，name屬性定義了數(shù)據(jù)的鍵名，placeholder屬性提供了輸入框內(nèi)的提示文本。
<input>標(biāo)簽的屬性
下面舉個(gè)例子來(lái)說(shuō)明：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form>
用戶(hù)名：<input type="text" value="請(qǐng)輸入用戶(hù)名"><br>
密碼：<input type="password"><br>
性別：男<input type="radio" name="sex" checked="checked"> 女<input type="radio" name="sex"><br>
愛(ài)好：吃飯<input type="checkbox"> 睡覺(jué)<input type="checkbox"> 打豆豆<input type="checkbox"><br>
<input type="submit" value="免費(fèi)注冊(cè)">
<input type="reset" value="重新填寫(xiě)">
<input type="button" value="獲取短信驗(yàn)證碼"><br>
上傳頭像：<input type="file">
</form>
</body>
</html>3、<label>標(biāo)簽：關(guān)聯(lián)說(shuō)明
它與輸入字段如文本框、單選按鈕、復(fù)選框等關(guān)聯(lián)起來(lái)，以改善網(wǎng)頁(yè)的可用性和可訪問(wèn)性。<label>標(biāo)簽有兩種常見(jiàn)的用法：
1）包裹方式：
在這種用法中，<label>標(biāo)簽直接包裹住關(guān)聯(lián)的表單元素。例如：
<label>用戶(hù)名：<input type="text" name="username"></label>這樣做的好處是用戶(hù)點(diǎn)擊標(biāo)簽文本時(shí)，關(guān)聯(lián)的輸入字段會(huì)自動(dòng)獲取焦點(diǎn)，從而提供更好的用戶(hù)體驗(yàn)。
2）使用for屬性關(guān)聯(lián)：
在這種用法中，<label>標(biāo)簽通過(guò)for屬性與目標(biāo)表單元素建立關(guān)聯(lián)，for屬性的值應(yīng)與目標(biāo)元素的id屬性相匹配。例如：
<label for="username">用戶(hù)名：</label><input type="text" id="username" name="username">這樣做的優(yōu)勢(shì)是單擊標(biāo)簽時(shí)，相關(guān)的表單元素會(huì)自動(dòng)選中（獲取焦點(diǎn)），從而提高可用性和可訪問(wèn)性。
4、<select>和<option>標(biāo)簽：下拉選擇
在頁(yè)面中，如果有多個(gè)選項(xiàng)讓用戶(hù)選擇，并且想要節(jié)約頁(yè)面空間時(shí)，我們可以使用標(biāo)簽控件定義下拉列表。
注意點(diǎn)：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form>
籍貫：
<select>
<option>山東</option>
<option>北京</option>
<option>西安</option>
<option selected="selected">火星</option>
</select>
</form>
</body>
</html>5、<textarea>標(biāo)簽：多行文本輸入
當(dāng)用戶(hù)輸入內(nèi)容較多的情況下，我們可以用表單元素標(biāo)簽替代文本框標(biāo)簽。
<textarea name="message" rows="5" cols="30">默認(rèn)文本</textarea>rows和cols屬性分別定義了文本區(qū)域的行數(shù)和列數(shù)。
代碼示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form>
今日反饋：
<textarea>請(qǐng)?jiān)诖溯斎雰?nèi)容</textarea>
</form>
</body>
</html>6、<button>標(biāo)簽：按鈕控件
創(chuàng)建一個(gè)可點(diǎn)擊的按鈕，通常用于提交或重置表單。它允許用戶(hù)放置文本或其他內(nèi)聯(lián)元素（如<i>、<b>、<strong>、<br>、<img>等），這使得它比普通的<input type="button">具有更豐富的內(nèi)容和更強(qiáng)的功能。
<button type="submit">提交</button>type屬性為submit時(shí)表示這是一個(gè)提交按鈕。
7、<fieldset>和<legend>標(biāo)簽：分組和標(biāo)題
通常用于在HTML表單中對(duì)相關(guān)元素進(jìn)行分組，并提供一個(gè)標(biāo)題來(lái)描述這個(gè)組的內(nèi)容。
<fieldset>標(biāo)簽：該標(biāo)簽用于在表單中創(chuàng)建一組相關(guān)的表單控件。它可以將表單元素邏輯分組，并且通常在視覺(jué)上通過(guò)圍繞這些元素繪制一個(gè)邊框來(lái)區(qū)分不同的組。這種分組有助于提高表單的可讀性和易用性。
<legend>標(biāo)簽：它總是與<fieldset>標(biāo)簽一起使用。<legend>標(biāo)簽定義了<fieldset>元素的標(biāo)題，這個(gè)標(biāo)題通常會(huì)出現(xiàn)在瀏覽器渲染的字段集的邊框上方。<legend>標(biāo)簽使得用戶(hù)更容易理解每個(gè)分組的目的和內(nèi)容。
代碼示例：
<form>
<fieldset>
<legend>個(gè)人信息</legend>
<label for="name">姓名：</label>
<input type="text" id="name" name="name"><br><br>
<label for="email">郵箱：</label>
<input type="email" id="email" name="email"><br><br>
</fieldset>
<fieldset>
<legend>興趣愛(ài)好</legend>
<input type="checkbox" id="hobby1" name="hobby1" value="music">
<label for="hobby1">音樂(lè)</label><br>
<input type="checkbox" id="hobby2" name="hobby2" value="sports">
<label for="hobby2">運(yùn)動(dòng)</label><br>
<input type="checkbox" id="hobby3" name="hobby3" value="reading">
<label for="hobby3">閱讀</label><br>
</fieldset>
<input type="submit" value="提交">
</form>在這個(gè)示例中，我們使用了兩個(gè)<fieldset>元素來(lái)組織表單的不同部分。第一個(gè)<fieldset>包含姓名和郵箱字段，而第二個(gè)<fieldset>包含三個(gè)復(fù)選框，用于選擇用戶(hù)的興趣愛(ài)好。每個(gè)<fieldset>都有一個(gè)<legend>元素，用于提供標(biāo)題。這樣，用戶(hù)在填寫(xiě)表單時(shí)可以更清晰地了解每個(gè)部分的內(nèi)容。
想要快速入門(mén)前端開(kāi)發(fā)嗎？推薦一個(gè)前端開(kāi)發(fā)基礎(chǔ)課程，這個(gè)老師講的特別好，零基礎(chǔ)學(xué)習(xí)無(wú)壓力，知識(shí)點(diǎn)結(jié)合代碼，邊學(xué)邊練，可以免費(fèi)試看試學(xué)，還有各種輔助工具和資料，非常適合新手！點(diǎn)這里前往學(xué)習(xí)哦！云端源想
8、<datalist>標(biāo)簽：預(yù)定義選項(xiàng)列表
<datalist>標(biāo)簽是HTML5中引入的一個(gè)新元素，它允許開(kāi)發(fā)者為輸入字段提供預(yù)定義的選項(xiàng)列表。當(dāng)用戶(hù)在輸入字段中輸入時(shí)，瀏覽器會(huì)顯示一個(gè)下拉菜單，其中包含與用戶(hù)輸入匹配的預(yù)定義選項(xiàng)。
使用<datalist>標(biāo)簽可以提供更好的用戶(hù)體驗(yàn)，因?yàn)樗梢詭椭脩?hù)選擇正確的選項(xiàng)，而不必手動(dòng)輸入整個(gè)選項(xiàng)。此外，<datalist>還可以與<input>元素的list屬性結(jié)合使用，以將預(yù)定義的選項(xiàng)列表與特定的輸入字段關(guān)聯(lián)起來(lái)。
下面是一個(gè)使用<datalist>標(biāo)簽的代碼示例：
<form>
<label for="color">選擇你喜歡的顏色：</label>
<input type="text" id="color" name="color" list="colorOptions">
<datalist id="colorOptions">
<option value="紅色">
<option value="藍(lán)色">
<option value="綠色">
<option value="黃色">
<option value="紫色">
</datalist>
<input type="submit" value="提交">
</form>9、<output>標(biāo)簽：計(jì)算結(jié)果輸出
<output>標(biāo)簽是HTML5中引入的一個(gè)新元素，它用于顯示計(jì)算結(jié)果或輸出。該標(biāo)簽通常與JavaScript代碼結(jié)合使用，通過(guò)將計(jì)算結(jié)果賦值給<output>元素的value屬性來(lái)顯示結(jié)果。
<output>標(biāo)簽可以用于各種類(lèi)型的計(jì)算和輸出，例如數(shù)學(xué)運(yùn)算、字符串處理、數(shù)組操作等。它可以與<input>元素一起使用，以實(shí)時(shí)更新計(jì)算結(jié)果。
下面是一個(gè)使用<output>標(biāo)簽的示例：
<form>
<label for="num1">數(shù)字1：</label>
<input type="number" id="num1" name="num1" oninput="calculate()"><br><br>
<label for="num2">數(shù)字2：</label>
<input type="number" id="num2" name="num2" oninput="calculate()"><br><br>
<label for="result">結(jié)果：</label>
<output id="result"></output>
</form>
<script>
function calculate() {
var num1 = parseInt(document.getElementById("num1").value);
var num2 = parseInt(document.getElementById("num2").value);
var result = num1 + num2;
document.getElementById("result").value = result;
}
</script>10、<progress>標(biāo)簽：任務(wù)進(jìn)度展示
<progress>標(biāo)簽是HTML5中用于表示任務(wù)完成進(jìn)度的一個(gè)新元素。它通過(guò)value屬性和max屬性來(lái)表示進(jìn)度，其中value表示當(dāng)前完成的值，而max定義任務(wù)的總量或最大值。
示例：
<!DOCTYPE html>
<html>
<head>
<title>Progress Example</title>
</head>
<body>
<h1>File Download</h1>
<progress id="fileDownload" value="0" max="100"></progress>
<br>
<button onclick="startDownload()">Start Download</button>
<script>
function startDownload() {
var progress = document.getElementById("fileDownload");
for (var i = 0; i <= 100; i++) {
setTimeout(function() {
progress.value = i;
}, i * 10);
}
}
</script>
</body>
</html>在上面的示例中，我們創(chuàng)建了一個(gè)名為"fileDownload"的<progress>元素，并設(shè)置了初始值為0，最大值為100。我們還添加了一個(gè)按鈕，當(dāng)用戶(hù)點(diǎn)擊該按鈕時(shí)，會(huì)觸發(fā)名為"startDownload"的JavaScript函數(shù)。這個(gè)函數(shù)模擬了一個(gè)文件下載過(guò)程，通過(guò)循環(huán)逐步增加<progress>元素的value屬性值，從而顯示下載進(jìn)度。
11、<meter>標(biāo)簽：度量衡指示器
<meter>標(biāo)簽在HTML中用于表示度量衡指示器，它定義了一個(gè)已知范圍內(nèi)的標(biāo)量測(cè)量值或分?jǐn)?shù)值，通常用于顯示磁盤(pán)使用情況、查詢(xún)結(jié)果的相關(guān)性等。例如：
<p>CPU 使用率： <meter value="0.6" min="0" max="1"></meter> 60%</p>
<p>內(nèi)存使用率： <meter value="0.4" min="0" max="1"></meter> 40%</p>在這個(gè)示例中，我們使用了兩個(gè)<meter>標(biāo)簽來(lái)分別顯示CPU和內(nèi)存的使用率。value屬性表示當(dāng)前的測(cè)量值，min和max屬性分別定義了測(cè)量范圍的最小值和最大值。通過(guò)這些屬性，<meter>標(biāo)簽?zāi)軌蚯逦仫@示出資源的使用情況。
需要注意的是，<meter>標(biāo)簽不應(yīng)該用來(lái)表示進(jìn)度條，對(duì)于進(jìn)度條的表示，應(yīng)該使用<progress>標(biāo)簽。
12、<details>和<summary>標(biāo)簽：詳細(xì)信息展示
<details>和<summary>標(biāo)簽是HTML5中新增的兩個(gè)元素，用于創(chuàng)建可折疊的詳細(xì)信息區(qū)域。
<details>標(biāo)簽定義了一個(gè)可以展開(kāi)或折疊的容器，其中包含一些額外的信息。它通常與<summary>標(biāo)簽一起使用，<summary>標(biāo)簽定義了<details>元素的標(biāo)題，當(dāng)用戶(hù)點(diǎn)擊該標(biāo)題時(shí)，<details>元素的內(nèi)容會(huì)展開(kāi)或折疊。
示例：
<details>
<summary>點(diǎn)擊查看詳細(xì)信息</summary>
<p>這里是一些額外的信息，用戶(hù)可以點(diǎn)擊標(biāo)題來(lái)展開(kāi)或折疊這些信息。</p>
</details>在這個(gè)示例中，我們使用了<details>標(biāo)簽來(lái)創(chuàng)建一個(gè)可折疊的容器，并在其中添加了一個(gè)<summary>標(biāo)簽作為標(biāo)題。當(dāng)用戶(hù)點(diǎn)擊這個(gè)標(biāo)題時(shí)，容器的內(nèi)容會(huì)展開(kāi)或折疊。
總結(jié)：
HTML表單標(biāo)簽是構(gòu)建動(dòng)態(tài)網(wǎng)頁(yè)的基石，它們使得用戶(hù)能夠與網(wǎng)站進(jìn)行有效的交互。
通過(guò)合理地使用這些標(biāo)簽，開(kāi)發(fā)者可以創(chuàng)建出既美觀又功能強(qiáng)大的表單，從而提升用戶(hù)體驗(yàn)和網(wǎng)站的可用性。所以說(shuō)，掌握這些標(biāo)簽的使用，對(duì)于前端開(kāi)發(fā)者來(lái)說(shuō)是至關(guān)重要的。
我們下期再見(jiàn)！
END
文案編輯|云端學(xué)長(zhǎng)
文案配圖|云端學(xué)長(zhǎng)
內(nèi)容由：云端源想分享
今天，前端工程師已經(jīng)成為研發(fā)體系中的重要崗位之一。
可是與此相對(duì)的是，極少大學(xué)的計(jì)算機(jī)專(zhuān)業(yè)愿意開(kāi)設(shè)前端課程，大部分前端工程師的知識(shí)，也都是在實(shí)踐和工作中不斷學(xué)習(xí)的。
最近收到很多同學(xué)的后臺(tái)留言，說(shuō)希望多推出一些前端方向的教程。
今天我們就帶來(lái)一門(mén)適合前端初學(xué)者的課程，可以帶你從零入門(mén) HTML、CSS、JS、React 等前端核心技能，并創(chuàng)建一個(gè)待辦事項(xiàng)的管理應(yīng)用～
項(xiàng)目效果：
課程從最基礎(chǔ)的 HTML/ CSS/JS 講起，還包含了 TypeScript/React/Fabric 等常用技能的講解。由淺入深，層層遞進(jìn)，如果你想快速上手 React 框架，這門(mén)課會(huì)是你非常好的選擇。
訪問(wèn)“實(shí)驗(yàn)樓”官網(wǎng)，搜索“從 0 到 1 構(gòu)建待辦事項(xiàng)應(yīng)用”就能學(xué)習(xí)全部課程內(nèi)容。
以下是課程第一節(jié)的內(nèi)容 —— 「HTML 簡(jiǎn)介」，帶你快速入門(mén)HTML，讓我們一起進(jìn)入前端的大門(mén)看看吧：
「HTML 簡(jiǎn)介」
本實(shí)驗(yàn)是對(duì) HTML 進(jìn)行學(xué)習(xí)，并且較詳細(xì)的說(shuō)明了 Web 是如何工作的。主要內(nèi)容有：HTML 常見(jiàn)標(biāo)簽、HTML 文檔結(jié)構(gòu)、HTML 表格和表單、HTML 有序列表和無(wú)序列表。通過(guò)本節(jié)學(xué)習(xí)，可以構(gòu)建簡(jiǎn)單的 HTML 網(wǎng)頁(yè)。
HTML（超文本標(biāo)記語(yǔ)言）是一種用于創(chuàng)建網(wǎng)頁(yè)的標(biāo)準(zhǔn)標(biāo)記語(yǔ)言。HTML 不需要編譯，可以直接由瀏覽器執(zhí)行，它的解析依賴(lài)于瀏覽器的內(nèi)核。它不是一種編程語(yǔ)言，而是一種標(biāo)記語(yǔ)言。
下面我們來(lái)演示用戶(hù)是如何看到一個(gè)網(wǎng)頁(yè)顯示的。
具體來(lái)講：
首先我們來(lái)看一個(gè)例子：
<!DOCTYPE html>
<html>
<head>
<title>HTML 簡(jiǎn)介</title>
<meta charset="utf-8" />
</head>
<body></body>
</html>這是一個(gè) HTML 的基本骨架，我們將逐步介紹這些是什么意思。
文檔類(lèi)型聲明
<!DOCTYPE html> 是我們的文檔聲明頭。他告訴了瀏覽器，本文檔處理的是 HTML 文檔。
html 標(biāo)簽
html 標(biāo)簽即根元素，此處表示文檔的開(kāi)始，該標(biāo)簽包含兩個(gè)子標(biāo)簽：head 和 body。
head 元素
head 標(biāo)簽下面所包含的標(biāo)簽由 title、meta、link、style、script 等（后面會(huì)講到）。
title 標(biāo)簽
作用：設(shè)置文檔的標(biāo)題或者名稱(chēng)。瀏覽器通常將該標(biāo)簽的內(nèi)容顯示在窗口頂部或者標(biāo)簽頁(yè)上。每個(gè) HTML 文檔只能有一個(gè)，必須有一個(gè) title 標(biāo)簽。
meta 標(biāo)簽
<metacharset="UTF-8"> 聲明字符的編碼格式為 utf-8。
body 標(biāo)簽
body 標(biāo)簽定義文檔的主體，也就是我們的主要內(nèi)容（比如文本、超鏈接、圖像、表格和列表等）。
1.h 系類(lèi)標(biāo)簽
h 標(biāo)簽有六種 h1，h2，h3，h4，h5，h6，它代表著我們的標(biāo)題。
<!DOCTYPE html>
<html>
<head>
<title>HTML 簡(jiǎn)介</title>
<meta charset="utf-8" />
</head>
<body>
<h1>我是一級(jí)標(biāo)題</h1>
<h2>我是二級(jí)標(biāo)題</h2>
<h3>我是三級(jí)標(biāo)題</h3>
<h4>我是四級(jí)標(biāo)題</h4>
<h5>我是五級(jí)標(biāo)題</h5>
<h6>我是六級(jí)標(biāo)題</h6>
</body>
</html>為了大家能更有效的學(xué)習(xí)，請(qǐng)使用實(shí)驗(yàn)樓的環(huán)境。首先我們新建一個(gè)文件，點(diǎn)擊 File，然后 New File，命名為 index.html。
然后輸入上面的代碼。
讓我們來(lái)看一下運(yùn)行效果吧。鼠標(biāo)右鍵 index.html 文件，點(diǎn)擊 Open With，然后點(diǎn)擊 Preview。
最終效果為：
2.p 標(biāo)簽
p 標(biāo)簽是我們的文本標(biāo)簽，p 標(biāo)簽會(huì)自動(dòng)在其兩個(gè)標(biāo)簽之間創(chuàng)建一些空白。刪掉上段代碼 <body> 標(biāo)簽里的內(nèi)容，把下面的內(nèi)容放到 <body> 標(biāo)簽里面去。
<p>我是第一段文字，實(shí)驗(yàn)樓，做實(shí)驗(yàn)，學(xué)編程</p>
<p>我是第二段文字，實(shí)驗(yàn)樓，做實(shí)驗(yàn)，學(xué)編程</p>3. 圖片標(biāo)簽
HTML 的圖像是通過(guò)標(biāo)簽 <img> 來(lái)定義的。語(yǔ)法: <imgsrc="圖片地址"/> 刪掉上段代碼 <body> 標(biāo)簽里的內(nèi)容，把下面的內(nèi)容放到 <body> 標(biāo)簽里面去。
<p>實(shí)驗(yàn)樓圖片：</p>
<img src="https://static.shiyanlou.com/frontend/dist/img/9f43b00.svg" />4.a 標(biāo)簽
<a> 標(biāo)簽是超鏈接標(biāo)簽，意思就是我們點(diǎn)擊它可以跳轉(zhuǎn)到一個(gè)網(wǎng)頁(yè)。刪掉上段代碼 <body> 標(biāo)簽里的內(nèi)容，把下面的內(nèi)容放到 <body> 標(biāo)簽里面去。
<a href="https://www.shiyanlou.com/">實(shí)驗(yàn)樓</a>點(diǎn)擊文字：
跳轉(zhuǎn)到指定網(wǎng)頁(yè)：
篇幅有限，后續(xù)的課程內(nèi)容，請(qǐng)?jiān)?strong>“實(shí)驗(yàn)樓”邊敲代碼邊學(xué)習(xí)～
訪問(wèn)“實(shí)驗(yàn)樓”官網(wǎng)，搜索“從 0 到 1 構(gòu)建待辦事項(xiàng)應(yīng)用”，就能找到課程，繼續(xù)學(xué)習(xí)啦！
假設(shè)需要劫持http響應(yīng)并在html頁(yè)面中注入一段js代碼后再傳回瀏覽器，實(shí)現(xiàn)在瀏覽器出現(xiàn)一個(gè)彈框消息提醒。
由于原始html頁(yè)面編碼格式存在UTF-8、GBK等多種編碼格式，如果注入的js包含中文消息的話(huà)，那么在UTF-8或GBK編碼的頁(yè)面就會(huì)有一個(gè)出現(xiàn)亂碼。有沒(méi)有辦法做到不管是針對(duì)GBK、UTF-8編碼的頁(yè)面都能做到正常顯示而不會(huì)出現(xiàn)亂碼哪？
首先來(lái)分析一下產(chǎn)生亂碼的原因，我們?cè)跒g覽器看到的信息都是通過(guò)圖形學(xué)手段在顯示器上呈現(xiàn)出來(lái)的，而實(shí)際保存在計(jì)算機(jī)硬件上的都是0和1（因?yàn)橛?jì)算機(jī)實(shí)現(xiàn)是基于二進(jìn)制），那么計(jì)算機(jī)要顯示、傳遞信息就需要依靠一套規(guī)則把一串串的0和1識(shí)別為正確的字符，這就是編碼。
例如01000001在ASCII編碼規(guī)則下對(duì)應(yīng)字母A。相同的0/1串，不同的編碼解析出的字符一般是不同的，因此如果html頁(yè)面按照UTF-8的編碼解析正常，那么按照GBK的編碼解析就會(huì)是亂碼了。根據(jù)上面的示意圖，假設(shè)注入的js代碼為utf-8編碼格式，而原始html編碼格式也為UTF-8編碼格式，那么最終注入這部分中的中文就能正常顯示，但是如果原始html為GBK編碼，那注入的這部分js代碼的中文就會(huì)顯示亂碼。
有一種unicode統(tǒng)一編碼字符集，目標(biāo)是把所有文字、字符統(tǒng)一編碼，也就是一串0/1組合在unicode字符集下對(duì)應(yīng)的字符是唯一的，不會(huì)存在歧義。而js是支持解析unicode字符的，那么就可以在注入js中把要顯示的消息統(tǒng)一轉(zhuǎn)換為unicode編碼，瀏覽器端去解析這個(gè)unicode編碼，這樣不管原始html是UTF-8還是GBK，都能正常顯示中文。
原始注入js代碼關(guān)于中文字符的部分
// utf-8編碼格式
let message = "中文";解決亂碼的注入js代碼關(guān)于中文字符的部分
// utf-8編碼格式
let message = "\\u4e2d\\u6587"; // 這個(gè)編碼對(duì)應(yīng)上面的message"中文"注意：
*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
