一. post和get方式提交數(shù)據(jù)的區(qū)別
- 安全性：get提交的數(shù)據(jù)url可以看得到茁裙，post看不到坛掠，并且get提交的數(shù)據(jù)會(huì)在瀏覽器的記錄中，安全性不好
- 提交原理：get是以key=value的形式拼接到url中系宫，post講數(shù)據(jù)放入http請(qǐng)求體中
- 數(shù)據(jù)量：get提交的數(shù)據(jù)受瀏覽器限制铆铆，url不可能拼接無(wú)限長(zhǎng)，post理論上無(wú)限制傀顾，受服務(wù)器限制
- 使用場(chǎng)景：get 重在 "要"數(shù)據(jù),get得到的數(shù)據(jù)可以暫時(shí)緩存起來(lái), post 重在"給"數(shù)據(jù)
二.form表單中的常用標(biāo)簽及其屬性
1.form標(biāo)簽
<form action="" method="" target="_target" enctype=""></form>
說(shuō)明：
action:表單提交的地址
method：提交表單的方法襟铭，常見(jiàn)的有post，get，（不支持put蝌矛，patch道批，delete）
target：在何處打開(kāi)url，例如_target為在新頁(yè)面打開(kāi)提交的地址
enctype:加密類型入撒，有application/x-www-form-urlencoded 隆豹，text/plain ，multipart/form-data
2.input標(biāo)簽-text類型
<label for="username">用戶名：</label>
<input type="text" placeholder="username" name="username" value="林克">
說(shuō)明：
<label>標(biāo)簽的作用：擴(kuò)大選擇范圍茅逮，鼠標(biāo)點(diǎn)擊用戶名三個(gè)字也可以將輸入框變成focus狀態(tài)
placeholder：在輸入框中顯示一個(gè)提示璃赡，沒(méi)有其他作用
name: 提交數(shù)據(jù)時(shí)，標(biāo)識(shí)該文本框的key
value：提交數(shù)據(jù)時(shí)献雅，標(biāo)識(shí)該文本框的默認(rèn)value碉考，修改后value會(huì)變成輸入的數(shù)據(jù)
3.input標(biāo)簽-submit類型
<input type="submit" value="提交">
說(shuō)明：
該標(biāo)簽會(huì)顯示一個(gè)按鈕，點(diǎn)擊會(huì)提交該標(biāo)簽所在form表單下的數(shù)據(jù)挺身，value為該按鈕上顯示的字
注： <button>提交</button>和該標(biāo)簽效果一樣侯谁，點(diǎn)擊會(huì)提交；而<input type="button" value="提交">點(diǎn)擊不會(huì)有提交效果
4.input標(biāo)簽-radio(單選框)章钾，checkbox（復(fù)選框）類型
<input type="radio" name="sex" value="boy" checked>
<input type="radio" name="sex" value="girl">
<input type="checkbox" name="hobby" value="籃球" checked>
<input type="checkbox" name="hobby" value="足球">
說(shuō)明：
name相同的radio即為一組墙贱，一組內(nèi)的單選框只能選擇一個(gè)
checked：表示默認(rèn)選擇的單選框
5.其他input標(biāo)簽類型
<input type="date"> <!--日歷-->
<input type="file" accept="img/png"> <!--選擇文件，accept設(shè)置只能接受該文件類型-->
<input type="number"> <!--只能輸入數(shù)字-->
<input type="search"> <!--輸入完內(nèi)容贱傀，回車即可提交-->
<input type="email"> <!--只有輸入的文本為email形式才能提交-->
<input type="url"> <!--只有輸入的文本為url形式才能提交-->
<input type="range"> <!--范圍選擇條-->
<input type="color"> <!--選擇顏色-->
<input type="reset" value="重置"> <!--重置表單中的所有內(nèi)容為初始默認(rèn)值-->
<input type="hidden" name="csrf" value="66666"> <!--為了解決CSRF安全問(wèn)題,詳見(jiàn)三.補(bǔ)充-->
6.select標(biāo)簽
<select name="addr">
<option value="shanghai">上海</option>
<option value="shanghai">北京</option>
<option value="shanghai" selected>南京</option>
</select>
說(shuō)明：
name：選擇列表的提交的key惨撇，value:選擇列表提交的value
option：代表選擇列表的每一項(xiàng)
上海，北京府寒，南京：選擇列表每一項(xiàng)顯示的內(nèi)容
selected：默認(rèn)選中的選擇列表項(xiàng)
7.textare標(biāo)簽
<textare name="comment">
此處可以輸入多行內(nèi)容
</textare>
三.補(bǔ)充
1.語(yǔ)義化HTML5標(biāo)簽
選擇合適的標(biāo)簽魁衙、使用合理的代碼結(jié)構(gòu)，便于開(kāi)發(fā)者和視覺(jué)障礙人士閱讀株搔，同時(shí)讓瀏覽器的爬蟲和機(jī)器很好地解析剖淀。
- <header>:頁(yè)頭
- <nav>:導(dǎo)航欄
- <main>:主內(nèi)容 ，后面一般接 <article>,<section>,<div>
- <aside>:側(cè)邊欄
- <footer>:頁(yè)尾
2.CSRF 攻擊是什么邪狞？如何防范?
中文名：跨站請(qǐng)求偽造祷蝌。其原理是攻擊者構(gòu)造網(wǎng)站后臺(tái)某個(gè)功能接口的請(qǐng)求地址，誘導(dǎo)用戶去點(diǎn)擊或者用特殊方法讓該請(qǐng)求地址自動(dòng)加載帆卓。用戶在登錄狀態(tài)下這個(gè)請(qǐng)求被服務(wù)端接收后會(huì)被誤以為是用戶合法的操作。對(duì)于 GET 形式的接口地址可輕易被攻擊米丘，對(duì)于 POST 形式的接口地址也不是百分百安全剑令，攻擊者可誘導(dǎo)用戶進(jìn)入帶 Form 表單可用POST方式提交參數(shù)的頁(yè)面。
防范：
服務(wù)端在收到路由請(qǐng)求時(shí)拄查，生成一個(gè)隨機(jī)數(shù)吁津，在渲染請(qǐng)求頁(yè)面時(shí)把隨機(jī)數(shù)埋入頁(yè)面（一般埋入 form 表單內(nèi)，）
1.服務(wù)端設(shè)置setCookie，把該隨機(jī)數(shù)作為cookie或者session種入用戶瀏覽器
2.當(dāng)用戶發(fā)送 GET 或者 POST 請(qǐng)求時(shí)帶上_csrf_token參數(shù)（對(duì)于 Form 表單直接提交即可碍脏，因?yàn)闀?huì)自動(dòng)把當(dāng)3.前表單內(nèi)所有的 input 提交給后臺(tái)梭依，包括_csrf_token）
4.后臺(tái)在接受到請(qǐng)求后解析請(qǐng)求的cookie獲取_csrf_token的值，然后和用戶請(qǐng)求提交的_csrf_token做個(gè)比較典尾，如果相等表示請(qǐng)求是合法的役拴。
