1.動手

form 表單
table 表格

2. <form>表單元素

1） 簡述：
<form>元素是塊級元素,其開始標(biāo)簽和結(jié)束標(biāo)簽都不能省略壮莹，其中可以包含<button>, <datalist>, <fieldset>, <input>, <keygen>, <label>, <legend>, <meter>, <menus>, <optgroup>, <option>, <output>, <progress>, <select>, <textarea>等表單元素命满。

其中：

• <fieldset>用于組合表單數(shù)據(jù)，每個(gè)<fieleset></fieleset>是一組。
• <legend>元素為<fieldset>元素定義標(biāo)題歼疮。
• <input>是最重要的表單元素杂抽，有很多不同的type屬性，input元素需要定義type韩脏，name缩麸，value，或者checked赡矢，其中杭朱，每個(gè)輸入字段必須設(shè)置一個(gè)name屬性吹散，checked屬性用于設(shè)置按鈕的預(yù)選項(xiàng)弧械。
• <select>元素定義下拉列表，<option>元素定義下拉列表的選項(xiàng)空民，列表通常會把首個(gè)選項(xiàng)顯示為被選選項(xiàng)刃唐，但可以通過selected定義預(yù)定義選項(xiàng)。
• <textarea>元素定義多行輸入字段（文本域）界轩，【rows="10" cols="30"】的意思是定義一個(gè)30個(gè)字符寬画饥，10行高的文本區(qū)。
• <button>元素定義可點(diǎn)擊的按鈕浊猾，請示中為按鈕規(guī)定type屬性抖甘。如果在HTML表單中使用button元素，不同的瀏覽器會提交不同的值与殃。IE將提交<button>與<button/>之間的文本单山，而其他瀏覽器將提交value屬性的內(nèi)容。應(yīng)用<input>元素創(chuàng)建按鈕幅疼。
• <datalist>為<input>預(yù)定義選項(xiàng)列表，起到提示作用昼接。用戶會在他們輸入數(shù)據(jù)時(shí)看到預(yù)定義選項(xiàng)的下拉列表爽篷。

注意：<input>元素的list屬性值必須與<datalist>元素的id屬性值相同。Safari或≤IE9不支持datalist標(biāo)簽慢睡。

2） 作用：
HTML<form>元素表示了文檔中的一個(gè)區(qū)域逐工，這個(gè)區(qū)域包含有交互控制元件，用來向web服務(wù)器提交信息漂辐。

3） 常用屬性：

• action屬性制訂了某個(gè)服務(wù)器腳本來處理被提交的表單泪喊，如果省略action屬性，則action會被設(shè)置為當(dāng)前頁面髓涯。
• method屬性規(guī)定了提交表單的http方法袒啼，默認(rèn)GET，GET最適合少量數(shù)據(jù)且不需要保密的提交，使用GET時(shí)表單數(shù)據(jù)在頁面地址欄中是可見的蚓再。設(shè)置為POST滑肉，安全性更佳，因?yàn)樵陧撁娴刂窓谥斜惶峤坏臄?shù)據(jù)不可見摘仅。
• target屬性值是一個(gè)名字或關(guān)鍵字靶庙，規(guī)定在哪里打開新頁面，默認(rèn)_self,一般設(shè)置為_blank娃属。
  _self: 在當(dāng)前HTML4或HTML5文檔頁面重新加載返回值六荒。這個(gè)是默認(rèn)值。譯注：也就是說如果這個(gè)文檔在一個(gè)frame中的話矾端，self是在當(dāng)前frame（document）中重新加載的掏击，而不是整個(gè)頁面（window）。
  _blank: 以新的HTML4或HTML5文檔窗口加載返回值须床。
  _parent: 在父級的frame中以HTML4或HTML5文檔形式加載返回值铐料，如果沒有父級的frame，行為和_self一致豺旬。
  _top: 如果是HTML 4文檔: 清空當(dāng)前文檔钠惩，加載返回內(nèi)容；HTML5: 在當(dāng)前文檔的最高級內(nèi)加載返回值族阅，如果沒有父級篓跛，和_self的行為一致。
  iframename: 返回值在指定frame中加載坦刀。
  在HTML5中這個(gè)值可以被 <button> 或者 <input> 元素中的 formtarget 屬性重載（覆蓋）愧沟。
