語義化搭盾、行內(nèi)元素塊級元素挖垛、POST 和 GET 的區(qū)別

Version two

• 熟悉列表的使用場景和用法
• 理解HTML語義化
• 理解行內(nèi)元素痒钝、塊級元素概念
• 熟悉常見input表單的使用方式
• 掌握 POST 與 GET 方式的區(qū)別

問答

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

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

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

• <dl> define list

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

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

1. wrong鏈接
2. rignt鏈接

二、如何去除列表前面的點或者數(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ū)別

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

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

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

4. 如果id被調(diào)用了多次粪般，對接的后臺就麻煩了，因為要從服務(wù)器的數(shù)據(jù)庫里面調(diào)取一些東西污桦，或者是用id做一些設(shè)置亩歹，如果重復(fù)使用，那么凡橱，后臺就全亂了小作，讀取數(shù)據(jù)也不會準(zhǔn)確。

5. 另外稼钩，當(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ū)別

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)會覆蓋其他元素疾呻，其實就是沒有占據(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ā)者閱讀眼俊，同時讓瀏覽器的爬蟲和機器很好地解析。
• 為什么語義化粟关？

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

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

1. 盡可能少的使用無語義的標(biāo)簽div和span忌警；
2. 在語義不明顯時，既可以使用div或者p時，盡量用p, 因為p在默認(rèn)情況下有上下間距法绵，對兼容特殊終端有利箕速；
3. 不要使用純樣式標(biāo)簽，如：b朋譬、font盐茎、u等，改用css設(shè)置徙赢；
4. 需要強調(diào)的文本字柠，可以包含在strong或者em標(biāo)簽中（瀏覽器預(yù)設(shè)樣式，能用CSS指定就不用他們）狡赐，strong默認(rèn)樣式是加粗（不要用b）窑业，em是斜體（不用i）；
5. 使用表格時枕屉，標(biāo)題要用caption常柄，表頭用thead，主體部分用tbody包圍搀擂，尾部用tfoot包圍西潘。表頭和一般單元格要區(qū)分開，表頭用th哥倔，單元格用td秸架；
6. 表單域要用fieldset標(biāo)簽包起來，并用legend標(biāo)簽說明表單的用途咆蒿；
7. 每個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)容也能了解這大概是什么缭黔，計算機也會理解哪些是標(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)簽：

1. name:表單提交到后臺時的索引匆赃，如果不寫name淤毛，就會被忽略，不參與組成url算柳。
2. src：src 屬性規(guī)定顯示為提交按鈕的圖像的 URL低淡。 (只針對 type="image")
3. value：指定 <input> 元素 value 的值。如果不寫兩個value瞬项，在提交的時候查牌，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為初始選擇此項，注意稠鼻，需要兩個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ū)別如下：

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

• 建議：除非你肯定你提交的數(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ū)別呢铅碍？

1. name 是表單提交后，給后臺處理程序區(qū)分不同的輸入框线椰。
   例如 name = '用戶名'name=‘密碼’胞谈，后臺程序就會分別去處理用戶名和密碼。
2. 而id通常給前臺程序憨愉，例如Javascript烦绳，CSS，讓它去為不同 id的輸入框設(shè)置不同的響應(yīng)動作配紫，風(fēng)格樣式等径密。
3. 但這些前臺語言，有的時候也支持對 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ù)器吞彤。

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

代碼、

JS Bin