1.動手
2. <form>表單元素
1） 簡述：
<form>元素是塊級元素,其開始標簽和結束標簽都不能省略，其中可以包含<button>, <datalist>, <fieldset>, <input>, <keygen>, <label>, <legend>, <meter>, <menus>, <optgroup>, <option>, <output>, <progress>, <select>, <textarea>等表單元素。
其中：
-
<fieldset>用于組合表單數據，每個<fieleset></fieleset>是一組。 -
<legend>元素為<fieldset>元素定義標題。 -
<input>是最重要的表單元素，有很多不同的type屬性，input元素需要定義type，name，value，或者checked，其中，每個輸入字段必須設置一個name屬性，checked屬性用于設置按鈕的預選項。 -
<select>元素定義下拉列表，<option>元素定義下拉列表的選項，列表通常會把首個選項顯示為被選選項，但可以通過selected定義預定義選項。 -
<textarea>元素定義多行輸入字段（文本域），【rows="10" cols="30"】的意思是定義一個30個字符寬，10行高的文本區。 -
<button>元素定義可點擊的按鈕，請示中為按鈕規定type屬性。如果在HTML表單中使用button元素，不同的瀏覽器會提交不同的值。IE將提交<button>與<button/>之間的文本，而其他瀏覽器將提交value屬性的內容。應用<input>元素創建按鈕。 -
<datalist>為<input>預定義選項列表，起到提示作用。用戶會在他們輸入數據時看到預定義選項的下拉列表。
注意：<input>元素的list屬性值必須與<datalist>元素的id屬性值相同。Safari或≤IE9不支持datalist標簽。
2） 作用：
HTML<form>元素表示了文檔中的一個區域，這個區域包含有交互控制元件，用來向web服務器提交信息。
3） 常用屬性：
-
action屬性制訂了某個服務器腳本來處理被提交的表單，如果省略action屬性，則action會被設置為當前頁面。 -
method屬性規定了提交表單的http方法，默認GET，GET最適合少量數據且不需要保密的提交，使用GET時表單數據在頁面地址欄中是可見的。設置為POST，安全性更佳，因為在頁面地址欄中被提交的數據不可見。 -
target屬性值是一個名字或關鍵字，規定在哪里打開新頁面，默認_self,一般設置為_blank。
_self: 在當前HTML4或HTML5文檔頁面重新加載返回值。這個是默認值。譯注：也就是說如果這個文檔在一個frame中的話，self是在當前frame（document）中重新加載的，而不是整個頁面（window）。
_blank: 以新的HTML4或HTML5文檔窗口加載返回值。
_parent: 在父級的frame中以HTML4或HTML5文檔形式加載返回值，如果沒有父級的frame，行為和_self一致。
_top: 如果是HTML 4文檔: 清空當前文檔，加載返回內容；HTML5: 在當前文檔的最高級內加載返回值，如果沒有父級，和_self的行為一致。
iframename: 返回值在指定frame中加載。
在HTML5中這個值可以被<button>或者<input>元素中的 formtarget 屬性重載（覆蓋）。 -
accept-charset屬性規定被提交表單中使用的字符集，默認為頁面字符集。 -
enctype屬性規定被提交數據的編碼。 -
autocomplete屬性規定瀏覽器應自動完成表單，默認為開啟“on”。 -
novalidate屬性規定瀏覽器不驗證表單。
3. input標簽常用屬性及作用
1）簡述：
<input>標簽用于搜集用戶信息，根據不同的type屬性值，輸入字段擁有很多種形式，可以是文本字段、復選框、掩碼后的文本控件、單選按鈕等。
2）常用屬性及作用：
type屬性：規定input元素的類型，可設置值如下：
- text：定義共文本輸入的單行字段，默認值。
- password：定義密碼字段，字段中的字符會做掩碼處理，顯示為星號或實心圈。
- submit：定義提交表單數據至表單處理程序（即form元素的action屬性值）的按鈕。如果省略了提交按鈕的value屬性，那么該按鈕將獲得默認文本，一般是“提交”這兩個字。
- reset：定義重設按鈕。
- radio：定義單選按鈕。
- checkbox：定義復選框，即多選。
- button：定義按鈕。
- hidden：定義隱藏輸入字段。
- number：用于應該包含數字值的輸入字段，可自定義數字限制。
- data: 用于應該包含日期的輸入字段,日期也可定義輸入限制。
- color：用于應該包含顏色的輸入字段。
- range：用于應該包含一定范圍內的值的輸入字段，可用min、max、step、value屬性規定限制。
- month：選擇月份和年份。
- week：選擇周和年。
- time：選擇時間-無時區。
- datatime：選擇日期與時間-有時區。
- datetime-local：選擇日期和時間-無時區。
- email：用于應該包含電子郵件地址的輸入字段，若瀏覽器支持，能夠在被提交時自動對電子郵件地址進行驗證，某些智能手機會識別email類型，并在鍵盤增加".com" 以匹配電子郵件輸入。
- search：用于搜索字段（搜索字段的表現類似常規文本字段）。
- tel：用于應該包含電話號碼的輸入字段，目前只有safari 8支持。
- url：用于應該包含URL地址的輸入字段，若瀏覽器支持，能夠在提交時自動驗證url字符，某些智能手機識別url類型，并向鍵盤添加".com"以匹配url輸入。
name：定義input元素的名稱。
value：規定字段的初始值。
readonly：規定輸入字段只讀。readonly="readonly"。
disabled：規定輸入字段是禁用的，被禁用的元素是不可用不可點擊并且不可提交。disabled="disabled"。
size：規定輸入字段的尺寸，如果size="5"，那么一行中可輸入無數個字符但一行中只有5個可見字符。
maxlength：規定輸入字段允許的最大長度。如果maxlength="5"，那么一行中最多可輸入5個字符。
placeholder：規定幫助用戶填寫輸入字段的提示（樣本值或有關格式的簡短描述），該提示會在用戶輸入值之前顯示在輸入字段中。
list：引用包含輸入字段的與定義選項的datalist。
src：定義以提交按鈕形式顯示的圖像的 URL。
step：規定<input>元素的合法數字間隔,如果step="3"，則合法數字應該是-3、0、3、6、等。只能是3的整數倍。可與max以及min屬性一同使用，來創建合法值的范圍。
4. post和get方式的區別
-
GET
用GET方法提交的表單數據只經過了簡單的編碼，同時它將作為URL的一部分向服務器發送，URL具有長度限制，即GET方式提交的數據大小有限制，如<Http://localhost/login.php?username=aa&password=1234>，很容易辨認出表單提交的內容，因此，如果使用GET方法來提交表單數據就存在著安全隱患。 -
POST
是GET的一個替代方法，很適合提交表單數據，尤其是大批量的數據。POST方法克服了GET方法的一些缺點。通過POST方法提交表單數據時，數據不是作為URL請求的一部分而是作為標準數據放在HTTP的body中傳送給Web服務器，這就克服了GET方法中的信息無法保密和數據量太小的缺點。因此，出于安全的考慮以及對用戶隱私的尊重，通常表單提交時采用POST方法。 - 比較
| GET | POST | |
|---|---|---|
| 后退刷新 | 無特殊事件 | 數據會被重新提交到服務器 |
| 書簽收藏 | 可收藏 | 不可收藏 |
| 數據緩存 | 能被緩存 | 不能被緩存 |
| 編碼類型 | application/x-www-form-url | application/x-www-form-urlencoded或multipart/form-data |
| 歷史記錄 | 參數保存在瀏覽器歷史中 | 參數不會被保存在歷史記錄中 |
| 數據長度 | 受限于URL長度（最大2048個字符） | 無限制 |
| 字符集 | ASCII | 無限制（允許二進制數據） |
| 安全性 | 差 | 較好 |
5. input中name的作用
name屬性規定input元素的名稱，用于對提交到服務器后的表單數據進行標識，或是在客戶端通過javascript引用表單數據。
注意：瀏覽器會根據name來設定發送到服務器的request，在表單的接收頁面只接收有name的元素，即只有設置了name屬性的表單元素才能在提交表單時傳遞它們的值，賦id的元素通過表單是接收不到值的。
6. radio如何分組
<input type="radio" />定義單選按鈕。radio使用name屬性來分組，所有name屬性相同的radio使用時其中只有一個會被選中。
<input type="radio" value="male" name="sex"/>男
<input type="radio" value="female" name="sex"/>女
以上兩個radio就是一組。
7. placeholder屬性的作用?
placeholder:規定用于描述輸入字段預期值的提示（樣本值或有關格式的簡短描述）。該提示會在用戶輸入值之前顯示在輸入字段中。適用于如下輸入類型：<input type="text|search|url|tel|email|password">。
<!DOCTYPE HTML>
<html>
<body>
<h1>html 5為input元素新增的屬性placeholder</h1>
<form action="/example/html5/demo_form.asp" method="get">
<input type="search" name="user_search" placeholder="Search W3School" />
<input type="submit" />
</form>
</body>
</html>
僅僅是提示值，至于是否按照提示寫是另一回事。
8. 舉例說明type=hidden隱藏域的作用?
<input type="hidden" />定義隱藏字段。隱藏字段對于用戶是不可見的，通常會存儲一個默認值，它們的值也可以由 JavaScript 進行修改。
作用：
- 收集或發送信息以被處理表單的程序所使用，提交表單時隱藏域的信息也會被一起發送到服務器。
- 所有瀏覽器都支持隱藏域，操作方便簡單、對長度限制不大，且避免了用戶禁用cookie的煩惱。
- 一個網頁有多個form，而多個form不能同時提交但他們確實相互作用，這種情況下我們可以在form中添加隱藏域使它們聯系起來。
<html>
<body>
<form action="/example/html/form_action.asp" method="get">
Email: <input type="text" name="email" /><br />
<input type="hidden" name="country" value="China" />
<input type="submit" value="Submit" />
</form>
</body>
</html>
輸入email地址dolby.dot@gmail.com，單擊Sumbit按鈕，輸入的內容會發送到服務器上名為form_action.asp的頁面，服務器處理了我的輸入并返回結果"email=dolby.dot%40gmail.com&country=China"。
9. html5語義化新標簽
-
<header>：定義文檔或節的頁眉 -
<nav>：定義導航鏈接的容器 -
<section>：定義文檔中的節 -
<article>：定義獨立的自包含文章 -
<aside>：定義內容之外的內容（比如側欄） -
<footer>：定義文檔或節的頁腳 -
<details>：定義額外的細節 -
<summary>：定義details>的標題
10. CSRF攻擊是什么，如何防范？
簡介：
CSRF（Cross-Site Request Forgery，跨站點偽造請求）是一種網絡攻擊方式，該攻擊可以在受害者毫不知情的情況下以受害者名義偽造請求發送給受攻擊站點，從而在未授權的情況下執行在權限保護之下的操作，具有很大的危害性。
可以這樣理解CSRF攻擊：攻擊者盜用了你的身份，以你的名義發送惡意請求，對服務器來說這個請求是完全合法的，但是卻完成了攻擊者所期望的一個操作，比如以你的名義發送郵件、發消息，盜取你的賬號，添加系統管理員，甚至于購買商品、虛擬貨幣轉賬等。
原理：
SRF攻擊原理如圖所示。其中Web A為存在CSRF漏洞的網站，Web B為攻擊者構建的惡意網站，User C為Web A網站的合法用戶。
- 用戶C打開瀏覽器，訪問受信任網站A，輸入用戶名和密碼請求登錄網站A；
- 在用戶信息通過驗證后，網站A產生Cookie信息并返回給瀏覽器，此時用戶登錄網站A成功，可以正常發送請求到網站A；
- 用戶未退出網站A之前，在同一瀏覽器中，打開一個TAB頁訪問網站B；
- 網站B接收到用戶請求后，返回一些攻擊性代碼，并發出一個請求要求訪問第三方站點A；
- 瀏覽器在接收到這些攻擊性代碼后，根據網站B的請求，在用戶不知情的情況下攜帶Cookie信息，向網站A發出請求。網站A并不知道該請求其實是由B發起的，所以會根據用戶C的Cookie信息以C的權限處理該請求，導致來自網站B的惡意代碼被執行。
防御手段：
養成良好上網習慣，不要輕易點擊鏈接或圖片，及時退出長時間不使用的已登錄賬戶，安裝防護軟件并及時更新。
