有序列表、無序列表、自定義列表如何使用？寫個(gè)簡單的例子。三者在語義上有什么區(qū)別？在哪些情況下使用哪種（重要）？ 如何嵌套？
- 有序列表（ordered list） 跟做事情的操作步驟一樣，有邏輯上的先后順序，一般用數(shù)字來表示。
<ol>
<li>打開冰箱門
</li>
<li>把大象放進(jìn)去
</li>
<li>關(guān)上冰箱門
</li>
</ol>
- 無序列表（unordered list）內(nèi)容的羅列，無需考慮先后順序。默認(rèn)格式：每項(xiàng)前有個(gè)小黑點(diǎn)。
<ul>
<li>看書
</li>
<li>看電影
</li>
<li>聽歌
</li>
</ul>
- 自定義列表（definationg list）表示項(xiàng)目和其注釋的列表。以<dl>標(biāo)簽開始，列表項(xiàng)</dt>,列表項(xiàng)注釋</dd>。* 注： *列表項(xiàng)和注釋無需一一對應(yīng)。
<dl>
<dt>html常見表單標(biāo)簽
</dt>
<dd>有序列表
</dd>
<dd>無序列表
</dd>
<dd>自定義列表
</dd>
</dl>
三者語義區(qū)別:ol有邏輯上的先后順序，改變順序就改變了整個(gè)列表的意義。ul可隨意改變li的前后順序。dl標(biāo)簽中， dd "在語義上", 應(yīng)該是對 dt的注釋說明, 而不應(yīng)該是跟它無關(guān)的東西。
-
有序列表嵌套
有序列表嵌套 -
無序列表嵌套
無序列表嵌套 -
自定義列表嵌套
自定義列表嵌套 -
混合嵌套
混合嵌套
如何去除列表前面的點(diǎn)或者數(shù)字？
<style>
ul,ol {
list-style:none
}
</style>
class 和 id 有什么區(qū)別？什么時(shí)候用 class 什么時(shí)候用 id？
class是表示一類元素使用同一style的選擇器。
id是全文檔中唯一元素的選擇器，用于布局。
也就是說，id是先找到結(jié)構(gòu)/內(nèi)容，再給它定義樣式；class是先定義好一種樣式，再套給多個(gè)結(jié)構(gòu)/內(nèi)容。
塊級元素、行內(nèi)元素是什么？有什么區(qū)別？分別對應(yīng)哪些常用標(biāo)簽？
塊級元素一般都從新行開始，它可以容納內(nèi)聯(lián)元素和其他塊元素。“form"這個(gè)塊元素比較特殊，它只能用來容納其他塊元素。
常見標(biāo)簽：p/div/ol/ul/dl/form/table/h1/h2/h3/h4/h5/h6。
行內(nèi)元素/內(nèi)聯(lián)元素(inline element)一般都是基于語義級(semantic)的基本元素。內(nèi)聯(lián)元素只能容納文本或者其他內(nèi)聯(lián)元素。
常見標(biāo)簽：a/b/em/i/strong/font/img/input/select/span/textarea。
區(qū)別：
- 塊級元素垂直方向排列，行內(nèi)元素水平方向排列。
-
塊級元素默認(rèn)會撐滿整個(gè)寬度，行內(nèi)元素只占本身大小的空間，background-color會因?yàn)閜adding顏色的改變而占據(jù)空間，但是不影響布局。
行內(nèi)padding設(shè)置影響background-color - 盒模型不同。
行內(nèi)元素width，height設(shè)置無效，margin,padding上下無效?？梢栽O(shè)置line-height屬性。 - 塊級元素內(nèi)可以包含塊級元素和行內(nèi)元素，行內(nèi)元素內(nèi)只能包含行內(nèi)元素。
display: block、display: inline、display: inline-block分別有什么作用?
事實(shí)上，網(wǎng)頁上所有元素都有display屬性。一些元素display屬性為block，比如div/li/p等，一些元素display屬性默認(rèn)為inline,比如a/img等。display屬性可以被強(qiáng)制更改。
- display: block 元素會具有塊級元素的屬性，獨(dú)立占據(jù)一行，可以設(shè)置寬高。
- display: inline 元素具有行內(nèi)元素屬性。
-
display: inline-block 行內(nèi)塊元素。含有這個(gè)屬性的元素內(nèi)部具有塊級元素的一些屬性，可以設(shè)置寬高等，同時(shí)這個(gè)元素外部可以與其他元素同行，表現(xiàn)為行內(nèi)元素的一些屬性。
display
下面代碼是做什么的？抄寫一遍下面的代碼，注意class和id的使用及命名方式。
id用于布局和頁面獨(dú)一無二的元素。class用于樣式相似的元素。
<!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="" alt=""></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>
如何理解 HTML CSS 語義化? 在平時(shí)寫代碼的過程中要注意哪些細(xì)節(jié)。
htm css語義化有三個(gè)好處：一是方便搜索引擎或類似機(jī)器爬蟲抓取網(wǎng)頁信息；二方便開發(fā)者審查代碼，降低維護(hù)成本；三為網(wǎng)頁瀏覽者提供一個(gè)好的瀏覽體驗(yàn)，比如alt標(biāo)簽等。
html css語義化主要考慮從網(wǎng)頁結(jié)構(gòu)和內(nèi)容考慮，選擇語義化的標(biāo)簽及定義有意義的id、class的名稱等。
一些細(xì)節(jié)問題：
- 把css獨(dú)立出來寫，讓html很好地展示頁面結(jié)構(gòu)和內(nèi)容。
- 少用div、span、br等無意義標(biāo)簽，用div的時(shí)候多考慮列表。
- 在考慮瀏覽器兼容的情況下，多使用html 5這類語義化的標(biāo)簽。
html 5 新增語義化標(biāo)簽可以點(diǎn)擊前輩博客HTML 5的革新——語義化標(biāo)簽
form表單有什么作用？有哪些常用的input 標(biāo)簽，分別有什么作用？
form表單主要用于用戶與web服務(wù)器提交信息。
常用Input標(biāo)簽有：text輸入文本、password輸入密碼、radio單選、checkbox多選、 select下拉列表、 button按鈕、 submit提交。
post 和 get 方式的區(qū)別？
get主要用于獲取信息，獲取的數(shù)據(jù)數(shù)量少但是速度快，相關(guān)信息會在地址欄有所顯示，瀏覽器歷史記錄也可以查詢到密碼，安全系數(shù)低。
post主要用于向服務(wù)器傳輸數(shù)據(jù)，數(shù)據(jù)的傳輸主要取決于服務(wù)器，安全系數(shù)比較高。
在input里，name 有什么作用？
name規(guī)定了Input元素的屬性名稱，沒有name屬性頁面就無法向后臺相關(guān)傳輸數(shù)據(jù)。
比如：html元素Input type='radio'分組，radio button控件在同一個(gè)分組類，同一時(shí)間只能選中一個(gè)radio，這個(gè)分組就是根據(jù)相同的Name屬性來實(shí)現(xiàn)的。
<button>提交</button>、<a class="btn" href="#">提交</a>、<input type="submit" value="提交">三者有什么區(qū)別？
submit默認(rèn)為form提交，自動(dòng)提交表單數(shù)據(jù)。
button則響應(yīng)用戶自定義的事件,如果不指定onclick等事件處理函數(shù)，它是不做任何事情。當(dāng)然，button也可以完成表單提交的工作。
submit是一種特殊的button，一個(gè)表單只能有一個(gè)submit，卻可以有多個(gè)button。
<a class="btn" href="#">提交</a>可以通過css做成button的樣式，也不會提交數(shù)據(jù)。
radio 如何分組?
通過name，詳見上上題目。
placeholder 屬性有什么作用?
在未輸入任何信息時(shí)，提示用戶。
type=hidden隱藏域有什么作用? 舉例說明。
type=hidden 隱藏域是用于收集和發(fā)送信息用的?？蛻舳瞬伙@示，但提交后，服務(wù)器能夠接收，可以做表單驗(yàn)證值，拒絕來源不明的表單提交。
＜input type="hidden" name="..." value="..."＞
本教程版權(quán)歸本人和饑人谷所有，轉(zhuǎn)載須說明來源
