Task7

Version two

問答

一、有序列表、無序列表、自定義列表如何使用？寫個(gè)簡單的例子。三者在語義上有什么區(qū)別？在哪些情況下使用哪種（重要）？ 如何嵌套？

• 例子鏈接
• 區(qū)別

1. 有序列表：列表內(nèi)容對順序有要求，如排名，步驟等。
2. 無序列表：列表內(nèi)容對順序無要求，如 愛好，特長等。
3. 自定義列表：用戶按照自己需求自定義列表。當(dāng)有序列表和無序列表都不滿足我們的要求時(shí)，我們需要按自己的要求去定義列表。

• <dl> define list

1. <dt> define the title of list
   用于生成定義列表中各列表項(xiàng)的標(biāo)題，重復(fù)使用可以定義多個(gè)列表項(xiàng)的標(biāo)題。注意：其中不能包含 hx 元素。
2. <dd> descrime the define of list
   用于生成定義列表各列表項(xiàng)的說明文字段，重復(fù)使用可以定義多個(gè)說明文字段。dd是對應(yīng)dt的簡短說明或解釋。
3. 我們可以看到，<dt></dt>中間的文字即時(shí)我們沒有進(jìn)行縮進(jìn)它也會向前靠攏，而<dd></dd>中間的內(nèi)容則自動向后縮進(jìn)。
   
   0_1478493063062_upload-722fe46e-9db8-41f1-b44f-abc411cfb4a9

• 發(fā)現(xiàn)網(wǎng)站上用ol和dl很少，基本上都是用的ul。
• ul和div的使用：

1. wrong鏈接
2. rignt鏈接

二、如何去除列表前面的點(diǎn)或者數(shù)字？

• ul,ol dl的list-style的屬性值設(shè)置為none即可。

三、class 和 id 有什么區(qū)別？什么時(shí)候用 class 什么時(shí)候用 id？

• W3C標(biāo)準(zhǔn)這樣規(guī)定的，在同一個(gè)頁面內(nèi)，不允許有相同名字的id對象出現(xiàn)，但是允許相同名字的class。
• id用于布局，比如我給整個(gè)頁面設(shè)置頭部，內(nèi)容，尾部。這個(gè)時(shí)候使用id，一般網(wǎng)站分為頭，體，腳部分，因?yàn)榭紤]到它們在同一個(gè)頁面只會出現(xiàn)一次，所以用id，其他的，比如說你定義了一個(gè)顏色為red的class，在同一個(gè)頁面也許要多次用到，就用class定義。這樣整個(gè)結(jié)構(gòu)就不會亂。
• 區(qū)別

1. lass選擇器設(shè)置的樣式是用.開頭，id選擇器的樣式是用#開頭

2. 權(quán)值不同：id選擇器的權(quán)值高于類選擇器

3. 分層后，在一個(gè)大的區(qū)塊中，id選擇器中能使用一次，class選擇器可以隨意套用

4. 如果id被調(diào)用了多次，對接的后臺就麻煩了，因?yàn)橐獜姆?wù)器的數(shù)據(jù)庫里面調(diào)取一些東西，或者是用id做一些設(shè)置，如果重復(fù)使用，那么，后臺就全亂了，讀取數(shù)據(jù)也不會準(zhǔn)確。

5. 另外，當(dāng)涉及到j(luò)s時(shí)候，有些動畫的js需要查找html中的id進(jìn)行動畫設(shè)置，重復(fù)使用的話，相同的id將都會被找到，并添加相同的動畫。

四、塊級元素、行內(nèi)元素是什么？有什么區(qū)別？分別對應(yīng)哪些常用標(biāo)簽？

• 實(shí)例鏈接
• 塊級元素：無論內(nèi)容多少，都會獨(dú)占一行的元素叫塊級元素；如div、p、h1...h6、table、tr、ul、li、dl、dt、form等。
• 行內(nèi)元素：不會獨(dú)占一行，并且行級元素與行級元素間會橫向排列，除非內(nèi)容太長，否則不會自動換行，寬度隨內(nèi)容改變；如a、span、img、input、button、em、textarea等。
• 兩者有什么區(qū)別

