有序列表、無序列表、自定義列表如何使用？寫個(gè)簡(jiǎn)單的例子。三者在語(yǔ)義上有什么區(qū)別？在哪些情況下使用哪種（重要）？ 如何嵌套？
如何使用：
<ol>//有序列表通常定義有編號(hào)或順序的列表，用于執(zhí)行步驟的語(yǔ)義
<li>輸入用戶名</li>
<li>輸入密碼</li>
<li>進(jìn)入登錄界面</li>
</ol>//常用于
<ul> //無序列表只是純粹的表示一些相關(guān)項(xiàng)的列表，順序并不重要，常用于網(wǎng)站導(dǎo)航欄
<li>iPad</li>
<ul>
<li>iPad mini</li>
<li>iPad2</li>
<li>iPad3</li>
</ul>
<li>iPhone</li>
<li>MacBook Air</li>
</ul>
<dl>//自定義列表通常用來概述多個(gè)項(xiàng)目的描述
<dt>家電</dt>
<dd>洗衣機(jī)</dd>
<dd>電視機(jī)</dd>
<dt>家具</dt>
<dd>茶幾</dd>
<dd>櫥柜</dd>
</dl>
- 如何去除列表前面的點(diǎn)或者數(shù)字？
- 給列表添加 list-style: none;樣式可以去除
- class 和 id 有什么區(qū)別？什么時(shí)候用 class 什么時(shí)候用 id？
- id是一個(gè)唯一的標(biāo)識(shí)符，class是可重復(fù)的我們可以給多個(gè)標(biāo)簽增加同一個(gè)class名稱。id的優(yōu)先級(jí)大于class
- 當(dāng)HTML中只出現(xiàn)一次的標(biāo)簽可以用id，比如頁(yè)眉、頁(yè)腳、側(cè)邊欄，當(dāng)頁(yè)面中很多元素都需要用同一個(gè)樣式時(shí)則使用class。
- 塊級(jí)元素、行內(nèi)元素是什么？有什么區(qū)別？分別對(duì)應(yīng)哪些常用標(biāo)簽？
- 塊級(jí)元素占據(jù)其父元素（容器）的整個(gè)空間，默認(rèn)情況下，塊級(jí)元素會(huì)新起一行。高度，行高以及頂和底邊距都可控制；寬度缺省是它的容器的100%，除非設(shè)定一個(gè)寬度。
- 行內(nèi)元素只占據(jù)它對(duì)應(yīng)標(biāo)簽的邊框所包含的空間，默認(rèn)情況下，行內(nèi)元素不會(huì)以新行開始，相鄰的行內(nèi)元素在同一行上緊鄰顯示，而塊級(jí)元素會(huì)新起一行。高，行高及頂和底邊距不可改變；寬度就是它的文字或圖片的寬度，不可改變。
-
塊元素
塊元素 - 行內(nèi)元素
b, big, i, small, tt
abbr, acronym, cite, code, dfn, em, kbd, strong, samp, var
a, bdo, br, img, map, object, q, script, span, sub, sup
button, input, label, select, textarea - display: block、display: inline、display: inline-block分別有什么作用?
- display:inline; 該元素生成一個(gè)或多個(gè)行內(nèi)元素盒。
使元素具有行內(nèi)元素的特性。 - display:block; 該元素生成一個(gè)塊元素盒。
使元素具有塊元素的特性。 - display:inline-block; 該元素生成一個(gè)塊狀盒，該塊狀盒隨著周圍內(nèi)容流動(dòng)，如同它是一個(gè)單獨(dú)的行內(nèi)盒子（表現(xiàn)更像是一個(gè)被替換的元素）
使元素具有塊元素的特性，又同時(shí)使元素能跟隨周圍內(nèi)容顯示具有行內(nèi)元素的特性。(應(yīng)用此特性的元素呈現(xiàn)為內(nèi)聯(lián)對(duì)象，周圍元素保持在同一行，但可以設(shè)置寬度和高度地塊元素的屬性) - 下面代碼是做什么的？抄寫一遍下面的代碼，注意class和id的使用及命名方式
- 下面代碼中使用三個(gè)id給頁(yè)面分為header、content、footer三塊，header、content中用class命名每塊需要的內(nèi)容，然后用class類.wrap加上樣式使得不同區(qū)域塊里的內(nèi)容使用同一個(gè)樣式得到固定寬度并水平居中。
- 可以從下列代碼中看出id通常命名單獨(dú)的一個(gè)塊區(qū)域，如：header、content、footer、logo。而class用來定義需要同一樣式的多個(gè)元素。
<!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="#">導(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 語(yǔ)義化? 在平時(shí)寫代碼的過程中要注意哪些細(xì)節(jié)
- web語(yǔ)義化是在設(shè)計(jì)頁(yè)面時(shí)通過采用語(yǔ)義恰當(dāng)?shù)臉?biāo)簽去構(gòu)建網(wǎng)頁(yè)，從而使網(wǎng)頁(yè)更好讓計(jì)算機(jī)、開發(fā)者和用戶理解，這導(dǎo)致的結(jié)果是頁(yè)面在去除CSS樣式后仍然具有良好的可讀性、后期的維護(hù)性以及搜索引擎的優(yōu)化性等。
- 增加用戶體驗(yàn)
- 提高開發(fā)效率
- 搜索引擎優(yōu)化
在平時(shí)寫代碼的過程中要注意哪些細(xì)節(jié)
嚴(yán)格要求自己精準(zhǔn)使用語(yǔ)義化標(biāo)簽
多思考能夠使用語(yǔ)義化標(biāo)簽的地方盡可能采用語(yǔ)義化標(biāo)簽
不要嫌麻煩，只要你的網(wǎng)頁(yè)是需要團(tuán)隊(duì)開發(fā)以及后期維 護(hù)
良好的格式化代碼習(xí)慣
精簡(jiǎn)的寫碼風(fēng)格
標(biāo)識(shí)符要具有可讀性
form表單有什么作用？有哪些常用的input 標(biāo)簽，分別有什么作用？
<form>元素表示了文檔中的一個(gè)區(qū)域，這個(gè)區(qū)域包含有交互控制元件，用來向web服務(wù)器提交信息。
<input type="text" name="user">用戶可以在文本域?qū)懭胛谋尽? <input type="password" name="password">用戶可以在密碼域中寫入密碼。
<input type="checkbox" name="Bike">
<input type="checkbox" name="Car">用戶可以選中或取消選取復(fù)選框。
<input type="radio" checked="checked" name="Sex" value="male" >用戶可以選中或取消選取單選框。
<input type="submit" value="submit"> 創(chuàng)建一個(gè)提交按鈕
<input type="button" value="Hello world!">創(chuàng)建按鈕,你可以對(duì)按鈕上的文字進(jìn)行自定義。
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat" selected="selected">Fiat</option>
<option value="audi">Audi</option>
</select>創(chuàng)建簡(jiǎn)單的下拉列表框。
<textarea rows="10" cols="30">用戶可以在文本域中寫入文本。在文本域中，可寫入的字符字?jǐn)?shù)不受限制。
<fieldset>
<legend>健康信息</legend>
身高：<input type="text" />
體重：<input type="text" />
</fieldset>在數(shù)據(jù)周圍繪制一個(gè)帶標(biāo)題的框。
- post 和 get 方式的區(qū)別？
- POST和GET完成的任務(wù)都是一樣的，都是將表單數(shù)據(jù)從瀏覽器發(fā)送到服務(wù)器，不過采用了兩種不同的方式。POST會(huì)打包表單變量，在后臺(tái)把它們發(fā)送到服務(wù)器；GET也會(huì)打包你的表單變量，但會(huì)把這些數(shù)據(jù)追加到URL的最后，然后向服務(wù)器發(fā)送一個(gè)請(qǐng)求。
- GET的使用場(chǎng)景：查看當(dāng)前時(shí)事的表單（如果你希望用戶能夠?qū)μ峤坏谋韱魏蟮慕Y(jié)果頁(yè)面加書簽，就必須使用GET）
- POST的使用場(chǎng)景：輸入用戶名和口令的表單，訂購(gòu)CD的表單，提交書評(píng)的表單，按身份證號(hào)查看福利的表單，發(fā)送客戶反饋的表單······
- 在input里，name 有什么作用？
- name 屬性用于對(duì)提交到服務(wù)器后的表單數(shù)據(jù)進(jìn)行標(biāo)識(shí)，或者在客戶端通過 JavaScript 引用表單數(shù)據(jù)。只有設(shè)置了 name 屬性的表單元素才能在提交表單時(shí)傳遞它們的值。在input里，name是唯一的名字是后臺(tái)接受的名字，比如同組的所有單選鈕都有相同的名字，多選按鈕最好使用name[]（把結(jié)果提交到后臺(tái)數(shù)組中的名稱）。
- <button>提交</button>、<a class="btn" href="#">提交</a>、<input type="submit" value="提交">三者有什么區(qū)別？
- <button>提交</button>
是一個(gè)普通的按鈕，一般加上js事件。在button元素內(nèi)部，可以放置內(nèi)容，比如文本或圖像。 - <a class="btn" href="#">提交</a>
是一個(gè)鏈接，可以通過css把他制作成一個(gè)按鈕的樣式鏈接到另外一個(gè)頁(yè)面。不會(huì)提交數(shù)據(jù)。 - <input type="submit" value="提交">
可以提交form表單的數(shù)據(jù)，當(dāng)加上JS事件時(shí)會(huì)一并提交表單。 - radio 如何 分組?
- 設(shè)置name為同一個(gè)名字，意思為設(shè)置為同一組。
<input type="radio" name="beantype" value="whole">Whole bean <br>
<input type="radio" name="beantype" value="ground">Ground
- placeholder 屬性有什么作用?
- placeholder 屬性用于設(shè)置或返回文本域的 placeholder 屬性值。
placeholder 屬性設(shè)置了輸入字段預(yù)期值的提示信息。
姓名:<input type="text" name="user" placeholder="在這輸入姓名...">
placeholder屬性
- type=hidden隱藏域有什么作用? 舉例說明
- 定義隱藏字段。隱藏字段對(duì)于用戶是不可見的。隱藏字段通常會(huì)存儲(chǔ)一個(gè)默認(rèn)值，它們的值也可以由 JavaScript 進(jìn)行修改。這個(gè)提交的隱藏值可以用于后臺(tái)對(duì)提交的數(shù)據(jù)進(jìn)行效驗(yàn)。
- 下列代碼：
Email: <input type="text" name="email" /><br />
<input type="hidden" name="country" value="China" />
<input type="submit" value="Submit" />
-
頁(yè)面中顯示的樣子：
頁(yè)面中 當(dāng)用戶填寫好Email后點(diǎn)擊Submit提交表單到后臺(tái)時(shí)，后臺(tái)接收到的不僅僅是email=郵箱地址，而是email=郵箱地址&country=China。
本博客版權(quán)歸 楊然和饑人谷所有，轉(zhuǎn)載需說明來源