• accept-charset屬性規(guī)定被提交表單中使用的字符集，默認(rèn)為頁面字符集鲤遥。
• enctype屬性規(guī)定被提交數(shù)據(jù)的編碼沐寺。
• autocomplete屬性規(guī)定瀏覽器應(yīng)自動完成表單，默認(rèn)為開啟“on”盖奈。
• novalidate屬性規(guī)定瀏覽器不驗(yàn)證表單混坞。

3. input標(biāo)簽常用屬性及作用

1）簡述：
<input>標(biāo)簽用于搜集用戶信息，根據(jù)不同的type屬性值钢坦，輸入字段擁有很多種形式究孕，可以是文本字段、復(fù)選框爹凹、掩碼后的文本控件厨诸、單選按鈕等。

2）常用屬性及作用：

type屬性：規(guī)定input元素的類型禾酱，可設(shè)置值如下：

• text：定義共文本輸入的單行字段微酬，默認(rèn)值绘趋。
• password：定義密碼字段，字段中的字符會做掩碼處理得封，顯示為星號或?qū)嵭娜Α?/li>
• submit：定義提交表單數(shù)據(jù)至表單處理程序（即form元素的action屬性值）的按鈕埋心。如果省略了提交按鈕的value屬性，那么該按鈕將獲得默認(rèn)文本忙上，一般是“提交”這兩個(gè)字拷呆。
• reset：定義重設(shè)按鈕。
• radio：定義單選按鈕疫粥。
• checkbox：定義復(fù)選框茬斧，即多選。
• button：定義按鈕梗逮。
• hidden：定義隱藏輸入字段项秉。
• number：用于應(yīng)該包含數(shù)字值的輸入字段，可自定義數(shù)字限制慷彤。
• data: 用于應(yīng)該包含日期的輸入字段,日期也可定義輸入限制娄蔼。
• color：用于應(yīng)該包含顏色的輸入字段。
• range：用于應(yīng)該包含一定范圍內(nèi)的值的輸入字段底哗，可用min岁诉、max、step跋选、value屬性規(guī)定限制涕癣。
• month：選擇月份和年份。
• week：選擇周和年前标。
• time：選擇時(shí)間-無時(shí)區(qū)坠韩。
• datatime：選擇日期與時(shí)間-有時(shí)區(qū)。
• datetime-local：選擇日期和時(shí)間-無時(shí)區(qū)炼列。
• email：用于應(yīng)該包含電子郵件地址的輸入字段只搁，若瀏覽器支持，能夠在被提交時(shí)自動對電子郵件地址進(jìn)行驗(yàn)證俭尖，某些智能手機(jī)會識別email類型须蜗，并在鍵盤增加".com" 以匹配電子郵件輸入。
• search：用于搜索字段（搜索字段的表現(xiàn)類似常規(guī)文本字段）目溉。
• tel：用于應(yīng)該包含電話號碼的輸入字段，目前只有safari 8支持菱农。
• url：用于應(yīng)該包含URL地址的輸入字段缭付，若瀏覽器支持，能夠在提交時(shí)自動驗(yàn)證url字符循未，某些智能手機(jī)識別url類型陷猫，并向鍵盤添加".com"以匹配url輸入秫舌。

name：定義input元素的名稱。

value：規(guī)定字段的初始值绣檬。

readonly：規(guī)定輸入字段只讀足陨。readonly="readonly"。

disabled：規(guī)定輸入字段是禁用的娇未，被禁用的元素是不可用不可點(diǎn)擊并且不可提交墨缘。disabled="disabled"。