1. 塊級元素總是另起一行，行內(nèi)元素與行內(nèi)元素間則總是在一行顯示（除非設(shè)置了寬度或者內(nèi)容溢出）。
2. 手動給行內(nèi)元素設(shè)置寬高是無效的，身寬高由自身決定，由自身內(nèi)容撐開。設(shè)置左右padding和margin有效，設(shè)置上下padding和margin不占據(jù)空間。但是如果我們設(shè)置了邊框，調(diào)大padding的值可以看見邊框變大。但是不占據(jù)空間！
   例子：我們給邊框里面設(shè)置background：red發(fā)現(xiàn)會覆蓋其他元素，其實(shí)就是沒有占據(jù)空間的原因。這時(shí)候我們可以用line-height來撐開空間。或者display：inlineblock（可以像行內(nèi)元素一樣在同一行排列，也可以像塊級元素一樣設(shè)置寬、高、padding等等。必須在ie8及以上才兼容） 如果用display:block就必須用clear清除浮動，否則就不能排在一行，會跑到下面去。

五、display: block、display: inline、display: inline-block分別有什么作用?

• display:block:將元素轉(zhuǎn)為塊級元素，使具有塊級元素特性，使元素的外邊距和長寬可以控制。
• display:inline:將元素轉(zhuǎn)為行內(nèi)元素，使具有行內(nèi)元素特性是元素能和其他行內(nèi)元素排在一排。
• display: inline-block：將元素轉(zhuǎn)為塊級行內(nèi)元素，使其同時(shí)具有行內(nèi)和塊級元素特性，使元素的長寬和邊距可控，同時(shí)也能和其他元素排在一排。

六、下面代碼是做什么的？抄寫一遍下面的代碼，注意class和id的使用及命名方式

• 代碼作用：用id和class搭建了一個(gè)網(wǎng)站大致的簡易框架。使得各個(gè)模塊在頁面居中顯示。注意代碼格式要寫對（利于debug），冒號不要丟。
• id是唯一的常用于大區(qū)塊的布局，而一個(gè)class可以被多個(gè)元素調(diào)用。常用于id內(nèi)部小的模塊或元素的樣式定義
• 命名方式：頭部區(qū)域用herder，內(nèi)容區(qū)用content，腳注用footer，側(cè)邊欄用aside，導(dǎo)航欄用nav(navigation)，這是語義化的一種表現(xiàn)。

七、如何理解 HTML CSS 語義化? 在平時(shí)寫代碼的過程中要注意哪些細(xì)節(jié)

• 什么是HTML語義化？
  選擇合適的標(biāo)簽（代碼語義化）、使用合理的代碼結(jié)構(gòu)（內(nèi)容語義化），便于開發(fā)者閱讀，同時(shí)讓瀏覽器的爬蟲和機(jī)器很好地解析。
• 為什么語義化？

1. 為了在沒有CSS的情況下，頁面也能呈現(xiàn)出很好地內(nèi)容結(jié)構(gòu)、
2. 有利于SEO（Search Engine Optimization）：和搜索引擎建立良好溝通，有助于爬蟲抓取更多的有效信息：爬蟲依賴于標(biāo)簽來確定上下文和各個(gè)關(guān)鍵字的權(quán)重；（即網(wǎng)絡(luò)爬蟲，是一種自動獲取網(wǎng)頁內(nèi)容的程序。是搜索引擎的重要組成部分，因此搜索引擎優(yōu)化很大程度上就是針對爬蟲而做出的優(yōu)化。）
3. 方便其他設(shè)備解析（如屏幕閱讀器、盲人閱讀器、移動設(shè)備）
4. 便于團(tuán)隊(duì)開發(fā)和維護(hù)，語義化更具可讀性，遵循W3C標(biāo)準(zhǔn)的團(tuán)隊(duì)都遵循這個(gè)標(biāo)準(zhǔn)，可以減少差異化。

