課程目標(biāo)
- 熟悉列表的使用場(chǎng)景
- 理解HTML語(yǔ)義化
- 理解行內(nèi)元素、塊級(jí)元素概念
- 熟悉常見(jiàn)input表單的使用方式
- 掌握 POST 與 GET 方式的區(qū)別
1. 有序列表、無(wú)序列表、自定義列表如何使用？寫個(gè)簡(jiǎn)單的例子。三者在語(yǔ)義上有什么區(qū)別？在哪些情況下使用哪種（重要）？如何嵌套？
有序列表和無(wú)序列表，顧名思義，有順序（顯示有數(shù)字）和無(wú)順序（默認(rèn)為圓點(diǎn)）。
自定義列表，是在列表前加個(gè)自定義的列表頭。
無(wú)序列表應(yīng)用得比較多，主要是導(dǎo)航和下拉菜單等等。有序列表對(duì)順序有要求的時(shí)候用。自定義列表主要用于需要有自定義描述的時(shí)候。
另外 ul , ol , li , dl , dt , dd 都是塊級(jí)元素。這3種列表可以互相嵌套。
<ul>
<li>哈哈</li>
<li>哈哈</li>
<li>
哈哈
<ul>
<li>哈哈</li>
<li>哈哈</li>
<li>哈哈</li>
</ul>
</li>
</ul>
<ol>
<li>哈哈</li>
<li>哈哈</li>
<li>哈哈</li>
</ol>
<dl>
<dt>自定義列表1</dt>
<dd>哈哈</dd>
<dd>哈哈</dd>
<dd>哈哈</dd>
<dt>自定義列表2</dt>
<dd>哈哈</dd>
<dd>哈哈</dd>
<dd>哈哈</dd>
</dl>
2. 如何去除列表前面的點(diǎn)或者數(shù)字？
list-sytle: none;
3. class 和 id 有什么區(qū)別？ 什么時(shí)候用 class 什么時(shí)候用 id ？
id 用在頁(yè)面上獨(dú)一無(wú)二的部分。
class 代表同一類型的。
一個(gè)標(biāo)簽可以有多個(gè) class ，但只能有一個(gè) id。
4. 塊級(jí)元素、行內(nèi)元素是什么？有什么區(qū)別？分別對(duì)應(yīng)哪些常用標(biāo)簽？
塊級(jí)元素占用空間是一整行，行內(nèi)元素占用空間是它自身的內(nèi)容寬度。行內(nèi)元素可以一并排顯示，塊級(jí)元素不能。
常見(jiàn)塊級(jí)元素： div、p、h1...h6、table、tr、ul、li、di、dt、form
常見(jiàn)行內(nèi)元素：a、span、img、input、button、em、textarea
可以加樣式 display: block 令行內(nèi)元素占一整行，變?yōu)閴K級(jí)元素。
也可以加樣式 display: inline 令塊級(jí)元素像行內(nèi)元素一樣顯示，變?yōu)樾袃?nèi)元素。
對(duì)于塊級(jí)元素，可以設(shè)置 width、height、padding、margin。
對(duì)于行內(nèi)元素，設(shè)置 width、height是無(wú)效的。它本身的寬、高是由它的內(nèi)容決定的。行內(nèi)元素占居的空間，跟設(shè)置的 padding、margin 沒(méi)有任何意義。（特別是上下）
水平的margin、padding 是有效的。上下 margin、padding 不占居空間。但是如果加了邊框 border，這樣可以看見(jiàn)上下邊框的范圍，再?gòu)?qiáng)調(diào)：即使這樣，在頁(yè)面上顯示為，“不占居空間”。
（雖然行內(nèi)元素沒(méi)有寬高，但是有行高 line-height ，這樣可以通過(guò)設(shè)置 line-height 來(lái)達(dá)到一種假的 "padding" 或者 “margin” 的效果---這是一種假的高度 height。）
5. display: block、 display: inline、 display: inline-block 分別有什么作用？
inline-block可以讓元素像行內(nèi)元素一樣排列， 又有塊級(jí)元素的特性，比如height、width、padding、margin。（但在IE8以下不能用）
tips: 令塊級(jí)元素水平排列，可以用浮動(dòng) float 或者 dispaly: 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="#">導(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>
這是一個(gè)典型頁(yè)面的大致框架，主要框架部分用了 id 選擇器。框架里面的細(xì)節(jié)用了 class 選擇器。
7. 如何理解 HTML CSS 語(yǔ)義化? 在平時(shí)寫代碼的過(guò)程中要注意哪些細(xì)節(jié)？
- 合理的分層
- 合理的標(biāo)簽
- 合理的命名
平常寫代碼時(shí)需要注意：先把頁(yè)面分大區(qū)塊，每一大塊再分成小塊，再細(xì)化...
html 的語(yǔ)義化：選擇合適的標(biāo)簽、使用合理的代碼結(jié)構(gòu)，便于開(kāi)發(fā)者閱讀，同時(shí)讓瀏覽器的爬蟲(chóng)和機(jī)器更好地解析。
text-align 讓塊級(jí)元素內(nèi)部的行內(nèi)元素居中。（留意下，塊級(jí)元素和行內(nèi)元素的盒模型，這很好理解。）
8. form表單有什么作用？有哪些常用的input 標(biāo)簽，分別有什么作用？
form的作用是，把用戶輸入的數(shù)據(jù)提交到后臺(tái)。
(如果 form 不寫 action 的提交頁(yè)面，則會(huì)把數(shù)據(jù)提交到當(dāng)前頁(yè)面。)
name 是表單提交時(shí)的名稱( 后面跟你輸入的東西，value )。
name 是 input 的名字，如果不寫，即使提交了，也會(huì)被忽略掉。
action 是提交的地址。method 是提交的方法。
(name=xx&age=XX)
9. post 和 get 方式的區(qū)別？
- 提交的方式不同，get 提交的數(shù)據(jù)可以在 url 看到， post 則看不到。
- get 一般用于提交少量數(shù)據(jù)（從名字上理解，get 需要獲取數(shù)據(jù)的。例子，給后臺(tái)“小明”，返回“小明的信息”。 給后臺(tái)提交一點(diǎn)數(shù)據(jù)，返回大量數(shù)據(jù)。）， post 用于提交大量數(shù)據(jù)（例子，寫博客，寫完文章，提交給后臺(tái)，然后后臺(tái)返回“你寫的文章成功提交” 給后臺(tái)提交大量數(shù)據(jù)，后臺(tái)返回少量提示。）。
- get 最多提交 1k 數(shù)據(jù)，這是瀏覽器限制的。（ url 最多一千個(gè)字符） post 則理論上沒(méi)有限制。但受服務(wù)器限制。
- get 提交的數(shù)據(jù)會(huì)在瀏覽器歷史記錄中，安全性不好。所以提交密碼等隱私信息都用 post。
10. 在input里，name 有什么作用？
該input的名字，起到一個(gè)索引的作用。
input 都要有 name 屬性。
name定義 input 元素的名稱。作為可與服務(wù)器交互數(shù)據(jù)的HTML元素的服務(wù)器端的標(biāo)示，或者在客戶端通過(guò) JavaScript 引用表單數(shù)據(jù)。由于后臺(tái)傳輸數(shù)據(jù)值時(shí)要借用name，所以name是必需屬性。
11. <button>提交</button>、<a class="btn" href="#">提交</a>、<input type="submit" value="提交">三者有什么區(qū)別？
<button>提交</button> 代表按鈕。在 HTML button 元素中你可以添加內(nèi)容，如文本或者圖片，這是與input 按鈕（button） 類型的不同之處。
<a class="btn" href="#">提交</a> 只是個(gè) a 鏈接。
<input type="submit" value="提交"> 是個(gè)form表單提交按鈕，用于提交表單數(shù)據(jù)。
12. radio 如何 分組?
name屬性相同的是一組。
13. placeholder 屬性有什么作用?
輸入框提示信息的作用，且會(huì)在輸入時(shí)消失。
14. type=hidden隱藏域有什么作用? 舉例說(shuō)明
- 暫存數(shù)據(jù)。
- 安全校驗(yàn)。
這種類型的輸入元素實(shí)際上是隱藏的。這個(gè)不可見(jiàn)的表單元素的 value 屬性保存了一個(gè)要提交給 Web 服務(wù)器的任意字符串。如果想要提交并非用戶直接輸入的數(shù)據(jù)的話，就是用這種類型的元素。
例子：
<form action="index.html" method="post">
姓名： <input type="text" name="username"> <br>
密碼： <input type="password" name="password"> <br>
<input type="hidden" name="name" value="test">
<input type="submit" name="name">
</form>
當(dāng)把數(shù)據(jù)提交給后臺(tái)，可以看見(jiàn)hidden的數(shù)據(jù)也一起提交了。
