1.有序列表、無序列表焰扳、自定義列表如何使用倦零？寫個(gè)簡單的例子。三者在語義上有什么區(qū)別吨悍？在哪些情況下使用哪種（重要）扫茅？ 如何嵌套？
i.舉例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>任務(wù)6.2</title>
<style type="text/css">
body {
background-color:#fdf6e3;
border:1px solid #aaa;
padding:10px;
}
</style>
</head>
<body>
<div id="div1">
<ol>
<li>有序列表一</li>
<li>有序列表二</li>
<li>有序列表三</li>
<li>有序列表四</li>
</ol>
</div>
<div id="div2">
<ul>
<li>無序列表</li>
<li>無序列表</li>
<li>無序列表</li>
<li>無序列表</li>
</ul>
</div>
<div id="div3">
<dl>
<dt>有序列表</dt>
<dd>有序列表是一個(gè)項(xiàng)目列表育瓜，它通過數(shù)字或字母編號來組織列表中包含的信息葫隙。有序列表的序號可以是數(shù)字（默認(rèn)）、大寫或小寫字母躏仇、大寫或小寫羅馬數(shù)字恋脚。</dd>
<dt>無序列表</dt>
<dd>無序列表也是一個(gè)項(xiàng)目列表腺办，無序列表在每個(gè)項(xiàng)目前都加上列表符號。默認(rèn)列表符號由瀏覽器決定慧起，但一般都是圓點(diǎn)菇晃。</dd>
<dt>自定義列表</dt>
<dd>自定義列表用于組織術(shù)語及其定義。術(shù)語單獨(dú)顯示蚓挤，對它的描述根據(jù)需要可以無限長。</dd>
</dl>
</div>
</body>
</html>
#####實(shí)現(xiàn)效果：
#####ii.區(qū)別
- 有序列表：
有序列表是一個(gè)項(xiàng)目列表驻子，它通過數(shù)字或字母編號來組織列表中包含的信息灿意。有序列表的序號可以是數(shù)字（默認(rèn)）、大寫或小寫字母崇呵、大寫或小寫羅馬數(shù)字缤剧。
- 無序列表：
無序列表也是一個(gè)項(xiàng)目列表，無序列表在每個(gè)項(xiàng)目前都加上列表符號域慷。默認(rèn)列表符號由瀏覽器決定荒辕，但一般都是圓點(diǎn)。
- 自定義列表：
自定義列表用于組織術(shù)語及其定義犹褒。術(shù)語單獨(dú)顯示抵窒，對它的描述根據(jù)需要可以無限長。
**使用環(huán)境**
<u>有序列表</u>一般用于當(dāng)列表項(xiàng)目有一定邏輯順序或者在后文中有引用需求的情況下叠骑。
<u>無序列表</u>一般用于列表項(xiàng)目沒有邏輯順序及沒有單條引用需要的情況下李皇。
<u>自定義列表</u>一般用于需要對一些術(shù)語進(jìn)行解釋描述的情況下。
#####iii.嵌套：
可以相互嵌套宙枷，但```<ol>```和```<ul>```的子元素須為```<li>```掉房，例如：
- ```
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>任務(wù)6.2</title>
<link rel="stylesheet" type="text/css" href="task6-2.css">
<style type="text/css">
body {
background-color:#fdf6e3;
}
</style>
</head>
<body>
<div id="div3">
<dl>
<dt>自定義列表1</dt>
<dd>
<ol>
<li>有序列表一</li>
<li>有序列表二</li>
<li>有序列表三</li>
<li>有序列表四</li>
</ol>
</dd>
<dt>自定義列表2</dt>
<dd>
<ol>
<li>有序列表一</li>
<li>有序列表二</li>
<li>有序列表三</li>
<li>有序列表四</li>
</ol>
</dd>
<dt>自定義列表3</dt>
<dd>
<ul>
<li>無序列表</li>
<li>無序列表</li>
<li>無序列表</li>
<li>無序列表</li>
</ul>
</dd>
<dt>自定義列表4</dt>
<dd>
<ul>
<li>無序列表</li>
<li>無序列表</li>
<li>無序列表</li>
<li>無序列表</li>
</ul>
</dd>
</dl>
</div>
</body>
</html>```
**實(shí)現(xiàn)效果：**
###2.如何去除列表前面的點(diǎn)或數(shù)字？
在HTML5之前可以為```<ul>```和```<ol>```標(biāo)記設(shè)置type屬性慰丛，另外卓囚，有序列表中可以通過設(shè)置start屬性來指定序號起始值。
更好的方法是通過CSS來配置列表前面的符號诅病，見下表：
屬性名稱 |說明<br> |值<br> |列表符號<br>
:--|:--|:--|:--
<br> <br> <br>```list-style-type```|<br> <br> <br>配置列表符號樣式|none<br>disc<br>circle<br>square<br>decimal<br>upper-alpha<br>lower-alpha<br>lower-roman|不顯示列表符號<br>圓點(diǎn)<br>圓環(huán)<br>方塊<br>阿拉伯?dāng)?shù)字<br>大寫字母<br>小寫字母<br>小寫羅馬數(shù)字
```list-style-image```|指定用于替代列表符號的圖片|url關(guān)鍵字哪亿，并在一對圓括號中指定圖片的文件名或路徑|在每個(gè)列表項(xiàng)前顯示指定圖片
```list-style-position```|配置列表符號的位置|inside<br> <br>outside（默認(rèn)）|符號縮進(jìn)，文本對齊符號<br>符號按默認(rèn)方式定位睬隶，文本不對齊符號
**舉例：**
- ```
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>任務(wù)7.2</title>
<style type="text/css">
.ol1 {
list-style-type:lower-alpha; /*設(shè)置有序列表項(xiàng)目符號為小寫字母*/
}
.ol2 {
list-style-type:upper-roman; /*設(shè)置有序列表項(xiàng)目符號為大寫羅馬數(shù)字*/
}
.ul1 {
list-style-type:square; /*設(shè)置無序列表項(xiàng)目符號為方塊*/
}
.ul2 {
list-style-image:url(image/xiangmu.gif); /*設(shè)置無序列表項(xiàng)目符號為指定圖片*/
list-style-position:inside; /*設(shè)置無序列表項(xiàng)目符號為縮進(jìn)锣夹，與文本對齊*/
}
</style>
</head>
<body>
<div id="div1">
<ol class="ol1">
<li>有序列表一</li>
<li>有序列表二</li>
<li>有序列表三</li>
<li>有序列表四</li>
</ol>
</div>
<hr>
<div id="div2">
<ol class="ol2">
<li>有序列表一</li>
<li>有序列表二</li>
<li>有序列表三</li>
<li>有序列表四</li>
</ol>
</div>
<hr>
<div id="div3">
<ul class="ul1">
<li>無序列表</li>
<li>無序列表</li>
<li>無序列表</li>
<li>無序列表</li>
</ul>
</div>
<hr>
<div id="div4">
<ul class="ul2">
<li>無序列表</li>
<li>無序列表</li>
<li>無序列表</li>
<li>無序列表</li>
</ul>
</div>
</body>
</html>```
**實(shí)現(xiàn)效果：**
###3.class 和 id 有什么區(qū)別？什么時(shí)候用 class 什么時(shí)候用 id苏潜？
#####i.
class為元素類名银萍，一個(gè)元素可以有多個(gè)類名，一個(gè)類名可以被多個(gè)元素使用恤左。
id相當(dāng)于某個(gè)元素的專屬名稱贴唇，一個(gè)元素只能配置一個(gè)唯一的id搀绣。
#####ii.
當(dāng)需要將網(wǎng)頁的多個(gè)部分配置相同樣式的時(shí)候可以使用class選擇符。當(dāng)需要選擇頁面上單個(gè)區(qū)域?yàn)槠涮砑营?dú)特樣式時(shí)使用id選擇符戳气。
###4.塊級元素链患、行內(nèi)元素是什么？有什么區(qū)別瓶您？分別對應(yīng)哪些常用標(biāo)簽麻捻？
######i.
塊級元素通常占據(jù)其父級元素的整行空間，且默認(rèn)從新行開始呀袱；
行內(nèi)元素的范圍只在于其內(nèi)容所占據(jù)的空間贸毕，一般不另起一行作為開始。
######ii.區(qū)別
默認(rèn)情況下夜赵，塊級元素會新起一行明棍。塊級元素可以包含塊級元素和行內(nèi)元素。
而行內(nèi)元素一般不會新起一行寇僧，且行內(nèi)元素只能包含數(shù)據(jù)或其他行內(nèi)元素摊腋。
######iii.常用標(biāo)簽
行內(nèi)元素：```<a> <span> <img> <input> <button> <select> <textarea> ```
塊級元素：```<ol> <dl> <ul> <p> <h1>~<h6> <div> <header> <nav> <footer> ```
###5.```display: block```、```display: inline```嘁傀、```display: inline-block```分別有什么作用兴蒸？
- ```display: block```將元素類型轉(zhuǎn)換成塊級元素，前后換行心包；
- ```display: inline```將元素類型裝換為行內(nèi)元素类咧，前后不換行；
- ```display: inline-block```將元素傳換為塊級元素蟹腾，但該塊級元素跟隨周圍內(nèi)容流動(dòng)痕惋，如同一個(gè)單獨(dú)的行內(nèi)盒子。
###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="image/tubiao.gif"></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>```
以上代碼寫了一張網(wǎng)頁炉爆，由header堕虹、content、footer三部分組成芬首，其中header部分包含一個(gè)logo鏈接和導(dǎo)航欄赴捞，content部分包含側(cè)邊欄和中心區(qū)塊，這三個(gè)部分使用同樣的class名“wrap”用以統(tǒng)一配置css使其寬900px并水平居中郁稍。content部分為其配置如下css:
- ```
.aside {
width:260px;
float:left;
}
.main {
width:600px;
float:right;
}```
即為.aside和.main分別配置左浮動(dòng)和有浮動(dòng)使其呈左右布局赦政。
###7.如何理解HEML和CSS語義化？在平時(shí)寫代碼的過程中要注意哪些細(xì)節(jié)？
HTML和CSS的語義化就是將頁面的內(nèi)容結(jié)構(gòu)化恢着，使機(jī)器能夠讀懂內(nèi)容桐愉，便于瀏覽器和搜索引擎解析。同時(shí)也便于網(wǎng)頁的閱讀和維護(hù)掰派。
在寫代碼的過程中要注意：
1.使用合適的塊元素配置網(wǎng)頁上的不同區(qū)域从诲，如```<header>```、```<nav>```靡羡、```<footer>```系洛，但要考慮兼容性。
2.統(tǒng)一書寫規(guī)范略步，如：
- 用兩個(gè)空格來代替制表符（tab）
- 嵌套元素應(yīng)當(dāng)縮進(jìn)一次
- 不要省略可選的結(jié)束標(biāo)簽
- 統(tǒng)一規(guī)范的class碎罚、id命名、
等等纳像。
###8.form表單有什么作用？有哪些常用的input 標(biāo)簽拯勉，分別有什么作用竟趾？
表單用于搜集不同類型的用戶輸入，包含的組織表單控件宫峦。
常用的input標(biāo)簽：
i. **文本框**```type="text"```岔帽，用于接收用戶輸入，比如姓名导绷、email地址犀勒、電話號碼和其他文本。
ii. **密碼框**```type="password"```妥曲，密碼框和文本框相似贾费，但它接收的是需要在輸入過程中隱藏的數(shù)據(jù)。
iii. **單選框**```type="radio"```檐盟，單選鈕允許用戶從一組事先確定的選項(xiàng)中選擇唯一的一項(xiàng)褂萧，在同一組中，每個(gè)單選鈕的name屬性是一樣的葵萎，而且不同單選按鈕的value屬性值不能重復(fù)导犹。
iv. **復(fù)選框**```type="checkbox"```，這種表單控件允許用戶從一組事先確定的選項(xiàng)中選擇一項(xiàng)或多項(xiàng)羡忘。
v. **提交按鈕**```type="submit"```谎痢，提交按鈕用于提交表單，點(diǎn)擊會觸發(fā)```<from>```標(biāo)記指定的```action```卷雕，造成瀏覽器將表單數(shù)據(jù)發(fā)送給web服務(wù)器节猿。
vi. **重置按鈕**，重置按鈕將表單的各個(gè)字段重置為初始值爽蝴，重置按鈕不提交表單沐批。
vii. **隱藏字段**```type="hidden"```纫骑，隱藏字段可以儲存文本或數(shù)值信息，但在網(wǎng)頁中不顯示九孩。隱藏字段可由客戶端和服務(wù)器端腳本訪問先馆。
**表單中的其它元素：**
i.**```textarea```元素**，該元素接收無格式的留言躺彬、提問或陳述文本煤墙。使用其```cols```或```rows```屬性為其設(shè)定以字符為單位的寬度或高度。
ii.**```select```和```option```元素**宪拥，```select```元素用于包含和配置列表仿野。```option```元素用于包含和配置選擇列表中的選項(xiàng)。
iii.**```lable```元素**她君，```lable```元素是將文本描述和表單控件關(guān)聯(lián)起來的容器標(biāo)記脚作。有兩種不同的方法在標(biāo)簽和表單控件之間建立關(guān)聯(lián)。
* 第一種方法是將```lable```元素作為容器來包含文本描述和HEML表單控件缔刹。注意文本標(biāo)簽和表單控件必需是相鄰的元素球涛。例如：
- ```
<lable>E-mail:<input type="text" name="email" id="email"></lable>
- 第二種方法是利用
for屬性將標(biāo)簽和特定HTML表單控件關(guān)聯(lián)。這種方法更靈活校镐，不要求文本標(biāo)簽和表單控件相鄰亿扁。
<lable for="email">E-mail:</lable>
<input type="text" name="email" id="email">
###9.```post``` 和``` get``` 方式的區(qū)別？
- ```get```是默認(rèn)值鸟廓。使表單數(shù)據(jù)被附加到URL上并發(fā)送給Web服務(wù)器从祝。
- ```post```方式比較隱蔽，他將表單數(shù)據(jù)包含在HTTP應(yīng)答主題中進(jìn)行發(fā)送引谜。
###10.在```input```里牍陌，```name```有什么作用？
此時(shí)```name```用于為表單控件命名煌张，便于客戶端腳本語言（如JavaScript）或服務(wù)器端程序訪問呐赡。名稱必需唯一。
*單選框的```name```是必須有的屬性骏融；同一個(gè)組的單選鈕必須有相同的name為表單控件命名链嘀，以實(shí)現(xiàn)單選效果。*
###11.```<button>提交</button>```档玻、```<a class="btn" href="#">提交</a>```怀泊、```<input type="submit" value="提交">```三者有什么區(qū)別？
- ```<button>提交</button>```只是一個(gè)普通的按鈕误趴，可以通過onclick綁定JavaScript事件霹琼。
- ```<a class="btn" href="#">提交</a>```是一個(gè)鏈接，用于實(shí)現(xiàn)頁面跳轉(zhuǎn)。
- ```<input type="submit" value="提交">```用于提交表單數(shù)據(jù)到后臺枣申。
###12.```radio```如何分組?
如果想實(shí)現(xiàn)幾個(gè)```radio```控件單選的效果售葡，同一個(gè)組的單選控件必需有相同的name為其命名。
###13.placeholder 屬性有什么作用?
用戶輸入的提示信息忠藤，輸入字段為空時(shí)顯示挟伙，當(dāng)輸入字段獲得焦點(diǎn)時(shí)消失。
###14.```type=hidden```隱藏域有什么作用? 舉例說明
隱藏域可以用來存儲文本或數(shù)值信息模孩，但在網(wǎng)頁中不顯示尖阔。隱藏字段可由客戶端和服務(wù)器端腳本訪問。
***
此教程版權(quán)歸王康和饑人谷所有榨咐，轉(zhuǎn)載請說明來源