• 寫HTML代碼時(shí)應(yīng)注意什么（怎么樣語義化）？

1. 盡可能少的使用無語義的標(biāo)簽div和span；
2. 在語義不明顯時(shí)，既可以使用div或者p時(shí)，盡量用p, 因?yàn)閜在默認(rèn)情況下有上下間距，對兼容特殊終端有利；
3. 不要使用純樣式標(biāo)簽，如：b、font、u等，改用css設(shè)置；
4. 需要強(qiáng)調(diào)的文本，可以包含在strong或者em標(biāo)簽中（瀏覽器預(yù)設(shè)樣式，能用CSS指定就不用他們），strong默認(rèn)樣式是加粗（不要用b），em是斜體（不用i）；
5. 使用表格時(shí)，標(biāo)題要用caption，表頭用thead，主體部分用tbody包圍，尾部用tfoot包圍。表頭和一般單元格要區(qū)分開，表頭用th，單元格用td；
6. 表單域要用fieldset標(biāo)簽包起來，并用legend標(biāo)簽說明表單的用途；
7. 每個(gè)input標(biāo)簽對應(yīng)的說明文本都需要使用label標(biāo)簽，并且通過為input設(shè)置id屬性，在lable標(biāo)簽中設(shè)置for=someld來讓說明文本和相對應(yīng)的input關(guān)聯(lián)起來。

• 例子和總結(jié)：

1. wrong鏈接
2. rignt鏈接

• 正確的例子我們不看內(nèi)容也能了解這大概是什么，計(jì)算機(jī)也會理解哪些是標(biāo)題，哪些是header，哪些是內(nèi)容。錯(cuò)誤的例子雖然我們大概能看懂，但是機(jī)器就不能很好地理解整個(gè)表格

• HTML5的一大革新就是語義化標(biāo)簽的完善，使用這樣結(jié)構(gòu)寫出的網(wǎng)頁其語義顯而易見。在有些面試的時(shí)候會問到類似strong 和font-weight: bold有什么區(qū)別，這時(shí)候就可以從語義化的角度解答了。

  
  

• 網(wǎng)易云課堂的語義化

  
  
  0_1478493148542_2.png

八、form表單作用，常用的input 標(biāo)簽，分別的作用？

-小實(shí)驗(yàn)

• form表的作用：提供一個(gè)用戶輸入自己信息的表單，并以get或者post的方式提交給后臺。
• 常用標(biāo)簽：

1. name:表單提交到后臺時(shí)的索引，如果不寫name，就會被忽略，不參與組成url。
2. src：src 屬性規(guī)定顯示為提交按鈕的圖像的 URL。 (只針對 type="image")
3. value：指定 <input> 元素 value 的值。如果不寫兩個(gè)value，在提交的時(shí)候，network里面為sex:on。
4. maxlength：屬性規(guī)定 <input> 元素中允許輸入的最大字符數(shù)。
5. placeholder: placeholder=** 隱性的在輸入框中的內(nèi)容，像淘寶里的一樣。當(dāng)我們輸入信息該內(nèi)容就會消失。
6. type：（各種類型）

• text：用于輸入普通文本
• password：輸入密鑰，輸入的字符統(tǒng)一顯示為一樣的**符號
• file：輸入本地文件路徑，供上傳文件使用
• radio：將輸入設(shè)置為單選框，其之后輸入checked為初始選擇此項(xiàng)，注意，需要兩個(gè)input的name值一致才可組成一個(gè)單選框
• checkbox：將輸入設(shè)置為多選框，其之后輸入checked為初始選擇此項(xiàng)
• hidden：使輸入數(shù)據(jù)不顯示，多用于附帶于表單提交的安全校驗(yàn)碼
• button：使以上數(shù)據(jù)根據(jù)該標(biāo)簽中的指定的JS文件進(jìn)行操作
• submit：提交表單
• reset：重置\清空表單

九、post 和 get 方式的區(qū)別？