size：規(guī)定輸入字段的尺寸零抬，如果size="5"镊讼，那么一行中可輸入無數(shù)個(gè)字符但一行中只有5個(gè)可見字符。

maxlength：規(guī)定輸入字段允許的最大長度平夜。如果maxlength="5"蝶棋，那么一行中最多可輸入5個(gè)字符。

placeholder：規(guī)定幫助用戶填寫輸入字段的提示（樣本值或有關(guān)格式的簡短描述）忽妒，該提示會在用戶輸入值之前顯示在輸入字段中玩裙。

list：引用包含輸入字段的與定義選項(xiàng)的datalist。

src：定義以提交按鈕形式顯示的圖像的 URL段直。

step：規(guī)定<input>元素的合法數(shù)字間隔,如果step="3"吃溅，則合法數(shù)字應(yīng)該是-3、0坷牛、3罕偎、6、等京闰。只能是3的整數(shù)倍颜及。可與max以及min屬性一同使用蹂楣，來創(chuàng)建合法值的范圍俏站。

4. post和get方式的區(qū)別

• GET
  用GET方法提交的表單數(shù)據(jù)只經(jīng)過了簡單的編碼，同時(shí)它將作為URL的一部分向服務(wù)器發(fā)送痊土，URL具有長度限制肄扎，即GET方式提交的數(shù)據(jù)大小有限制，如<Http://localhost/login.php?username=aa&password=1234>赁酝，很容易辨認(rèn)出表單提交的內(nèi)容犯祠，因此，如果使用GET方法來提交表單數(shù)據(jù)就存在著安全隱患酌呆。
• POST
  是GET的一個(gè)替代方法衡载，很適合提交表單數(shù)據(jù)，尤其是大批量的數(shù)據(jù)隙袁。POST方法克服了GET方法的一些缺點(diǎn)痰娱。通過POST方法提交表單數(shù)據(jù)時(shí)弃榨，數(shù)據(jù)不是作為URL請求的一部分而是作為標(biāo)準(zhǔn)數(shù)據(jù)放在HTTP的body中傳送給Web服務(wù)器，這就克服了GET方法中的信息無法保密和數(shù)據(jù)量太小的缺點(diǎn)梨睁。因此鲸睛，出于安全的考慮以及對用戶隱私的尊重，通常表單提交時(shí)采用POST方法坡贺。
• 比較

5. input中name的作用

name屬性規(guī)定input元素的名稱官辈，用于對提交到服務(wù)器后的表單數(shù)據(jù)進(jìn)行標(biāo)識，或是在客戶端通過javascript引用表單數(shù)據(jù)拴念。

注意：瀏覽器會根據(jù)name來設(shè)定發(fā)送到服務(wù)器的request钧萍，在表單的接收頁面只接收有name的元素，即只有設(shè)置了name屬性的表單元素才能在提交表單時(shí)傳遞它們的值政鼠，賦id的元素通過表單是接收不到值的风瘦。

6. radio如何分組

<input type="radio" />定義單選按鈕。radio使用name屬性來分組公般，所有name屬性相同的radio使用時(shí)其中只有一個(gè)會被選中万搔。

<input type="radio" value="male" name="sex"/>男
<input type="radio" value="female" name="sex"/>女

以上兩個(gè)radio就是一組。

7. placeholder屬性的作用?

placeholder:規(guī)定用于描述輸入字段預(yù)期值的提示（樣本值或有關(guān)格式的簡短描述）官帘。該提示會在用戶輸入值之前顯示在輸入字段中瞬雹。適用于如下輸入類型：<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" />定義隱藏字段。隱藏字段對于用戶是不可見的涌哲，通常會存儲一個(gè)默認(rèn)值胖缤，它們的值也可以由 JavaScript 進(jìn)行修改。
作用：

