1.有序列表、無序列表、自定義列表如何使用？寫個簡單的例子。三者在語義上有什么區別？在哪些情況下使用哪種（重要）？ 如何嵌套？
答：有序列表：
<ol>
<li>蘋果</li>
<li>香蕉</li>
<li>梨</li>
</ol>````
無序列表：
<ul>
<li>蘋果</li>
<li>香蕉</li>
<li>梨</li>
</ul>````
自定義列表：
<dl>
<dt>水果</dt>
<dd>香蕉</dd>
<dt>蔬菜</dt>
<dd>蘿卜</dd>
</dl>````
區別：
- 有序列表列表項目`<li>`之前都使用數字進行標記。
- 無序列表項目`<li>`都使用圓點或者其他符號圖片進行標記。
- 自定義列表由表頭`<dt>`和注釋`<dd>`組成，沒有標記。
使用場景：
- 有序列表適合在內容有先后步驟或順序的地方使用。
- 無序列表適合在內容處于并列關系的地方使用。
- 自定義列表適合內容有標題有注釋的地方使用。
如何嵌套：
在項目`<li>`中再加入一個列表即可 例：
<ul>
<li>
<ul>主食
<li>拉面</li>
<li>饃饃</li>
<li>米飯</li>
</ul>
</li>
<li>
<ul>月份
<li>一月</li>
<li>二月</li>
<li>三月</li>
</ul>
</li>
<li>
<dl>前端<dd>
包含HTML、CSS、JS</dd>
</dl>
</li>
</ul>````
效果圖
搜狗截圖16年07月21日1301_2.png
2.如何去除列表前面的點或者數字？
答：在<li>樣式中定義list-style:none即可。
3.class 和 id 有什么區別？什么時候用 class 什么時候用 id？
答：class與id的區別：
- class在樣式可以使用多次，而id只能使用一次。
- class書寫前綴使用“.”，而id的前綴使用“#”。
- id是一個標簽用于區分不同的結構和內容，就像一個人只能有一個名字，class是可以各種套用的，并沒有規定次數和使用條件。
什么時候用？ - id在頁面中是獨一無二的，在劃分頁面的大區塊的時候使用，這樣大的區塊不會受其他的樣式的影響。class在寫內部樣式的時候使用，一些重復的樣式。
4.塊級元素、行內元素是什么？有什么區別？分別對應哪些常用標簽？
答：
- 塊級元素：占據一整行空間，可以設置寬度和高度。內部可以有塊級元素和行內元素，margin和padding對其起作用占據空間。
- 行內元素：只占據自己的空間可以跟其他元素并排出現，占據的空間跟他自身內容有關，margin跟padding對其垂直占據空間無效，水平占據空間有效。
line-height可以占據其垂直空間。 - 塊級標簽：
<div>、<p>、<h1>、<table>、<tr>、<ul>、<form>等。 - 行內標簽：
<a>、<span>、<img>、<input>、<em>、<textarea>等
5,。display: block、display: inline、display: inline-block分別有什么作用?
答：
-
display:block作用：把元素顯示為塊級元素。 -
display:inline作用：把元素顯示為行內元素。 -
display:inline-block作用：把元素顯示為行內塊級元素，使其既能像塊級元素可以設置寬高的特性，又能像行內元素可以不換行的特性。
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">這里是 footer</div>
</div>
</body>
</html>````
- 用三個id選擇器將頁面大體分為三部分header、content、footer這樣讓這三個部分具有唯一性。
- 將命名為wrap的元素設為寬度900px 并室友`margin:0 auto`使其水平居中。
- 將一個div再次分為多個div，使div的功能不同。
####7.如何理解 HTML CSS 語義化? 在平時寫代碼的過程中要注意哪些細節
答：
>- **why?為什么要進行語義化？**
** **1，現在的開發基本上都是一個團隊合作進行開發。這種情況下，我們寫的代碼不僅要讓我們自己能看懂，而且也應該讓別人也容易理解和閱讀，要保證代碼的可維護性，這一點很重要。但是在實際開發中，由于HTML的靈活性，以及CSS的強大，以至于實現同一種界面樣式，不同的人寫出來的代碼可能實現方式都不太一樣。實現糟糕的，可能全是div套div，這樣的代碼到時候維護的話可能就是一場災難。這一點，個人覺得是最主要的因素。
2，和搜索引擎建立良好溝通，有助于爬蟲抓取更多的有效信息
3，考慮到代碼的可復用性，可移植性，方便其他設備的解析執行。移動設備、盲人閱讀器等。
- **什么是HTML語義化？**
> HTML標簽可以分為有語義的標簽，和無語義的標簽。比如table表示表格，form表示表單，a標簽表示超鏈接，strong標簽表強調。無語義標簽典型的有<div>,<span>等。HTML語義化我的理解就是在頁面中盡量多滴結合場景多使用含有語義的標簽，少使用div,span等無語義的標簽。
- 語義化是將代碼寫的更容易讓人讀懂，不光要讓機器懂，要讓人讀起來也不是那么費勁。
- 寫的時候要有一套整齊規范的風格，盡量使用英文去編寫不要出現拼音，單詞連接處使用統一符號，推薦使用“-”簡單明了，輸入也方便。
- 要理解每個標簽的含義，在命名的時候也使用更容易讓人懂的詞語，利于跟人一起開發維護。
- 語義化是個過程，可以參考一些優秀的作品跟他們去吸取他們好的語義化經驗，讓自己的代碼更出色！
####8.form表單有什么作用？有哪些常用的input 標簽，分別有什么作用？
答：
- `<form>`是HTML表單作用是將用戶提交的數據發給后臺。
- `<name>`是表單的名稱。
- `<action>`是提交到的地址。
- `<method>`是提交的方式，有get和post兩種方式。
- `<target_blank>`在新窗口打開。
- `<enctype>`對表單發送到服務器之前進行編碼。
input標簽
- `<input type="text">`用于輸入文本,可以加入`placeholder`屬性來寫框內的提示內容，還有`maxlength`用來限制文本框里的字數，`value`用來填寫里面的默認內容。
- `<input type="password">`里面輸入密碼顯示文字為星號。
- `<imput type=“raido”>`是單選框但是只在里面`name`相同的情況下是單選，不相同的話是多選。
- `<input type="checkbox">`復選框，加入`checked`使之成為默認選項。
- `<input type="textrea">文本域，用于輸入大量文本。
- `<input type="select">下拉選擇列表，加入`selected`使之成為默認選擇。
- `<input type="submit" >`定義提交按鈕,向服務器發送表單數據，里面的內容根據`value`決定。
- `<input type="reset" >` 定義重置按鈕。重置按鈕會清除表單中的所有數據。
- `<input type="image" >` 定義圖像形式的提交按鈕。
必須把標簽的 src 屬性和Alt屬性與其結合使用。
- `<input type="hidden">`定義隱藏字段。隱藏字段對于用戶是不可見的。隱藏字段通常會存儲一個默認值，它們的值也可以由 JavaScript 進行修改。
- `<input type="file" >`用于文件上傳。
- `<input type="button" > `定義可點擊的按鈕，但沒有任何行為。button 類型常用于在用戶點擊按鈕時啟動 JavaScript 程序。
[參考w3school](http://www.w3school.com.cn/tags/att_input_type.asp)
####9.post 和 get 方式的區別？
答：
- get用于提交少量數據最多1kb大小，post可用來提交大量數據，取決于服務器的接受程度。
- get提交的數據會顯示在URL中，可在歷史記錄中查到，安全性不高，用戶名密碼都使用post傳輸。
- 數據提交方式不同，get用來獲取信息，查詢數據庫，不會影響數據庫的數據和資源的狀態。post則會響數據庫的數據和資源的狀態。
####10.在input里，name 有什么作用？
答：作為可與服務器交互數據的HTML元素的服務器端的標示。有了name服務器才能認識它，所以必須有name值。
####11.`<button>`提交`</button>
、<a class="btn" href="#">提交</a>
、<input type="submit" value="提交">`
三者有什么區別？
答：
- `<button>`提交`</button>`只是一個按鈕點了沒反應，但是可以觸發JS事件。
- `<a class="btn" href="#">`可以通過這個按鈕鏈接到任意地址，包括要提交的地址。
- <input type="submit" value="提交">`提交到后臺的按鈕。
####12.`radio` 如何 分組?
答：`name`相同的為一組。
####13.placeholder 屬性有什么作用?
答：用來規定文本框內的提示信息。
####14.type=hidden隱藏域有什么作用? 舉例說明
答：
>**作用：** 1 隱藏域在頁面中對于用戶是不可見的，在表單中插入隱藏域的目的在于收集或發送信息，以利于被處理表單的程序所使用。瀏覽者單擊發送按鈕發送表單的時候，隱藏域的信息也被一起發送到服務器。
2 有些時候我們要給用戶一信息，讓他在提交表單時提交上來以確定用戶身份，如sessionkey，等等．當然這些東西也能用cookie實現，但使用隱藏域就簡單的多了．而且不會有瀏覽器不支持，用戶禁用cookie的煩惱。
3 有些時候一個form里有多個提交按鈕，怎樣使程序能夠分清楚到底用戶是按那一個按鈕提交上來的呢？我們就可以寫一個隱藏域，然后在每一個按鈕處加上onclick="document.form.command.value="xx""然后我們接到數據后先檢查command的值就會知道用戶是按的那個按鈕提交上來的。
4 有時候一個網頁中有多個form，我們知道多個form是不能同時提交的，但有時這些form確實相互作用，我們就可以在form中添加隱藏域來使它們聯系起來。
5 javascript不支持全局變量，但有時我們必須用全局變量，我們就可以把值先存在隱藏域里，它的值就不會丟失了。
6 還有個例子，比如按一個按鈕彈出四個小窗口，當點擊其中的一個小窗口時其他三個自動關閉．可是IE不支持小窗口相互調用，所以只有在父窗口寫個隱藏域，當小窗口看到那個隱藏域的值是close時就自己關掉。
簡單來說就是暫存數據，和安全性校驗。
**本文版權歸本人和饑人谷所有，轉載請注明出處**