• 通俗的說：get是將數(shù)據(jù)組裝成url，而 post不是。
• 在B/S應(yīng)用程序中，前臺與后臺的數(shù)據(jù)交互，都是通過HTML中Form表單完成的。Form提供了兩種數(shù)據(jù)傳輸?shù)姆绞健猤et和post。雖然它們都是數(shù)據(jù)的提交方式，但是在實(shí)際傳輸時(shí)確有很大的不同，并且可能會對數(shù)據(jù)產(chǎn)生嚴(yán)重的影響。雖然為了方便的得到變量值，Web容器已經(jīng)屏蔽了二者的一些差異，但是了解二者的差異在以后的編程也會很有幫助的。
• Form中的get和post方法，在數(shù)據(jù)傳輸過程中分別對應(yīng)了HTTP協(xié)議中的GET和POST方法。二者主要區(qū)別如下：

1. Get是用來從服務(wù)器上獲得數(shù)據(jù)，而Post是用來向服務(wù)器上傳遞數(shù)據(jù)。
2. Get將表單中數(shù)據(jù)的按照variable（變化的）=value的形式，添加到action所指向的URL后面，并且兩者使用“?”連接，而各個(gè)變量之間使用“&”連接；Post是將表單中的數(shù)據(jù)放在form的數(shù)據(jù)體中，按照變量和值相對應(yīng)的方式，傳遞到action所指向URL。
3. Get是不安全的，因?yàn)樵趥鬏斶^程，數(shù)據(jù)被放在請求的URL中，而如今現(xiàn)有的很多服務(wù)器、代理服務(wù)器或者用戶代理都會將請求URL記錄到日志文件中，然后放在某個(gè)地方，這樣就可能會有一些隱私的信息被第三方看到。另外，用戶也可以在瀏覽器上直接看到提交的數(shù)據(jù)，一些系統(tǒng)內(nèi)部消息將會一同顯示在用戶面前。
4. Get傳輸?shù)臄?shù)據(jù)量小，這主要是因?yàn)槭躑RL長度限制；而Post可以傳輸大量的數(shù)據(jù)，所以在上傳文件只能使用Post（當(dāng)然還有一個(gè)原因，將在后面的提到）。
5. Get限制Form表單的數(shù)據(jù)集的值必須為ASCII字符；而Post支持整個(gè)ISO10646字符集。
6. Get是Form的默認(rèn)方法。
7. .Post傳輸數(shù)據(jù)時(shí)，不需要在URL中顯示出來，而Get方法要在URL中顯示。
8. Post傳輸?shù)臄?shù)據(jù)量大，可以達(dá)到2M，而Get方法由于受到URL長度的限制,只能傳遞大約1024字節(jié).
9. Post顧名思義,就是為了將數(shù)據(jù)傳送到服務(wù)器段,Get就是為了從服務(wù)器段取得數(shù)據(jù).而Get之所以也能傳送數(shù)據(jù),只是用來設(shè)計(jì)告訴服務(wù)器,你到底需要什么樣的數(shù)據(jù).Post的信息作為http請求。
10. 看后端接口支持哪一個(gè)。

• 建議：除非你肯定你提交的數(shù)據(jù)可以一次性提交，否則請盡量用 Post 方法
• 建議：出于安全性考慮，建議最好使用 Post 提交數(shù)據(jù)

十、在input里，name 有什么作用？

• name 屬性用于對提交到服務(wù)器后的表單數(shù)據(jù)進(jìn)行標(biāo)識，或者在客戶端通過 JavaScript 引用表單數(shù)據(jù)。只有設(shè)置了 name 屬性的表單元素才能在提交表單時(shí)傳遞它們的值。
• 寫單選框的時(shí)候，兩個(gè)name必須相同。
• <input type="text" name="" id=""/>中的name和id有什么區(qū)別呢？

1. name 是表單提交后，給后臺處理程序區(qū)分不同的輸入框。
   例如 name = '用戶名'name=‘密碼’，后臺程序就會分別去處理用戶名和密碼。