• 收集或發(fā)送信息以被處理表單的程序所使用阀圾，提交表單時(shí)隱藏域的信息也會被一起發(fā)送到服務(wù)器哪廓。
• 所有瀏覽器都支持隱藏域，操作方便簡單初烘、對長度限制不大涡真，且避免了用戶禁用cookie的煩惱。
• 一個(gè)網(wǎng)頁有多個(gè)form肾筐，而多個(gè)form不能同時(shí)提交但他們確實(shí)相互作用哆料，這種情況下我們可以在form中添加隱藏域使它們聯(lián)系起來。

<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按鈕剧劝，輸入的內(nèi)容會發(fā)送到服務(wù)器上名為form_action.asp的頁面，服務(wù)器處理了我的輸入并返回結(jié)果"email=dolby.dot%40gmail.com&country=China"抓歼。

9. html5語義化新標(biāo)簽

• <header>：定義文檔或節(jié)的頁眉
• <nav>：定義導(dǎo)航鏈接的容器
• <section>：定義文檔中的節(jié)
• <article>：定義獨(dú)立的自包含文章
• <aside>：定義內(nèi)容之外的內(nèi)容（比如側(cè)欄）
• <footer>：定義文檔或節(jié)的頁腳
• <details>：定義額外的細(xì)節(jié)
• <summary>：定義details> 的標(biāo)題

10. CSRF攻擊是什么讥此，如何防范？

簡介：
CSRF（Cross-Site Request Forgery谣妻，跨站點(diǎn)偽造請求）是一種網(wǎng)絡(luò)攻擊方式萄喳，該攻擊可以在受害者毫不知情的情況下以受害者名義偽造請求發(fā)送給受攻擊站點(diǎn)，從而在未授權(quán)的情況下執(zhí)行在權(quán)限保護(hù)之下的操作蹋半，具有很大的危害性他巨。
可以這樣理解CSRF攻擊：攻擊者盜用了你的身份，以你的名義發(fā)送惡意請求减江，對服務(wù)器來說這個(gè)請求是完全合法的染突，但是卻完成了攻擊者所期望的一個(gè)操作，比如以你的名義發(fā)送郵件辈灼、發(fā)消息份企，盜取你的賬號，添加系統(tǒng)管理員巡莹，甚至于購買商品司志、虛擬貨幣轉(zhuǎn)賬等。

原理：
SRF攻擊原理如圖所示降宅。其中Web A為存在CSRF漏洞的網(wǎng)站骂远，Web B為攻擊者構(gòu)建的惡意網(wǎng)站，User C為Web A網(wǎng)站的合法用戶腰根。

• 用戶C打開瀏覽器激才，訪問受信任網(wǎng)站A，輸入用戶名和密碼請求登錄網(wǎng)站A额嘿；
• 在用戶信息通過驗(yàn)證后瘸恼，網(wǎng)站A產(chǎn)生Cookie信息并返回給瀏覽器，此時(shí)用戶登錄網(wǎng)站A成功岩睁，可以正常發(fā)送請求到網(wǎng)站A钞脂；
• 用戶未退出網(wǎng)站A之前，在同一瀏覽器中捕儒，打開一個(gè)TAB頁訪問網(wǎng)站B冰啃；
• 網(wǎng)站B接收到用戶請求后，返回一些攻擊性代碼刘莹，并發(fā)出一個(gè)請求要求訪問第三方站點(diǎn)A阎毅；
• 瀏覽器在接收到這些攻擊性代碼后，根據(jù)網(wǎng)站B的請求点弯，在用戶不知情的情況下攜帶Cookie信息扇调，向網(wǎng)站A發(fā)出請求。網(wǎng)站A并不知道該請求其實(shí)是由B發(fā)起的抢肛，所以會根據(jù)用戶C的Cookie信息以C的權(quán)限處理該請求狼钮，導(dǎo)致來自網(wǎng)站B的惡意代碼被執(zhí)行碳柱。

防御手段：
養(yǎng)成良好上網(wǎng)習(xí)慣，不要輕易點(diǎn)擊鏈接或圖片熬芜，及時(shí)退出長時(shí)間不使用的已登錄賬戶莲镣，安裝防護(hù)軟件并及時(shí)更新。