語義化、行內(nèi)元素塊級元素、POST 和 GET 的區(qū)別
Version two
- 熟悉列表的使用場景和用法
- 理解HTML語義化
- 理解行內(nèi)元素、塊級元素概念
- 熟悉常見input表單的使用方式
- 掌握 POST 與 GET 方式的區(qū)別
問答
一、有序列表、無序列表、自定義列表如何使用？寫個簡單的例子。三者在語義上有什么區(qū)別？在哪些情況下使用哪種（重要）？ 如何嵌套？
- 例子鏈接
- 區(qū)別
- 有序列表：列表內(nèi)容對順序有要求，如排名，步驟等。
- 無序列表：列表內(nèi)容對順序無要求，如 愛好，特長等。
- 自定義列表：用戶按照自己需求自定義列表。當(dāng)有序列表和無序列表都不滿足我們的要求時，我們需要按自己的要求去定義列表。
-
<dl>define list
-
<dt>define the title of list
用于生成定義列表中各列表項的標(biāo)題，重復(fù)使用可以定義多個列表項的標(biāo)題。注意：其中不能包含 hx 元素。 -
<dd>descrime the define of list
用于生成定義列表各列表項的說明文字段，重復(fù)使用可以定義多個說明文字段。dd是對應(yīng)dt的簡短說明或解釋。 - 我們可以看到，
<dt></dt>中間的文字即時我們沒有進行縮進它也會向前靠攏，而<dd></dd>中間的內(nèi)容則自動向后縮進。
0_1478493063062_upload-722fe46e-9db8-41f1-b44f-abc411cfb4a9
- 發(fā)現(xiàn)網(wǎng)站上用ol和dl很少，基本上都是用的ul。
- ul和div的使用：
二、如何去除列表前面的點或者數(shù)字？
- ul,ol dl的list-style的屬性值設(shè)置為none即可。
三、class 和 id 有什么區(qū)別？什么時候用 class 什么時候用 id？
- W3C標(biāo)準(zhǔn)這樣規(guī)定的，在同一個頁面內(nèi)，不允許有相同名字的id對象出現(xiàn)，但是允許相同名字的class。
- id用于布局，比如我給整個頁面設(shè)置頭部，內(nèi)容，尾部。這個時候使用id，一般網(wǎng)站分為頭，體，腳部分，因為考慮到它們在同一個頁面只會出現(xiàn)一次，所以用id，其他的，比如說你定義了一個顏色為red的class，在同一個頁面也許要多次用到，就用class定義。這樣整個結(jié)構(gòu)就不會亂。
- 區(qū)別
lass選擇器設(shè)置的樣式是用.開頭，id選擇器的樣式是用#開頭
權(quán)值不同：id選擇器的權(quán)值高于類選擇器
分層后，在一個大的區(qū)塊中，id選擇器中能使用一次，class選擇器可以隨意套用
如果id被調(diào)用了多次，對接的后臺就麻煩了，因為要從服務(wù)器的數(shù)據(jù)庫里面調(diào)取一些東西，或者是用id做一些設(shè)置，如果重復(fù)使用，那么，后臺就全亂了，讀取數(shù)據(jù)也不會準(zhǔn)確。
另外，當(dāng)涉及到j(luò)s時候，有些動畫的js需要查找html中的id進行動畫設(shè)置，重復(fù)使用的話，相同的id將都會被找到，并添加相同的動畫。
四、塊級元素、行內(nèi)元素是什么？有什么區(qū)別？分別對應(yīng)哪些常用標(biāo)簽？
- 實例鏈接
- 塊級元素：無論內(nèi)容多少，都會獨占一行的元素叫塊級元素；如div、p、h1...h6、table、tr、ul、li、dl、dt、form等。
- 行內(nèi)元素：不會獨占一行，并且行級元素與行級元素間會橫向排列，除非內(nèi)容太長，否則不會自動換行，寬度隨內(nèi)容改變；如a、span、img、input、button、em、textarea等。
- 兩者有什么區(qū)別
- 塊級元素總是另起一行，行內(nèi)元素與行內(nèi)元素間則總是在一行顯示（除非設(shè)置了寬度或者內(nèi)容溢出）。
- 手動給行內(nèi)元素設(shè)置寬高是無效的，身寬高由自身決定，由自身內(nèi)容撐開。設(shè)置左右padding和margin有效，設(shè)置上下padding和margin不占據(jù)空間。但是如果我們設(shè)置了邊框，調(diào)大padding的值可以看見邊框變大。但是不占據(jù)空間！
例子：我們給邊框里面設(shè)置background：red發(fā)現(xiàn)會覆蓋其他元素，其實就是沒有占據(jù)空間的原因。這時候我們可以用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)元素，使其同時具有行內(nèi)和塊級元素特性，使元素的長寬和邊距可控，同時也能和其他元素排在一排。
六、下面代碼是做什么的？抄寫一遍下面的代碼，注意class和id的使用及命名方式
- 代碼作用：用id和class搭建了一個網(wǎng)站大致的簡易框架。使得各個模塊在頁面居中顯示。注意代碼格式要寫對（利于debug），冒號不要丟。
- id是唯一的常用于大區(qū)塊的布局，而一個class可以被多個元素調(diào)用。常用于id內(nèi)部小的模塊或元素的樣式定義
- 命名方式：頭部區(qū)域用herder，內(nèi)容區(qū)用content，腳注用footer，側(cè)邊欄用aside，導(dǎo)航欄用nav(navigation)，這是語義化的一種表現(xiàn)。
七、如何理解 HTML CSS 語義化? 在平時寫代碼的過程中要注意哪些細(xì)節(jié)
- 什么是HTML語義化？
選擇合適的標(biāo)簽（代碼語義化）、使用合理的代碼結(jié)構(gòu)（內(nèi)容語義化），便于開發(fā)者閱讀，同時讓瀏覽器的爬蟲和機器很好地解析。 - 為什么語義化？
- 為了在沒有CSS的情況下，頁面也能呈現(xiàn)出很好地內(nèi)容結(jié)構(gòu)、
- 有利于SEO（Search Engine Optimization）：和搜索引擎建立良好溝通，有助于爬蟲抓取更多的有效信息：爬蟲依賴于標(biāo)簽來確定上下文和各個關(guān)鍵字的權(quán)重；（即網(wǎng)絡(luò)爬蟲，是一種自動獲取網(wǎng)頁內(nèi)容的程序。是搜索引擎的重要組成部分，因此搜索引擎優(yōu)化很大程度上就是針對爬蟲而做出的優(yōu)化。）
- 方便其他設(shè)備解析（如屏幕閱讀器、盲人閱讀器、移動設(shè)備）
- 便于團隊開發(fā)和維護，語義化更具可讀性，遵循W3C標(biāo)準(zhǔn)的團隊都遵循這個標(biāo)準(zhǔn)，可以減少差異化。
- 寫HTML代碼時應(yīng)注意什么（怎么樣語義化）？
- 盡可能少的使用無語義的標(biāo)簽div和span；
- 在語義不明顯時，既可以使用div或者p時，盡量用p, 因為p在默認(rèn)情況下有上下間距，對兼容特殊終端有利；
- 不要使用純樣式標(biāo)簽，如：b、font、u等，改用css設(shè)置；
- 需要強調(diào)的文本，可以包含在strong或者em標(biāo)簽中（瀏覽器預(yù)設(shè)樣式，能用CSS指定就不用他們），strong默認(rèn)樣式是加粗（不要用b），em是斜體（不用i）；
- 使用表格時，標(biāo)題要用caption，表頭用thead，主體部分用tbody包圍，尾部用tfoot包圍。表頭和一般單元格要區(qū)分開，表頭用th，單元格用td；
- 表單域要用fieldset標(biāo)簽包起來，并用legend標(biāo)簽說明表單的用途；
- 每個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é)：
- 正確的例子我們不看內(nèi)容也能了解這大概是什么，計算機也會理解哪些是標(biāo)題，哪些是header，哪些是內(nèi)容。錯誤的例子雖然我們大概能看懂，但是機器就不能很好地理解整個表格
-
HTML5的一大革新就是語義化標(biāo)簽的完善，使用這樣結(jié)構(gòu)寫出的網(wǎng)頁其語義顯而易見。在有些面試的時候會問到類似strong 和font-weight: bold有什么區(qū)別，這時候就可以從語義化的角度解答了。
-
網(wǎng)易云課堂的語義化
0_1478493148542_2.png
八、form表單作用，常用的input 標(biāo)簽，分別的作用？
-小實驗
- form表的作用：提供一個用戶輸入自己信息的表單，并以get或者post的方式提交給后臺。
- 常用標(biāo)簽：
- name:表單提交到后臺時的索引，如果不寫name，就會被忽略，不參與組成url。
- src：src 屬性規(guī)定顯示為提交按鈕的圖像的 URL。 (只針對 type="image")
- value：指定
<input>元素 value 的值。如果不寫兩個value，在提交的時候，network里面為sex:on。 - maxlength：屬性規(guī)定
<input>元素中允許輸入的最大字符數(shù)。 - placeholder: placeholder=
**隱性的在輸入框中的內(nèi)容，像淘寶里的一樣。當(dāng)我們輸入信息該內(nèi)容就會消失。 - type：（各種類型）
- text：用于輸入普通文本
- password：輸入密鑰，輸入的字符統(tǒng)一顯示為一樣的
**符號 - file：輸入本地文件路徑，供上傳文件使用
- radio：將輸入設(shè)置為單選框，其之后輸入checked為初始選擇此項，注意，需要兩個input的name值一致才可組成一個單選框
- checkbox：將輸入設(shè)置為多選框，其之后輸入checked為初始選擇此項
- hidden：使輸入數(shù)據(jù)不顯示，多用于附帶于表單提交的安全校驗碼
- button：使以上數(shù)據(jù)根據(jù)該標(biāo)簽中的指定的JS文件進行操作
- 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ù)據(jù)產(chǎn)生嚴(yán)重的影響。雖然為了方便的得到變量值，Web容器已經(jīng)屏蔽了二者的一些差異，但是了解二者的差異在以后的編程也會很有幫助的。
- Form中的get和post方法，在數(shù)據(jù)傳輸過程中分別對應(yīng)了HTTP協(xié)議中的GET和POST方法。二者主要區(qū)別如下：
- Get是用來從服務(wù)器上獲得數(shù)據(jù)，而Post是用來向服務(wù)器上傳遞數(shù)據(jù)。
- Get將表單中數(shù)據(jù)的按照variable（變化的）=value的形式，添加到action所指向的URL后面，并且兩者使用“?”連接，而各個變量之間使用“&”連接；Post是將表單中的數(shù)據(jù)放在form的數(shù)據(jù)體中，按照變量和值相對應(yīng)的方式，傳遞到action所指向URL。
- Get是不安全的，因為在傳輸過程，數(shù)據(jù)被放在請求的URL中，而如今現(xiàn)有的很多服務(wù)器、代理服務(wù)器或者用戶代理都會將請求URL記錄到日志文件中，然后放在某個地方，這樣就可能會有一些隱私的信息被第三方看到。另外，用戶也可以在瀏覽器上直接看到提交的數(shù)據(jù)，一些系統(tǒng)內(nèi)部消息將會一同顯示在用戶面前。
- Get傳輸?shù)臄?shù)據(jù)量小，這主要是因為受URL長度限制；而Post可以傳輸大量的數(shù)據(jù)，所以在上傳文件只能使用Post（當(dāng)然還有一個原因，將在后面的提到）。
- Get限制Form表單的數(shù)據(jù)集的值必須為ASCII字符；而Post支持整個ISO10646字符集。
- Get是Form的默認(rèn)方法。
- .Post傳輸數(shù)據(jù)時，不需要在URL中顯示出來，而Get方法要在URL中顯示。
- Post傳輸?shù)臄?shù)據(jù)量大，可以達到2M，而Get方法由于受到URL長度的限制,只能傳遞大約1024字節(jié).
- Post顧名思義,就是為了將數(shù)據(jù)傳送到服務(wù)器段,Get就是為了從服務(wù)器段取得數(shù)據(jù).而Get之所以也能傳送數(shù)據(jù),只是用來設(shè)計告訴服務(wù)器,你到底需要什么樣的數(shù)據(jù).Post的信息作為http請求。
- 看后端接口支持哪一個。
- 建議：除非你肯定你提交的數(shù)據(jù)可以一次性提交，否則請盡量用 Post 方法
- 建議：出于安全性考慮，建議最好使用 Post 提交數(shù)據(jù)
十、在input里，name 有什么作用？
- name 屬性用于對提交到服務(wù)器后的表單數(shù)據(jù)進行標(biāo)識，或者在客戶端通過 JavaScript 引用表單數(shù)據(jù)。只有設(shè)置了 name 屬性的表單元素才能在提交表單時傳遞它們的值。
- 寫單選框的時候，兩個name必須相同。
-
<input type="text" name="" id=""/>中的name和id有什么區(qū)別呢？
- name 是表單提交后，給后臺處理程序區(qū)分不同的輸入框。
例如 name = '用戶名'name=‘密碼’，后臺程序就會分別去處理用戶名和密碼。 - 而id通常給前臺程序，例如Javascript，CSS，讓它去為不同 id的輸入框設(shè)置不同的響應(yīng)動作，風(fēng)格樣式等。
- 但這些前臺語言，有的時候也支持對 name 的識別。id 是不會提交給后臺的，所以后臺一定只能用 name 去識別。
十一、<button>提交</button>、<a class="btn" href="#">提交</a>、<input type="submit" value="提交"> 三者有什么區(qū)別？
- 詳情見博客
-
<a class="btn" href="#">提交</a>：不提交表單的值。這是用<a>標(biāo)簽偽裝的按鈕，也只是一個按鈕。特點是當(dāng)把鼠標(biāo)放上去時自動會變成超鏈接形式，當(dāng)然我們也可以為它設(shè)置樣式成為一個按鈕的樣式。 -
<input type="submit" value="提交">：提交表單的值。value的值為按鈕的值，如果加個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ā)送表單的時候，隱藏域的信息也被一起發(fā)送到服務(wù)器。
- 表單數(shù)據(jù)校驗
服務(wù)器輸出一個網(wǎng)站的表單時，會在表單的帶有type=hidden屬性的input生成一個安全校驗碼，當(dāng)表單提交時，服務(wù)器通過檢查這個碼來判斷是否這個表單是否是從服務(wù)器生成，而不是偽造的，此方法比起通過cookie來驗證用戶身份來要方便，避免遇到禁用cookie的情況。 - 確認(rèn)提交按鈕
有些時候一個form里有多個提交按鈕，怎樣使程序能夠分清楚到底用戶是按那一個按鈕提交上來的呢？我們就可以寫一個隱藏域，然后在每一個按鈕處加上onclick="document.form.command.value="xx""然后我們接到數(shù)據(jù)后先檢查command的值就會知道用戶是按的那個按鈕提交上來的。 - 聯(lián)系同頁面多個form
有時候一個網(wǎng)頁中有多個form，我們知道多個form是不能同時提交的，但有時這些form確實相互作用，我們就可以在form中添加隱藏域來使它們聯(lián)系起來。 - 保存全局變量
javascript不支持全局變量，但有時我們必須用全局變量，我們就可以把值先存在隱藏域里，它的值就不會丟失了。 - 小窗口之間的通信
按一個按鈕彈出四個小窗口，當(dāng)點擊其中的一個小窗口時其他三個自動關(guān)閉．可是IE不支持小窗口相互調(diào)用，所以只有在父窗口寫個隱藏域，當(dāng)小窗口看到那個隱藏域的值是close時就自己關(guān)掉。
0_1478493355568_6.png
這里page.php一共收到兩個值 “50”和送出表單。
參考