2. 而id通常給前臺程序，例如Javascript，CSS，讓它去為不同 id的輸入框設(shè)置不同的響應(yīng)動作，風(fēng)格樣式等。
3. 但這些前臺語言，有的時(shí)候也支持對 name 的識別。id 是不會提交給后臺的，所以后臺一定只能用 name 去識別。

十一、<button>提交</button>、<a class="btn" href="#">提交</a>、<input type="submit" value="提交"> 三者有什么區(qū)別？

• 詳情見博客
• <a class="btn" href="#">提交</a>：不提交表單的值。這是用<a>標(biāo)簽偽裝的按鈕，也只是一個(gè)按鈕。特點(diǎn)是當(dāng)把鼠標(biāo)放上去時(shí)自動會變成超鏈接形式，當(dāng)然我們也可以為它設(shè)置樣式成為一個(gè)按鈕的樣式。
• <input type="submit" value="提交">：提交表單的值。value的值為按鈕的值，如果加個(gè)name 會向后臺提交value的內(nèi)容。name值: 提交。
• <button>提交</button>：看瀏覽器默認(rèn)提不提交。 可以放置內(nèi)容，比如文本或圖像。在ie瀏覽器中該類型默認(rèn)為button,也就是<button type="button">不提交，其他瀏覽器中默認(rèn)為submit，也就是<button type="submit">提交。

十二、radio 如何分組?

必須寫name，且name相同的為一組。

0_1478493272783_4.png

十三、placeholder 屬性有什么作用?

0_1478493293326_5.png

十四、type="hidden"隱藏域有什么作用? 舉例說明

• 隱藏域在頁面中對于用戶是不可見的。在表單中插入隱藏域的目的在于收集或發(fā)送信息，以利于被處理表單的程序所使用。瀏覽者單擊發(fā)送按鈕發(fā)送表單的時(shí)候，隱藏域的信息也被一起發(fā)送到服務(wù)器。

1. 表單數(shù)據(jù)校驗(yàn)
   服務(wù)器輸出一個(gè)網(wǎng)站的表單時(shí)，會在表單的帶有type=hidden屬性的input生成一個(gè)安全校驗(yàn)碼，當(dāng)表單提交時(shí)，服務(wù)器通過檢查這個(gè)碼來判斷是否這個(gè)表單是否是從服務(wù)器生成，而不是偽造的，此方法比起通過cookie來驗(yàn)證用戶身份來要方便，避免遇到禁用cookie的情況。
2. 確認(rèn)提交按鈕
   有些時(shí)候一個(gè)form里有多個(gè)提交按鈕，怎樣使程序能夠分清楚到底用戶是按那一個(gè)按鈕提交上來的呢？我們就可以寫一個(gè)隱藏域，然后在每一個(gè)按鈕處加上onclick="document.form.command.value="xx""然后我們接到數(shù)據(jù)后先檢查command的值就會知道用戶是按的那個(gè)按鈕提交上來的。
3. 聯(lián)系同頁面多個(gè)form
   有時(shí)候一個(gè)網(wǎng)頁中有多個(gè)form，我們知道多個(gè)form是不能同時(shí)提交的，但有時(shí)這些form確實(shí)相互作用，我們就可以在form中添加隱藏域來使它們聯(lián)系起來。
4. 保存全局變量
   javascript不支持全局變量，但有時(shí)我們必須用全局變量，我們就可以把值先存在隱藏域里，它的值就不會丟失了。
5. 小窗口之間的通信
   按一個(gè)按鈕彈出四個(gè)小窗口，當(dāng)點(diǎn)擊其中的一個(gè)小窗口時(shí)其他三個(gè)自動關(guān)閉．可是IE不支持小窗口相互調(diào)用，所以只有在父窗口寫個(gè)隱藏域，當(dāng)小窗口看到那個(gè)隱藏域的值是close時(shí)就自己關(guān)掉。
   
   0_1478493355568_6.png
   
   這里page.php一共收到兩個(gè)值 “50”和送出表單。
   參考

代碼、

JS Bin