課程目標(biāo)
- 熟悉列表的使用場景
- 理解HTML語義化
- 理解行內(nèi)元素、塊級元素概念
- 熟悉常見input表單的使用方式
- 掌握 POST 與 GET 方式的區(qū)別
1. 有序列表、無序列表盒至、自定義列表如何使用盈魁？寫個(gè)簡單的例子。三者在語義上有什么區(qū)別廉侧？在哪些情況下使用哪種（重要）咽白？如何嵌套啤握？
有序列表和無序列表鸟缕，顧名思義晶框，有順序（顯示有數(shù)字）和無順序（默認(rèn)為圓點(diǎn)）。
自定義列表懂从，是在列表前加個(gè)自定義的列表頭授段。
無序列表應(yīng)用得比較多，主要是導(dǎo)航和下拉菜單等等番甩。有序列表對順序有要求的時(shí)候用侵贵。自定義列表主要用于需要有自定義描述的時(shí)候。
另外 ul , ol , li , dl , dt , dd 都是塊級元素缘薛。這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 用在頁面上獨(dú)一無二的部分。
class 代表同一類型的恕齐。
一個(gè)標(biāo)簽可以有多個(gè) class 乞娄，但只能有一個(gè) id。
4. 塊級元素显歧、行內(nèi)元素是什么仪或？有什么區(qū)別？分別對應(yīng)哪些常用標(biāo)簽士骤？
塊級元素占用空間是一整行范删，行內(nèi)元素占用空間是它自身的內(nèi)容寬度。行內(nèi)元素可以一并排顯示拷肌，塊級元素不能到旦。
常見塊級元素： div束铭、p、h1...h6厢绝、table契沫、tr、ul昔汉、li懈万、di、dt靶病、form
常見行內(nèi)元素：a会通、span、img娄周、input涕侈、button、em煤辨、textarea
可以加樣式 display: block 令行內(nèi)元素占一整行裳涛，變?yōu)閴K級元素。
也可以加樣式 display: inline 令塊級元素像行內(nèi)元素一樣顯示众辨，變?yōu)樾袃?nèi)元素端三。
對于塊級元素，可以設(shè)置 width鹃彻、height郊闯、padding、margin蛛株。
對于行內(nèi)元素团赁，設(shè)置 width、height是無效的谨履。它本身的寬欢摄、高是由它的內(nèi)容決定的。行內(nèi)元素占居的空間屉符，跟設(shè)置的 padding剧浸、margin 沒有任何意義。（特別是上下）
水平的margin矗钟、padding 是有效的唆香。上下 margin、padding 不占居空間吨艇。但是如果加了邊框 border躬它，這樣可以看見上下邊框的范圍，再強(qiáng)調(diào)：即使這樣东涡，在頁面上顯示為冯吓，“不占居空間”倘待。
（雖然行內(nèi)元素沒有寬高，但是有行高 line-height 组贺，這樣可以通過設(shè)置 line-height 來達(dá)到一種假的 "padding" 或者 “margin” 的效果---這是一種假的高度 height凸舵。）
5. display: block、 display: inline失尖、 display: inline-block 分別有什么作用啊奄？
inline-block可以讓元素像行內(nèi)元素一樣排列， 又有塊級元素的特性掀潮，比如height菇夸、width、padding仪吧、margin庄新。（但在IE8以下不能用）
tips: 令塊級元素水平排列，可以用浮動(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è)典型頁面的大致框架，主要框架部分用了 id 選擇器人断】源樱框架里面的細(xì)節(jié)用了 class 選擇器朝蜘。
7. 如何理解 HTML CSS 語義化? 在平時(shí)寫代碼的過程中要注意哪些細(xì)節(jié)恶迈？
- 合理的分層
- 合理的標(biāo)簽
- 合理的命名
平常寫代碼時(shí)需要注意：先把頁面分大區(qū)塊，每一大塊再分成小塊谱醇，再細(xì)化...
html 的語義化：選擇合適的標(biāo)簽暇仲、使用合理的代碼結(jié)構(gòu)，便于開發(fā)者閱讀副渴，同時(shí)讓瀏覽器的爬蟲和機(jī)器更好地解析奈附。
text-align 讓塊級元素內(nèi)部的行內(nèi)元素居中。（留意下煮剧，塊級元素和行內(nèi)元素的盒模型斥滤，這很好理解。）
8. form表單有什么作用勉盅？有哪些常用的input 標(biāo)簽佑颇，分別有什么作用？
form的作用是草娜，把用戶輸入的數(shù)據(jù)提交到后臺挑胸。
(如果 form 不寫 action 的提交頁面，則會(huì)把數(shù)據(jù)提交到當(dāng)前頁面宰闰。)
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ù)的涂籽。例子，給后臺“小明”砸抛，返回“小明的信息”评雌。 給后臺提交一點(diǎn)數(shù)據(jù)，返回大量數(shù)據(jù)直焙。）景东， post 用于提交大量數(shù)據(jù)（例子，寫博客奔誓，寫完文章斤吐，提交給后臺，然后后臺返回“你寫的文章成功提交” 給后臺提交大量數(shù)據(jù)厨喂，后臺返回少量提示和措。）。
- get 最多提交 1k 數(shù)據(jù)蜕煌，這是瀏覽器限制的派阱。（ url 最多一千個(gè)字符） post 則理論上沒有限制。但受服務(wù)器限制斜纪。
- get 提交的數(shù)據(jù)會(huì)在瀏覽器歷史記錄中贫母，安全性不好。所以提交密碼等隱私信息都用 post盒刚。
10. 在input里腺劣，name 有什么作用？
該input的名字伪冰，起到一個(gè)索引的作用誓酒。
input 都要有 name 屬性。
name定義 input 元素的名稱。作為可與服務(wù)器交互數(shù)據(jù)的HTML元素的服務(wù)器端的標(biāo)示靠柑，或者在客戶端通過 JavaScript 引用表單數(shù)據(jù)寨辩。由于后臺傳輸數(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隱藏域有什么作用? 舉例說明
- 暫存數(shù)據(jù)。
- 安全校驗(yàn)释液。
這種類型的輸入元素實(shí)際上是隱藏的全释。這個(gè)不可見的表單元素的 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ù)提交給后臺，可以看見hidden的數(shù)據(jù)也一起提交了找前。
