1.有序列表、無序列表、自定義列表如何使用？寫個簡單的例子。三者在語義上有什么區別？在哪些情況下使用哪種（重要）？ 如何嵌套？
-
<ol>標簽定義有序列表,使用編號來記錄項目的順序,默認每個列表項前面顯示1、2、3...。
屬性：
例子：
<ol type="A" reversed>
<li>薩博</li>
<li>沃爾沃</li>
<li>斯堪尼亞</li>
</ol>
-
<ul>標簽定義無序列表,項目列表默認用圓點,項目順序不分先后。
例子：
<ul>
<li>薩博</li>
<li>沃爾沃</li>
<li>斯堪尼亞</li>
</ul>
-
<dl>標簽定義自定義列表,自定義列表不僅僅是一列項目，也是項目及其注釋的組合。自定義列表始于<dl>標簽，每個列表項始于表頭<dt>,列表項的說明始于表內容<dd>。
<dl>
<dt>我是表頭1</dt>
<dd>薩博</dd>
<dd>沃爾沃</dd>
<dt>我是表頭2</dt>
<dd>斯堪尼亞</dd>
</dl>
-
三者在語義上的區別：
三種列表都可以運用在網頁布局上，相比于全部用div布局，用列表布局由大到小更符合語義化，而且還能夠節省css命名。
有序列表適用于明顯的排列順利，而且次序不能亂，因此經常使用無序列表和自定義列表，因為他們沒有順序可以并列；這兩個列表相比的話，自定義列表更簡單，精準，也更好理解。 - 如何嵌套：
<dl>
<dt>這里是嵌套</dt>
<dd>
<ol>
<li>課程目標
<ul>
<li>熟悉列表的使用場景和用法</li>
<li>理解HTML語義化</li>
<li>理解行內元素、塊級元素概念</li>
<li>熟悉常見input表單的使用方式</li>
<li>掌握 POST 與 GET 方式的區別</li>
</ul>
</li>
<li>預習視頻</li>
<li>課程任務</li>
</ol>
</dd>
</dl>
2.如何去除列表前面的點或者數字？
list-style:none;
3.class 和 id 有什么區別？什么時候用 class 什么時候用 id？
答：區別：1）ID具有唯一性，Class具有普遍性；2）ID的樣式優先級高于Class；3)class可以寫成class="intro other"，可以有多個class名，id名不能這樣寫。
ID是唯一的，所以盡量在結構外圍使用，通常用于頁面布局，Class是可重復的，所以盡量在結構內部使用，通常用于樣式定義。
參考文檔
4.塊級元素、行內元素是什么？有什么區別？分別對應哪些常用標簽？
答：每個元素都有一個默認的 display 值，這與元素的類型有關。一個 block 元素通常被叫做塊級元素。一個 inline 元素通常被叫做行內元素。
- 區別：1）.塊級元素會獨占一行，其寬度自動填滿其父元素寬度,行內元素不會獨占一行，相鄰的行內元素會排列在同一行里，直到一行排不下，才會換行，其寬度隨元素的內容而變化;2).塊級元素可以設置 width, height屬性，行內元素設置width, height無效；3）.塊級元素可以設置margin 和 padding. 行內元素的水平方向的padding-left,padding-right,margin-left,margin-right 都產生邊距效果，但是豎直方向的padding-top,padding-bottom,margin-top,margin-bottom都不會產生邊距效果。
-
對應標簽：
常見塊級元素：<div>,<p>,<h1>···<h6>,<table>,<tr>,<ul>,<li>,<dl>,<dt>,<form>
常見行內元素：<a>,<span>,<img>,<input>,<button>,<em>,<textarea>
5.display: block、display: inline、display: inline-block分別有什么作用?
答：display: block：此元素將顯示為塊級元素，元素前后會帶有換行符
display: inline：此元素將顯示為行內元素，元素前后不會帶有換行符
display: inline-block：將元素設置為行內塊元素，既有行內元素的性質，可以水平排列，又具有塊級元素的性質，可以設置寬高和上下左右的邊距,但缺點是IE8以下不能使用。
6.下面代碼是做什么的？抄寫一遍下面的代碼，注意class和id的使用及命名方式
<!DOCTYPE html>
<html lang="en">
<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="#">導航1</a></li>
<li><a href="#">導航2</a></li>
<li><a href="#">導航3</a></li>
</ul>
</div>
</div>
<div id='content'>
<div class="wrap">
<div class="aside">側邊欄</div>
<div class="main">中心區塊</div>
</div>
</div>
<div id='footer'>
<div class="wrap">這里是 footer</div>
</div>
</body>
</html>
這段代碼構建了頁面header、content、footer三個部分，頁面主體隨著瀏覽器大小自動調整，最小寬度為900px。header部分分為logo和導航1、導航2、導航3；content部分分為側邊欄和中心區塊。
7、如何理解 HTML CSS 語義化? 在平時寫代碼的過程中要注意哪些細節？
答：HTML CSS語義化個人理解是根據內容和需求選擇合適的標簽和合適的css屬性。
結構上有2個作用，第一是使閱讀者（人）對網站更加清晰，很容易將網站分塊，便于閱讀，而且可以減少單獨再寫class，第二是對于機器（搜索引擎，屏幕閱讀器）更加友好，讓機器更加準確的去理解你的網頁。
功能上的是瀏覽器在底層對其中的一些標簽實現了一些比較復雜的功能，比如video,audio，還有一些屬性，這是為了方便開發者，讓更多的開發者來使用我的瀏覽器。
在平時寫代碼過程中要注意選擇合適的標簽，class命名最好根據功能需求來，命名風格要統一等。
參考文檔
8.form表單有什么作用？有哪些常用的input 標簽，分別有什么作用？
答：form表單的作用是用于把用戶輸入的數據提交到后臺。
常見的input標簽：
- type="text",用于輸入文本。placeholder屬性展示的是輸入框里的提示，maxlength，限制最大輸入長度。
- type="password"， 用于輸入密碼,叫做密碼域，輸入的內容顯示為星號。
- type="radio"， 單選按鈕。注意：name要相同，這樣表示它們是一組，才能實現單選，value要有值，否則后臺無法顯示對應的輸入值。
- type="checkbox"，復選框。加checked屬性會默認選上
- type="submit"，用于提交表單數據
- type="textarea"，文本域，用于輸入多行文本。
- type="hidden"，隱藏域，用戶看不到，用于暫存數據或者安全性校驗.
9.post 和 get 方式的區別？
答：1）、數據提交方式不同，GET請求的數據會附在URL之后（就是把數據放置在HTTP協議頭中），以?分割URL和傳輸數據，參數之間以&相連，如：login.action?name=hyddd&password=idontknow&verify=%E4%BD%A0%E5%A5%BD。如果數據是英文字母/數字，原樣發送，如果是空格，轉換為+，如果是中文/其他字符，則直接把字符串用BASE64加密，得出如：%E4%BD%A0%E5%A5%BD，其中％XX中的XX為該符號以16進制表示的ASCII。POST把提交的數據則放置在是HTTP包的包體中。
2）、Get是向服務器發索取數據的一種請求，Get是獲取信息，而不是修改信息，類似數據庫查詢功能一樣，數據不會被修改；而Post是向服務器提交數據的一種請求。
3）、GET方式提交的數據最多只能是1024字節，理論上POST沒有限制，可傳較大量的數據，對POST起限制作用的是服務器的處理程序的處理能力。
4）、POST的安全性要比GET的安全性高，GET請求的數據會被瀏覽器緩存起來，用戶名和密碼將明文出現在URL上，其他人可以查到歷史瀏覽記錄，數據不太安全。在服務器端，用Request.QueryString來獲取Get方式提交來的數據Post請求則作為http消息的實際內容發送給web服務器，數據放置在HTML Header內提交，Post沒有限制提交的數據。
10.在input里，name 有什么作用？
答：
- 作為可與服務器交互數據的HTML元素的服務器端的標示。
- 當name的值相同時表示一組，可以實現單選。復選框中，可以把name值設置成一個數組，這樣在命名的時候比較方便，后臺也會給這些變量選擇對應的輸入數據。
參考文檔
11.<button>提交</button>、<a class="btn" href="#">提交</a>、<input type="submit" value="提交"> 三者有什么區別？
答：
- <button>,在 button 元素內部可以放置內容，<button> 與 </button> 標簽之間的所有內容都是按鈕的內容，其中包括任何可接受的正文內容，比如文本或多媒體內容。例如，我們可以在按鈕中包括一個圖像和相關的文本，用它們在按鈕中創建一個吸引人的標記圖像。<button> 控件 與 <input type="button"> 相比，提供了更為強大的功能和更豐富的內容。注意：Internet Explorer 將提交 <button> 與 <button/> 之間的文本，而其他瀏覽器將提交 value 屬性的內容。
- <input type="submit" /> 這樣的按鈕用戶點擊之后會自動提交 form，除非寫了javascript 阻止它。
- <a class="btn" href="#">提交</a>是超鏈接，鏈接到另一個URL。
12.radio 如何 分組?
答：通過設置name值進行分組，如果name值是一樣的，就是一組，分組后組內的選項是單選的。
愛好：<input type="radio" name="hobby" value="reading"></input>
<input type="radio" name="hobby" value="run"></input>
13.placeholder 屬性有什么作用?
答：placeholder 屬性提供可描述輸入字段預期值的提示信息。是HTML5新屬性，IE8及以下不支持。
14.type=hidden隱藏域有什么作用? 舉例說明
答：
1 隱藏域在頁面中對于用戶是不可見的，在表單中插入隱藏域的目的在于收集或發送信息，以利于被處理表單的程序所使用。瀏覽者單擊發送按鈕發送表單的時候，隱藏域的信息也被一起發送到服務器。
2 有些時候我們要給用戶一信息，讓他在提交表單時提交上來以確定用戶身份，如sessionkey，等等。
3 有些時候一個form里有多個提交按鈕，怎樣使程序能夠分清楚到底用戶是按那一個按鈕提交上來的呢？我們就可以寫一個隱藏域，然后在每一個按鈕處加上onclick="document.form.command.value="xx""然后我們接到數據后先檢查command的值就會知道用戶是按的那個按鈕提交上來的。
4 有時候一個網頁中有多個form，我們知道多個form是不能同時提交的，但有時這些form確實相互作用，我們就可以在form中添加隱藏域來使它們聯系起來。
例子：
<form name="myForm" action="/test/6.php" method="post">
密碼:<input name="pwd" type="password" placeholder="密碼" maxlength="10"/><br/>
<input type="hidden" name="safe" value="123"/><br>
<input type="submit" name="submit" value="提交">
</form>
