1.有序列表、無序列表、自定義列表如何使用？寫個簡單的例子。三者在語義上有什么區別？在哪些情況下使用哪種（重要）？ 如何嵌套？
1.有序列表ol>li；列表有順序編號（默認列表前加1.，2.，3.，...編號），適用于有邏輯順序的排列項目，而且次序不能亂。
2.無序列表ul>li；列表無順序（默認列表前加"."），適用于并列顯示的項目，項目無先后順序
3.自定義列表dl>dt表頭>dd表內容,dt為項目名稱，dd項目名稱的描述，一個項目名稱可以有多個項目描述。自定義列表更簡單，精準
如何嵌套：把一個元素放在另外一個元素中稱為"嵌套"，在列表中，可以把一個ol或者ul作為某個li的內容，這樣就在列表中嵌套了另一個列表。
例子：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>html4-001</title>
</head>
<body>
<ol class='order'>
<li>有序列表0001</li>
<li>有序列表002
<ul class='unordered'>
<li>嵌套無序列表001</li>
<li>嵌套無序列表002</li>
</ul>
</li>
<li>有序列表0003</li>
<li>有序列表004
<dl>
<dt>
自定義列表001<dd>自定義列表項目描述</dd>
</dt>
</dl>
</li>
</ol>
</body>
</html>
2.如何去除列表前面的點或者數字？
ul{list-style:none;}
3.class 和 id 有什么區別？什么時候用 class 什么時候用 id？
id在頁面上是唯一標識，class在頁面上標識某一類型的樣式，具有普遍性，可以重復使用。某元素的class名可以寫成class="intro other"，即可以有多個class名，代表疊加兩個類名稱對應的樣式。id名不能這樣寫。ID名常用在頁面布局（標記大框架），class一般在局部頁面布局中使用，用于樣式定義，因為class可以重復，所以為多個元素賦予同一class簡化代碼量。
4.塊級元素、行內元素是什么？有什么區別？分別對應哪些常用標簽？
1.塊級元素：獨占一行可設置寬,高,margin,padding。塊級元素是其他元素的容器元素，可以容納其他塊元素或者行內元素;行內元素只能夠容納文本內容或者其他的行內元素。常見塊級元素：div,p,h1..h6,table,tr,ul,li,dl,dt,form
2.行內元素：占用空間是他自身的寬度。對于行內元素，手動設置寬高是無效的，它本身的高度是由自身決定的。行內元素可以通過line-height來設置高度。常見行內元素：a,span,img,input,button,em,textarea
3.塊級元素中寬高和內外邊距都可以設置的；行內元素設置寬高是無效的，它本身內容的寬度就決定了它的寬高，不能手動設置，行內元素的左右margin和padding是有效的，上下的margin和padding是不占據空間的，但是加邊框后能看見其范圍。注意上下方向設置margin，padding元素范圍是增大了，但是對元素周圍的內容是沒影響的。a元素為行內元素，改變上下padding時元素范圍增大（邊框可看出），但對周圍元素無影響。
5.display: block、display: inline、display: inline-block分別有什么作用?
display:none;將元素設置成不顯示，脫離文檔流，但在dom樹中還存在
display:table-cell;將元素設置成表格單元格，可通過vertical-align=middle設置垂直居中（vertical-align僅對行內元素和表格單元格元素生效）
display:block; 將元素設置成塊級元素
display:in-line;將元素設置成成行內元素
display:inline-block;將元素設置成行內塊元素，既像行內元素水平排列，又能像塊級元素設置寬高，設置上下左右padding，margin。inline-block:IE8以下瀏覽器不支持
6.下面代碼是做什么的？抄寫一遍下面的代碼，注意class和id的使用及命名方式
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style>
.wrap{
width:900px;
margin:0 auto;
}
</style>
</head>
<body>
<div id="header">
<div class="wrap">
<a id="logo" href="#"><img src=""></a>
<ul class="nav">
<li><a href="#">導航1</a></li>
<li><a href="#">導航2</a></li>
<li><a href="#">導航3</a></li>
</ul>
</div>
</div>
<div id="content">
<div class="wrap">
<div class="aside">側邊欄</div>
<div class="main">中心區塊</div>
</div>
</div>
<div id="footer">
<div class="wrap"></div>
</div>
</body>
</html>
以上代碼的作用是先用id命名的方式將頁面劃分為header，content，footer三部分，header區域有網站logo（圖片鏈接），有導航列表，content區域分側邊欄和中心區塊。局部頁面布局用class命名方式（這里class都為warp），便于對局部頁面有共性的部分設置統一的樣式。
7.如何理解 HTML CSS 語義化? 在平時寫代碼的過程中要注意哪些細節
選擇正確合適的標簽，合理的標簽命名，使用合理的代碼結構，語義化使頁面結構更清晰，代碼更加便于閱讀和維護，同時便于爬蟲和瀏覽器更好的解析。標簽語義化明白每個標簽的用途（在什么情況下使用此標簽合理）比如，網頁上的文章的標題就可以用標題標簽，網頁上的各個欄目的欄目名稱也可以使用標題標簽。文章中內容的段落就得放在段落標簽中，在文章中有想強調的文本，就可以使用 em 標簽表示強調等等。書寫代碼時注意的細節：命名要有含義，單詞組用中橫線連接，大小寫規則統一。在網頁上要展示出來的頁面內容一定要放在body標簽中。
8.form表單有什么作用？有哪些常用的input 標簽，分別有什么作用？
form表單的作用是把用戶輸入的數據提交到后臺。其name屬性為表單提交的名稱，action屬性為提交到的網址（如不寫默認提交到當前頁面），method屬性為提交方式get/post。
常見input標簽
<form action="">
<input type="text" name="username"> 單行文本區 <br />
<input type="password" name='pwd'>密碼區 <br />
<input type="radio" name="sex" value="male"> 男 <br />
<input type="radio" name="sex" value="female"> 女 <br />
<input type="checkbox" name="lov[]"> 汽車 <br />
<input type="checkbox" name="lov[]"> 游戲 <br />
<input type="checkbox" name="lov[]"> 旅游 <br />
<textarea>請輸入文本</textarea> <br />
<select multiple="multiple">
<option value="apple">蘋果</option>
<option value="banana">香蕉</option>
<option value="apple">蘋果</option>
<option value="banana">香蕉</option>
</select> <br />
<input type="submit" name="submit"> 提交 <br />
<input type="reset" name="reset"> 重置 <br />
<input type="hidden" name="hidden"><br />
</form>```
***
#####9.post 和 get 方式的區別？
get（GET用于信息獲取）:把要提交的數據拼裝成url，提交的數據信息可見。get一般用于提交少量數據，瀏覽器限制最多提交1K（瀏覽器地址欄裝不下超過1K的信息啊）。get提交的數據會保存在瀏覽器歷史記錄中，不安全。
post（向服務器傳送數據，是可能修改服務器上的資源的請求）:提交的數據不是url，所以數據內容不可見，可提交大量數據，瀏覽器無限制，文件大小受服務器限制.
如果想在表單之外調用服務器端的應用程序，而且包括向其傳遞參數的過程，就要采用 GET 方法，因為該方法允許把表單這樣的參數包括進來作為URL的一部分。而另一方面，使用POST樣式的應用程序卻希望在 URL 后還能有一個來自瀏覽器額外的傳輸過程，其中傳輸的內容不能作為傳統 `<a>` 標簽的內容.
***
#####10.在input里，name 有什么作用？
input標簽設置了name屬性，才能在提交表單時傳遞屬性和value值。另外，input在checkbox,radio類型中，name一致時代表選項為一組。
```html
<input type="checkbox" name="love[ ]" value="bike" checked/>自行車
<input type="checkbox" name="love[ ]" value="car" />小車```
love[ ]為數組形式，當可選項太多時，用這種數組方式便于js獲取數組對應的值
***
#####11.三者有什么區別？
`<button>提交</button>`普通按鈕，需要綁定js事件后點擊后才有效
`<a class="btn" href="#">提交</a>`應用了自定義按鈕樣式的a鏈接，點擊后跳轉到某個頁面，讓a鏈接應用按鈕的樣式是因為鼠標懸停a鏈接時有手勢，讓用戶覺得是可點的。
`<input type="submit" value="提交">`是form表單的提交按鈕，將form表單中的數據發送給后臺服務器
***
#####12.radio 如何 分組?
單選按鈕radio元素，當radio元素的name值一樣時，這些input標簽歸為一組。即同一組的單選按鈕，name 取值一定要一致，比如下面例子輸入性別的時候，name屬性為同一個名稱“sex”，這樣同一組的單選按鈕才可以起到單選的作用。如果name不一致，那么兩個選項就都能選，這樣就失去了單選按鈕的意義。
```html
<input type="radio" name="sex" value="男">男</input>；
<input type="radio" name="sex" value="女">女</input>；
13.placeholder 屬性有什么作用?
在輸入框的提示信息
<input type="text" name="username" placeholder="在此處輸入"> 單行文本區
14.type=hidden隱藏域有什么作用? 舉例說明
<input type=hidden name="hid"> 隱藏域（暫存數據用戶不可見，可用作后臺預埋密鑰信息以驗證用戶提交數據是否為偽造，只有當服務器接收到的hidden和服務器預埋在頁面的信息一致時，才能成功提交表單數據）
如下例子：type=hidden的元素用戶不可見，但提交表單時，hid的值test已提交后臺。
<input type="hidden" name="hid" value="test"><br />
15.表單代碼
demo
版權聲明：本教程版權歸覃宴峰和饑人谷所有，轉載須說明來源！！！！
