1.有序列表尿赚、無序列表买决、自定義列表如何使用？寫個簡單的例子吼畏。三者在語義上有什么區(qū)別？在哪些情況下使用哪種（重要）嘁灯？ 如何嵌套泻蚊？
1.有序列表、無序列表丑婿、自定義列表如何使用性雄？寫個簡單的例子没卸。
- 有序列表
把大象塞進冰箱
<ol>
<li>1.打開冰箱</li>
<li>2.把大象塞進冰箱</li>
<li>3.關(guān)上冰箱</li>
</ol>
- 無序列表
維修工具
<ul>
<li>螺絲刀</li>
<li>鑷子</li>
<li>鉗子</li>
</ul>
- 自定義列表
電子產(chǎn)品
<dl>
<dt>手機</dt>
<dd>一種通訊工具</dd>
<dt>vr眼鏡</dt>
<dd>虛擬現(xiàn)實頭戴顯示器設(shè)備</dd>
</dl>
2.三者在語義上有什么區(qū)別？在哪些情況下使用哪種（重要）秒旋？
- 首先根據(jù)字面意思理解它語義上的區(qū)別约计，語義區(qū)別來確定哪種情況下用對應(yīng)的列表標(biāo)簽。
- 用有序列表來表示一件事情的順序步驟迁筛。比如手機貼膜煤蚌，無論怎么把手機膜貼到屏幕上，不管個人習(xí)慣细卧，總有一個順序來操作尉桩。又比如把大象塞進冰箱里。
- 用無序列表來表示同級別的人事物贪庙。比如準(zhǔn)備一道菜需要用到的食材蜘犁，修飛機需要用到的工具。
- 用自定義列表來闡述一件事物止邮。比如什么是手機这橙，它用來干什么。又比如什么是前端工程師导披。
3. 如何嵌套屈扎？
<body>
<div class="tool">
維修工具
</div>
<ul>
<li>螺絲刀</li>
<ul>
<li>一字螺絲刀</li>
<li>十字螺絲刀</li>
</ul>
<li>鑷子</li>
<ul>
<li>尖頭鑷子</li>
<li>平頭鑷子</li>
</ul>
<li>鉗子</li>
</ul>
</body>
代碼顯示效果如下圖：
2.如何去除列表前面的點或者數(shù)字？
<style media="screen">
li {
list-style-type: none;
}
</style>
代碼顯示效果圖如下：
3.class 和 id 有什么區(qū)別盛卡？什么時候用 class 什么時候用 id助隧？
- ID具有唯一性，Class具有普遍性滑沧。
- ID是唯一的并村，所以盡量在結(jié)構(gòu)外圍使用，通常用于頁面布局滓技。
- Class是可重復(fù)的哩牍，所以盡量在結(jié)構(gòu)內(nèi)部使用，通常用于樣式定義令漂。
- ID的樣式優(yōu)先級高于Class膝昆。
搬運知乎用戶Milo的答案。
4.塊級元素叠必、行內(nèi)元素是什么荚孵？有什么區(qū)別？分別對應(yīng)哪些常用標(biāo)簽纬朝？
塊元素特立獨行收叶；內(nèi)聯(lián)元素隨波逐流。 －Head First HTML與css
塊級元素：
- 總是在新行上開始共苛；
- 高度判没，行高以及外邊距和內(nèi)邊距都可控制蜓萄；
- 寬度缺省是它的容器的100%，除非設(shè)定一個寬度澄峰。
- 它可以容納內(nèi)聯(lián)元素和其他塊元素
內(nèi)聯(lián)元素：
- 和其他元素都在一行上嫉沽；
- 高，行高及外邊距和內(nèi)邊距不可改變俏竞；
- 寬度就是它的文字或圖片的寬度绸硕，不可改變
- 內(nèi)聯(lián)元素只能容納文本或者其他內(nèi)聯(lián)元素
分別對應(yīng)哪些常用標(biāo)簽？
塊元素：<h1~h6>胞此、< p >臣咖、<div>、< blockquote >漱牵、
...
內(nèi)聯(lián)元素：< a >夺蛇、< img >、< q > 酣胀、< strong >刁赦、< em >...
詳見更多
5.display: block、display: inline闻镶、display: inline-block分別有什么作用?
display屬性規(guī)定元素生成的顯示框類型甚脉。
| 值 | 作用 |
|---|---|
| display: inline | 默認值。顯示為內(nèi)聯(lián)元素铆农，元素前后沒有換行符牺氨。 |
| display: inline-block | 對象呈現(xiàn)為inline對象，但是對象的內(nèi)容作為block對象呈現(xiàn)墩剖。之后的內(nèi)聯(lián)對象會被排列在同一行內(nèi)猴凹。注:IE6不支持，需要使用*display:inline;zoom:1; |
| display: block | 顯示為塊級元素岭皂，前后會帶有換行符郊霎。 |
6.下面代碼是做什么的？抄寫一遍下面的代碼爷绘，注意class和id的使用及命名方式书劝。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style media="screen">
.wrap{
width: 900px;
margin: 0 auto;
}
</style>
</head>
<body>
<div id="header">
<div class="wrap">
<a di="logo" href="#"><img src=""></a>
<ul class="nav">
<li><a href="#">導(dǎo)航1</a></li>
<li><a href="#">導(dǎo)航2</a></li>
<li><a href="#">導(dǎo)航3</a></li>
</ul>
</div>
</div>
<div id="content">
<div class="wrap">
<div class="aside">側(cè)邊欄</div>
<div class="main">中心區(qū)塊</div>
</div>
</div>
<div id="footer">
<div class="wrap">這里是 footer</div>
</div>
</body>
</html>
上面這段代碼使用div來布局網(wǎng)頁，網(wǎng)頁主要三大塊土至，分別用id來表示header购对、content、footer陶因。而三大塊內(nèi)的樣式則用class="wrap"來包裹起來洞斯，塊寬為900px;上下外邊距為0，左右為auto。
7.如何理解 HTML CSS 語義化? 在平時寫代碼的過程中要注意哪些細節(jié)?
HTML CSS語義化烙如，我個人的理解是，一個標(biāo)簽毅否，或者一個id亚铁，class,它的本質(zhì)是什么，就應(yīng)該用在那個地方螟加。比如div和p標(biāo)簽徘溢，通過樣式設(shè)定兩者都能在瀏覽器中顯示一些相同的效果，不用審查元素可能根本分不出來捆探，那么當(dāng)它需要呈現(xiàn)文字內(nèi)容的時候然爆，就應(yīng)該用p標(biāo)簽，當(dāng)它作為一個布局的塊元素時黍图，就應(yīng)該用div曾雕。這就是標(biāo)簽的語義化。id是唯一的助被，而且優(yōu)先級較高剖张，class不是唯一的。把id比喻成身份證號揩环，而class比喻成人類搔弄，人類有很多民族，每個民族都有一群人有他們固有的共同特性丰滑。在對id和class命名的時顾犹，根據(jù)內(nèi)容或者功能來命名，比如中國的省份褒墨，北京炫刷、上海、廣州貌亭，每個省份的命名有它獨一無二的歷史柬唯，而不可能把中國的省份命名成，北京圃庭，北京1锄奢，北京2。這樣讓人無法理解剧腻。在css語義化中更應(yīng)該注重大小寫的統(tǒng)一拘央。
8.form表單有什么作用？有哪些常用的input 標(biāo)簽书在，分別有什么作用灰伟？
- form用于申明表單，定義采集數(shù)據(jù)的范圍，<form>和</form>里面包含的數(shù)據(jù)將被提交到指定的地址栏账。
- 常見的input標(biāo)簽：
- 文本域：
<form class="text" action="#" method="post">
姓名：
<input type="text" name="name" placeholder="請用中文輸入" maxlength="10">
</form> ```
- 密碼域：
<form class="text" action="#" method="post">
賬號:
<input type="text" name="user" placeholder="手機號或電子郵箱" maxlength="30">
密碼：
<input type="password" name="password" placeholder="請注意大小寫" maxlength="20">
</form>
- 復(fù)選框：
<form class="select" action="#" method="post">
<div> 學(xué)習(xí)前端需要掌握以下哪些知識：</div>
<input type="checkbox" name="html" value="">html
<input type="checkbox" name="css" value="">css
<input type="checkbox" name="js" value="">js
</form>
- 單選按鈕：
<form>
男性：
<input type="radio" checked="checked" name="Sex" value="male" />
<br />
女性：
<input type="radio" name="Sex" value="female" />
</form>
注：因為是單選帖族，所以name=""必須一致，否者導(dǎo)致可以勾選多個選項且無法取消之前的勾選挡爵。
- 下拉列表：
<form class="select" action="index.html" method="get">
<div>選擇一個最喜歡的游戲竖般？</div>
<select name="games">
<option value="dota">dota</option>
<option value="lol">lol</option>
<option value="cs">cs</option>
<option value=" Maplestory">冒險島</option>
</select>
</form>
- 多文本輸入框：
<textarea rows="10" /行數(shù)/ cols="30"/*字符寬度 */>
評論內(nèi)容不少于30字。
</textarea>
- 創(chuàng)建按鈕：
<form>
<input type="button" value="button">
</form>
- 帶有輸入框和提交功能的表單：
<form action="#" method="post">
賬號: <input type="text" name="user" />
密碼: <input type="password" name="psw" />
<input type="submit" value="login" />
</form>
***
# 9.post 和 get 方式的區(qū)別茶鹃？
1.Get請求把表單的數(shù)據(jù)顯式地放在URI中,并且對長度和數(shù)據(jù)值編碼有所限制（1k）涣雕。GET一般用于獲取/查詢資源信息。
2.Post請求把表單數(shù)據(jù)放在體中,并且沒有長度限制（由各服務(wù)器做限制）闭翩。POST一般用于更新資源信息挣郭。
***
# 10.在input里，name 有什么作用疗韵？
name 屬性的表單元素在提交表單時傳遞它們的值,*value*＝''時兑障，上傳時name:on，*value*＝"xx"時伶棒，上傳name:xx旺垒。
***
# 11. <button>提交</button>、<a class="btn" href="#">提交</a>肤无、<input type="submit" value="提交"> 三者有什么區(qū)別先蒋？
- <button>提交</button>:只是一個創(chuàng)建按鈕的標(biāo)簽，需要綁定事件來實現(xiàn)功能宛渐，<button> 與 </button> 標(biāo)簽之間的所有內(nèi)容都是按鈕的內(nèi)容竞漾。
- <a class="btn" href="#">提交</a>:正如a標(biāo)簽的本意，只是一個鏈接窥翩，在這里是一個*錨*鏈接业岁，點擊提交后跳轉(zhuǎn)到相應(yīng)位置。
- <input type="submit" value="提交"> ：網(wǎng)頁上需要提交信息到服務(wù)器寇蚊。
***
# 12.radio 如何 分組?
需要將radio中的name設(shè)置為相同笔时，即可分組，實現(xiàn)單選效果仗岸，如果name不相同允耿，則無法實現(xiàn)單選效果，也無法需要之前選中項扒怖。
***
# 13.placeholder 屬性有什么作用?
placeholder:""在輸入框顯示提示效果,并在輸入框點擊后消失较锡。
***
# 14.type=hidden隱藏域有什么作用? 舉例說明
<fieldset style="width:50px;">
<legend>登入</legend>
<form action="#" method="post">
賬號:
<input type="text" name="user" />
<br> 密碼:
<input type="password" name="psw" />
<input type="submit" value="login" />
<input type="hidden" name="name" value="hidden">
</form>
</fieldset>
顯示如下：
###### <input type="hidden" name="name" value="hidden">同樣被提交但不顯示在頁面，用此作為安全校驗盗痒。
***
***本教程版權(quán)歸饑人谷本人和饑人谷所有蚂蕴，轉(zhuǎn)載須說明來源！！骡楼！***
