一邀摆、有序列表纵顾、無序列表、自定義列表如何使用栋盹？寫個簡單的例子片挂。三者在語義上有什么區(qū)別？在哪些情況下使用哪種（重要）贞盯？ 如何嵌套？
- 有序列表 ol（ordered list）
有序列表沪饺，字面上講躏敢，就是有順序的列表。有序列表使用編號來記錄項目的順序整葡，默認(rèn)情況下在每項前面顯示1,2,3…件余，它適用于要求有順序排列的項目，有序列表使用<ol>標(biāo)簽遭居，每個列表項使用<li>標(biāo)簽啼器。
<ol>
<li>起床</li>
<li>穿衣</li>
<li>洗臉洗口</li>
</ol>
另外在html5中
<ol>標(biāo)簽添加了四個新的屬性:
Paste_Image.png
<ol type="A">
<li>我的列表</li>
<li>我的列表</li>
<li>我的列表</li>
</ol>
<ol reversed="3">
<li>我的列表</li>
<li>我的列表</li>
<li>我的列表</li>
</ol>
<ol type="1" start="5" >
<li>我的列表</li>
<li>我的列表</li>
<li>我的列表</li>
</ol>
- 無序列表 ul（unordered list）
無序列表就是沒有順序的列表，項目列表默認(rèn)用圓點俱萍，適用于并列不分前后順序的項目端壳。無序列表用<ul>標(biāo)簽，每個列表項目使用<li>標(biāo)簽
<ul>
<li>香蕉</li>
<li>蘋果</li>
<li>桃子</li>
</ul>
另外它有兩個屬性枪蘑，一般在css中使用
<ul type="cirle">
<li>我的無序列表</li>
<li>我的無序列表</li>
<li>我的無序列表</li><
</ul>
- 自定義列表 dl（definition list）
根據(jù)定義解釋：自定義列表不僅僅是一列項目损谦，也是項目及其注釋的組合。自定義列表始于<dl>標(biāo)簽岳颇，每個列表項始于表頭<dt>照捡，列表項的說明始于表內(nèi)容<dd>。
個人理解：使用<dt>寫出項目名稱话侧，<dd>描述項目名稱栗精，一個項目可以有多個項目名，多個描述瞻鹏。
<dl>
<dt>表頭</dt>
<dd>內(nèi)容</dd>
<dt>顏色</dt>
<dd>紅綠藍(lán)等</dd>
</dl>
- 三者語義上的區(qū)別及適用場景
在用div布局整個頁面時悲立，而用這三種列表可以運用在一些網(wǎng)頁的局部鹿寨，因為他們是語義化表簽，所以更容易理解级历，而且能夠嵌套释移，這跟div布局相同，都是由大到小寥殖，而且能夠節(jié)省css中的命名玩讳。
有序列表適用于明顯的排列順利，而且次序不能亂嚼贡，因此經(jīng)常使用無序列表和自定義列表熏纯，因為他們沒有順序可以并列；這兩個列表相比的話粤策，自定義列表更簡單樟澜，精準(zhǔn)，也更好理解叮盘。
- 如何嵌套
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
</head>
<body>
<p>這里是嵌套</p>
<ul>
<li>課程目標(biāo)
<ul>
<li>熟悉列表的使用場景和用法</li>
<li>理解HTML語義化</li>
</ul>
</li>
<li>學(xué)習(xí)建議
<ul>
<li>語義化秩贰、行內(nèi)元素塊級元素、POST 和 GET 的區(qū)別這是面試必問的知識點</li>
</ul>
</li>
<li>預(yù)習(xí)視頻
<ul>
<li>課程視頻-HTML-列表|塊級元素|行內(nèi)元素</li>
<li>課程視頻-HTML-Form表單</li>
</ul>
</li>
<li>課程任務(wù)
<dl>
<dt>問答</dt>
<dd>
<ul>
<li>有序列表柔吼、無序列表毒费、自定義列表如何使用</li>
<li>如何去除列表前面的點或者數(shù)字？</li>
</ul>
</dd>
</dl>
</li>
</ul>
</body>
</html>
二愈魏、如何去除列表前面的點或者數(shù)字觅玻？
使用list-style：none；
Paste_Image.png
三培漏、class 和 id 有什么區(qū)別溪厘？什么時候用 class 什么時候用 id？
- 區(qū)別:
1.id是identity的縮寫,是身份標(biāo)識號碼的意思,是一個編碼牌柄，它是唯一的畸悬，在頁面上只能使用一次。class就是類的意思珊佣，表示一類型的樣式傻昙，具有普遍性，可以重復(fù)使用彩扔。
2.從概念上說id是先找到結(jié)構(gòu)或者內(nèi)容妆档，再給它定義樣式；class是先定義好一種樣式虫碉，再套給多個結(jié)構(gòu)或者內(nèi)容贾惦。
3.class和id都是選擇器，它們之間有權(quán)重的區(qū)別，當(dāng)同一個標(biāo)簽同時有class和id屬性须板，但在寫CSS樣式時碰镜，id優(yōu)先級高于class
4.class可以寫成class="intro other"，可以有多個class名习瑰，id名不能這樣寫- 什么時候用 class 什么時候用 id
因為id具有唯一性绪颖，所以通常在結(jié)構(gòu)外圍使用，通常用于頁面布局甜奄。id多用于Javascript操作DOM柠横；class可以重復(fù)，一般在結(jié)構(gòu)內(nèi)部使用课兄，用于樣式定義牍氛；class可以通過給多個元素賦予同一class，批量操作來設(shè)置css烟阐。
四搬俊、塊級元素、行內(nèi)元素是什么蜒茄？有什么區(qū)別唉擂？分別對應(yīng)哪些常用標(biāo)簽？
Paste_Image.png
說明：1檀葛、塊級元素是其他元素的容器元素楔敌，可以容納其他塊元素或者行內(nèi)元素;行內(nèi)元素只能夠容納文本內(nèi)容或者其他的行內(nèi)元素。
2驻谆、對于行內(nèi)元素即彪，手動設(shè)置寬高是無效的岳链，它本身的高度是由自身決定的腺办。利用審查元素谭贪，當(dāng)你鼠標(biāo)放置在塊級元素上面時锡搜，選中的是元素所在的一整行迈嘹；而放置在行內(nèi)元素時蚕礼，只選中了元素所在內(nèi)容的那一部分叶圃。
Paste_Image.png
塊級元素常用標(biāo)簽:div宴抚、p勒魔、h1-h6、table菇曲、tr冠绢、ol、ul常潮、li弟胀、dl、dt、form
行內(nèi)元素常用標(biāo)簽:a孵户、span萧朝、img、input夏哭、button检柬、em、textarea
五竖配、 display: block何址、display: inline、display: inline-block 分別有什么作用?
display: block將元素設(shè)置為塊級元素
display: inline將元素設(shè)置為行內(nèi)元素
display: inline-block將元素設(shè)置為行內(nèi)塊元素械念，既有行內(nèi)元素的性質(zhì)头朱，可以水平排列，又具有塊級元素的性質(zhì)龄减，可以設(shè)置寬高和上下左右的邊距,项钮，但缺點是IE8以下不能使用。也可以通過浮動來實現(xiàn)相同的效果希停。
display: none烁巫；隱藏，脫離文檔流宠能。
六亚隙、下面代碼是做什么的？抄寫一遍下面的代碼违崇，注意class和id的使用及命名方式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<style type="text/css">
.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>
上面的代碼把頁面分成了三部分：頭部阿弃，內(nèi)容，底部羞延。然后三部分的內(nèi)部又分別分成幾個小部分渣淳，幾個小部分用同樣的類名wrap進(jìn)行包裹，設(shè)置相同的寬和內(nèi)容水平居中的樣式伴箩。因為id是唯一的入愧，它是區(qū)分結(jié)構(gòu)和內(nèi)容的，所有三部分使用id嗤谚，里面的a標(biāo)簽是圖片鏈接棺蛛，是獨一無二的，所以也使用了id巩步，然后三大部分內(nèi)部使用class劃分小區(qū)塊旁赊。這里命名要注意語義化，命名風(fēng)格要保持統(tǒng)一椅野，如nav就是導(dǎo)航的縮寫彤恶，aside就是側(cè)邊的意思钞钙。
七、如何理解 HTML CSS 語義化? 在平時寫代碼的過程中要注意哪些細(xì)節(jié)声离？
- HTML 標(biāo)簽可以分為有語義的標(biāo)簽芒炼，和無語義的標(biāo)簽。比如
table表示表格术徊，form表示表單本刽。無語義標(biāo)簽典型的有div等。
所以語義化就是要根據(jù)情況選擇正確的標(biāo)簽赠涮，恰當(dāng)?shù)睦煤脴?biāo)簽的作用子寓。- 命名要有一定的含義，讓人一看到就能知道是什么笋除，這樣便于維護和閱讀斜友。
- 命名風(fēng)格要保持統(tǒng)一，比如命名中包含2個以上單詞用“-”鏈接垃它。
八鲜屏、form表單有什么作用？有哪些常用的input 標(biāo)簽国拇，分別有什么作用洛史？
- form表單是用來把用戶輸入的數(shù)據(jù)提交到后臺
Paste_Image.png
提示：name:表單提交時的名稱；action提交到的地址酱吝，如果不寫action也殖，信息就會提交到當(dāng)前頁面；method提交方式（get和post）务热，如果不寫忆嗜，默認(rèn)的是get。
<form name="myform" action="#" method="post"></form>
- 常用的input 標(biāo)簽
①type="text",用于輸入文本崎岂。placeholder屬性展示的是輸入框里的提示捆毫，maxlength，限制最大輸入長度该镣。
<input name="myname" type="text" placeholder="ffff" maxlenght="20" disabled/>
②type="password"， 用于輸入密碼,叫做密碼域响谓，輸入的內(nèi)容顯示為星號损合。
<input name="pwd" type="password" placeholder="密碼"/>
③type="radio"， 單選圓圈按鈕娘纷。注意：name要相同嫁审，這樣表示它們是一組，才能實現(xiàn)單選赖晶，value要有值律适，否則后臺無法顯示對應(yīng)的輸入值辐烂。
<input type="radio" name="sex" value="male"/>男
<input type="radio" name="sex" value="female"/>女
④type="checkbox"，復(fù)選框捂贿。加checked屬性會默認(rèn)選上纠修。提交時，如果選中（如bike）厂僧，那么bike=on扣草。
<input type="checkbox" name="bike" checked/>自行車
<input type="checkbox" name="car"/>小車
⑤type="submit"，用于提交表單數(shù)據(jù)颜屠。
<input name="submit" type="submit" value="提交到"/>
⑥type="textarea"辰妙，文本域，用于輸入多行文本甫窟。
<textarea name="comment" maxlength="200" placeholder="ddd"/></textarea>
⑦下拉列表框
<select name="fruit">
<option value="apple"/>蘋果</option>
<option value="orange"/>橙子</option>
<option value="banana"/>香蕉</option>
/select>
⑧type="hidden"密浑，隱藏域，用戶看不到粗井，用于暫存數(shù)據(jù)或者安全性校驗.
<input type="hidden" name="url_delete" value="/delete.php" />
<input type="hidden" name="csrf_token" value="123" />
⑨t(yī)ype="file",用于上傳文件尔破。
<input name="upfile" type="value"/>
九、post 和 get 方式的區(qū)別背传？
十呆瞻、在input里，name 有什么作用径玖？
- 作用是對提交到后臺的數(shù)據(jù)進(jìn)行標(biāo)識痴脾，或在客戶端通過javascript引用表單數(shù)值。
只有設(shè)置了 name 才能在提交表單時傳遞value值梳星，所以input必須設(shè)置name屬性赞赖。- 當(dāng)name的值相同時表示一組，可以實現(xiàn)單選冤灾。復(fù)選框中前域，可以把name值設(shè)置成一個數(shù)組，比如：
<input type="checkbox" name="love[]" value="bike" checked/>自行車
<input type="checkbox" name="love[]" value="car" />小車
這樣在命名的時候比較方便韵吨，后臺也會給這些變量選擇對應(yīng)的輸入數(shù)據(jù)匿垄。
十一、<button>提交</button>归粉、<a class="btn" href="#">提交</a>椿疗、<input type="submit" value="提交"> 三者有什么區(qū)別？
- <button>提交</button>
是普通按鈕糠悼，需要綁定JS事件届榄，button里面可以加一些比如文字、圖像等內(nèi)容倔喂。- <a class="btn" href="#">提交</a>
是一個文本鏈接铝条，點擊提交會跳轉(zhuǎn)到另一個頁面靖苇，但是不會向后臺提交數(shù)據(jù)- <input type="submit" value="提交">
可以提交一個表單數(shù)據(jù)
參考：w3cschool
十二、radio如何分組班缰？
使用設(shè)置name值進(jìn)行分組贤壁，如果name值是一樣的，就是一組鲁捏，分組后組內(nèi)的選項是單選的芯砸。
教科書：<input type="radio" name="book" value="math"/>數(shù)學(xué)
<input type="radio" name="book" value="English" />英語
十三、placeholder 屬性有什么作用给梅？
作用是在輸入框中提示用戶應(yīng)該輸入的內(nèi)容假丧。
十四、type=hidden隱藏域有什么作用? 舉例說明动羽。
隱藏域包帚，用戶看不到，用于暫存數(shù)據(jù)及后臺進(jìn)行安全性校驗
<form name="myForm" action="/test/6.php" method="post">
密碼:<input name="pwd" type="password" placeholder="密碼" maxlength="10"/><br/>
<input type="hidden" name="check" value="123"/><br>
<input type="submit" name="submit" value="提交">
</form>
提示：只有當(dāng)服務(wù)器接收到的hidden和預(yù)存的信息一致時运吓，才能成功提交表單數(shù)據(jù)渴邦，與生俱來的安全性
十三、iframe
- iframe 元素會創(chuàng)建包含另外一個文檔的內(nèi)聯(lián)框架（行內(nèi)框架）拘哨，即在頁面中嵌入另外一個頁面谋梭，形成一個畫中畫的效果。
- iframe 可用作鏈接的目標(biāo)（target）,鏈接的 target 屬性必須引用 iframe 的 name 屬性倦青。
<style type="text/css">
iframe{
width:100%;
height:500px;
}
</style>
</head>
<body>
<iframe src="" name="mypage" frameborder="1"></iframe>
<p><a target="mypage">饑人谷</a></p>
<p><a target="mypage">淘寶</a></p>
</body>
參考：
w3cschool
iframe
