一、有序列表戈二、無序列表舒裤、自定義列表如何使用？寫個簡單的例子觉吭。三者在語義上有什么區(qū)別腾供？在哪些情況下使用哪種（重要）？ 如何嵌套鲜滩？
1台腥、簡單例子如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
div.div1
{
background-color:#bbb;
color: red;
}
div.div2{
background-color:#ccc;
color: green;
}
div.div3{
background-color:#ddd;
color: blue;
}
</style>
</head>
<body>
<div class="div1">
<ol>
<li> 打開冰箱門</li>
<li> 把大象放入冰箱</li>
<li> 關(guān)閉冰箱門</li>
</ol>
</div>
<div class="div2">
<ul>
<li>蘋果</li>
<li>香蕉</li>
<li>梨子</li>
</ul>
</div>
<div class="div3">
<dl>
<dt> 國內(nèi)殺毒軟件</dt>
<dd>360殺毒</dd>
<dd>金山毒霸</dd>
<dt> 國外殺毒軟件</dt>
<dd>卡巴斯基</dd>
<dd>比特梵德</dd>
</dl>
</div>
</body>
</html>
運行結(jié)果如下：http://js.XXX.com/japujakeru/1/edit?html,output
2、語義區(qū)別及使用情況如下：有序列表表示列表項間有先后順序绒北；無效列表則表示各項間無先后順序黎侈，其可隨意調(diào)換位置（以后使用最多）；自定義列表則表示 dt（列頭）對dd（列表內(nèi)容）概括或具有父子屬性關(guān)系等闷游；
3峻汉、嵌套時應(yīng)從大類寫起，大類寫完后再逐步補充子項目脐往；自己寫了個嵌套示范代碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
</style>
</head>
<body>
<ul>
<li>
<h1>新上線</h1>
<dl>
<a > <dt>百度商橋</dt> </a>
<dd>在線溝通助力精準營銷</dd>
<a ><dt>百度H5</dt> </a>
<dd>可視化 H5 頁面制作工具</dd>
<a > <dt>度秘</dt> </a>
<dd>每個人貼心的秘書</dd>
</dl>
</li>
</ul>
<ul>
<li>
<h1>搜索服務(wù)</h1>
<dl>
<a > <dt>百度軟件中心</dt> </a>
<dd>PC軟件資源下載</dd>
<a ><dt>網(wǎng)頁</dt> </a>
<dd>搜索海量網(wǎng)絡(luò)資料休吠、資源</dd>
<a ><dt>視頻</dt> </a>
<dd>搜索海量網(wǎng)絡(luò)視頻</dd>
</dl>
</li>
</ul>
<ul>
<li>
<h1>導航服務(wù)</h1>
<dl>
<a ><dt>hao123</dt> </a>
<dd>網(wǎng)址導航</dd>
<a ><dt>網(wǎng)站導航</dt> </a>
<dd>百度網(wǎng)址大全</dd>
<a ><dt>百度口碑</dt> </a>
<dd>傳播最真實的評論</dd>
</dl>
</li>
</ul>
</body>
</html>
運行結(jié)果：http://js.XXX.com/japujakeru/1/edit?html,output
二、如何去除列表前面的點或者數(shù)字业簿？
在style中加入list-style: none即可瘤礁；
代碼實例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
ol.no
{
list-style: none;
}
</style>
</head>
<body>
<ol class="have">
<li> 有數(shù)字 </li>
<li> 有數(shù)字 </li>
<li> 有數(shù)字 </li>
<li> 有數(shù)字 </li>
</ol>
<ol class="no">
<li> 無數(shù)字 </li>
<li> 無數(shù)字 </li>
<li> 無數(shù)字 </li>
<li> 無數(shù)字 </li>
</ol>
</body>
</html>
運行效果：http://js.XX.com/petaqotifi/1/edit?html,output
三、class 和 id 有什么區(qū)別梅尤？什么時候用 class 什么時候用 id柜思？
區(qū)別：
1岩调、一個id選擇器在一個HTML中只能出現(xiàn)一次，不能重復使用赡盘，class 可被多次使用号枕；
2、id選擇器可被javascript中的GetElementByID函數(shù)所調(diào)用陨享，而 class不支持javascript 葱淳；
3、ID樣式優(yōu)先級高于class抛姑；
一般情況下優(yōu)先使用class（因其可被使用多次）赞厕，但遇到j(luò)avascript時一般采用id；
四定硝、塊級元素皿桑、行內(nèi)元素是什么？有什么區(qū)別喷斋？分別對應(yīng)哪些常用標簽唁毒？
塊級元素(block element)又名塊元素蒜茴，和其對應(yīng)的是行內(nèi)元素(inline element又稱內(nèi)聯(lián)元素)星爪，都是html規(guī)范中的概念。大多數(shù)HTML 元素被定義為塊級元素或行內(nèi)元素粉私。塊級元素在瀏覽器顯示時顽腾，通常會以新行來開始（和結(jié)束）。而行內(nèi)元素只占據(jù)它對應(yīng)標簽的邊框所包含的空間诺核，且可一并排顯示抄肖；塊級元素需占用一行，其為垂直顯示窖杀；
行內(nèi)元素常見標簽：a漓摩、img、input入客、button管毙、textarea （其他具體可參見https://developer.mozilla.org/zh-CN/docs/Web/HTML/Inline_elemente）
塊級元素常見標簽：p、h1...h6桌硫、div夭咬、table、ul铆隘、li卓舵、dl、dt膀钠、form（其他具體可參見 https://developer.mozilla.org/zh-CN/docs/Web/HTML/Block-level_elements）
五掏湾、display: block裹虫、display: inline、display: inline-block分別有什么作用?
display:block： 此元素將顯示為塊級元素忘巧，此元素前后會帶有換行符恒界；
display:inline ：此元素將顯示為行內(nèi)（內(nèi)聯(lián)）元素，此元素前后不帶換行符砚嘴；
display:inline-block ： 此元素對象將顯示為行內(nèi)元素特性十酣，其對象內(nèi)容具有塊級元素特性；（其為CSS2.1 新增的值际长，IE（低版本IE）本來是不支持inline-block的耸采，所以在IE中對內(nèi)聯(lián)元素使用display:inline-block，理論上IE是不識別的工育，但使用display:inline-block在IE下會觸發(fā)layout虾宇，從而使內(nèi)聯(lián)元素擁有了display:inline-block屬性的表象）
以下自己編寫的代碼可作為佐證：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
a.abiaoqian
{
display: block;
}
a.inlineblock
{
display: inline-block;
margin-top: 30px;
}
p
{
display: inline;
}
</style>
</head>
<body>
<a class="abiaoqian" > a標簽產(chǎn)生換行現(xiàn)象 </a>
<a class="abiaoqian" > /啊a標簽產(chǎn)生換行現(xiàn)象了 </a>
<p> p標簽不產(chǎn)生換行行為</p>
<p> /啊p標簽不產(chǎn)生換行行為了</p>
<a class="inlineblock" > 將該元素對象視作行內(nèi)元素看待，但元素對象內(nèi)容具有塊級元素的特性 </a>
<a class="inlineblock" > 試試是否在一行 </a>
</body>
</html>
運行結(jié)果http://js.XX.com/biroyovara/1/edit
六如绸、下面代碼是做什么的嘱朽？抄寫一遍下面的代碼，注意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 di="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"> 側(cè)邊欄 </div>
<div class="main"> 中心區(qū)塊 </div>
</div>
</div>
<div id="footer">
<div class="wrap"> 這里是footer </div>
</div>
</body>
</html>
以上代碼將頁面總體分為三個部分：頭部怔接、內(nèi)容部搪泳、底部。這三個部分采用不同的id獨立命名扼脐，而其內(nèi)部則采用class的方式命名岸军，以便統(tǒng)一管理樣式。
** 七瓦侮、如何理解 HTML CSS 語義化? 在平時寫代碼的過程中要注意哪些細節(jié)**
個人理解為編寫代碼時應(yīng)規(guī)范嚴謹艰赞，使用合適的標簽及恰當?shù)拿麖亩沟盟阉饕妗g覽器及維護代碼等相關(guān)人員均能夠很好的理解代碼中的相應(yīng)的含義肚吏，有時即使樣式丟失或去掉樣式方妖，也能夠以一種文檔格式顯示網(wǎng)頁內(nèi)容；
平時寫代碼時罚攀，比如圖片記得使用alt標簽党觅，命名class或id時采用相關(guān)且恰當?shù)淖帜富騿卧~以便于識別等等；跟語義化不相關(guān)的網(wǎng)頁設(shè)計應(yīng)注意的細節(jié)可見https://www.zhihu.com/question/25535246/answer/31037613
** 八坞生、form表單有什么作用仔役？有哪些常用的input 標簽，分別有什么作用是己？**
其作用為將用戶輸入表單的信息提交至后臺又兵；
常見的input標簽有如下示例：
<input name="username" type="text" placeholder="用戶名" > 文本輸入用
<input name="password" type="password" placeholder="密碼" maxlength=20 > 密碼輸入用
<input name="like" type="checkbox" checked > 復選用
<input name="sex" type="radio" value=“male” checked > 單選用
<input name="url_delete" type="hidden" value=“http://qq.com”>暫存數(shù)據(jù)或做安全校驗用
<input name="upfile" type="file" >上傳文件用
<input name="submit" type="submit" value=“提交” >提交表單數(shù)據(jù)用
<input name="submit" type="submit" value=“提交” >提交表單數(shù)據(jù)用
<input name="chongzhi" type="reset" value="重置"> 重置之前所填的表單數(shù)據(jù)
<input name="image" type="image" src="http://upload.jianshu.io/users/upload_avatars/2166980/72fe41a69002.jpg?imageMogr/thumbnail/90x90/quality/100" alt="submit"> 自定義圖片形式的提交按鈕
注：使用<input type="image"/>時，一定要和src屬性及alt屬性結(jié)合使用。
** 九沛厨、post 和 get 方式的區(qū)別宙地？**
1、post傳遞數(shù)據(jù)時不會在url體現(xiàn)出來逆皮，而get則會體現(xiàn)宅粥，因此使用get時不應(yīng)該使傳遞敏感的數(shù)據(jù)比如密碼等；
2电谣、post傳遞的數(shù)據(jù)大小根據(jù)服務(wù)器而定秽梅，但get最多只能夠傳輸1k數(shù)據(jù)；
3剿牺、post對數(shù)據(jù)類型無限制企垦，包括二進制；get只允許 ASCII 字符晒来；
4钞诡、post不能夠被緩存，get能夠被緩存湃崩；
5荧降、post在網(wǎng)頁后退或刷新時會重新提交數(shù)據(jù)而get無影響；
6攒读、post編碼類型可為application/x-www-form-urlencoded 或 multipart/form-data朵诫。為二進制數(shù)據(jù)使用多重編碼。而get編碼類型只有application/x-www-form-urlencoded整陌；
其他可見：http://www.w3school.com.cn/tags/html_ref_httpmethods.asp
** 十拗窃、在input里瞎领，name 有什么作用泌辫？**
作用是對提交到后臺的數(shù)據(jù)進行標識，或在客戶端通過javascript引用表單數(shù)值九默。
十一震放、<button>提交</button>、<a class="btn" href="#">提交</a>驼修、<input type="submit" value="提交"> 三者有什么區(qū)別殿遂？
- <button>提交</button> 其只提交“提交”（就IE瀏覽器而言，其他瀏覽器則提交value值）乙各；【button間除了可放置文本以外還可放置多媒體內(nèi)容墨礁，但其唯一禁止使用的元素是圖像映射】
- <a class="btn" href="#">提交</a> 只是一個鏈接，點擊后其只是刷新而已耳峦，其不會傳遞數(shù)據(jù)恩静；
- <input type="submit" value="提交"> 其會將表單內(nèi)容傳遞至后臺
其實還有<input type="button" name=“submit” value=“提交”> 其雖然也可生成“提交”按鈕，但點擊后無反應(yīng)（不提交數(shù)據(jù)），需綁定js驶乾；
** 十二邑飒、radio 如何 分組？**
當其屬性相同時應(yīng)分為一組（使用同一個name即可）级乐，比如 蘋果疙咸、梨子、香蕉可分為一組风科；
** 十三撒轮、placeholder 屬性有什么作用?**
可提示用戶輸入相應(yīng)數(shù)據(jù)，但當其獲得焦點時則會消失贼穆；
十四腔召、type=hidden隱藏域有什么作用? 舉例說明。
其作用為暫存數(shù)據(jù)或用于安全校驗使用扮惦；比如：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<form>
hidden有什么作用臀蛛？<input name="zuoyong" type="text" placeholder="hidden有什么作用？" >
<input name="yingcang" type="hidden" value="安全校驗/hidden.php">
<input name="tijiao" type=submit value="提交">
</form>
</body>
</html>
代碼運行結(jié)果可見：http://js.XX.com/gikarezamo/1/edit
以上代碼運行使用chrome開發(fā)者工具可以看到向后臺傳遞了“安全校驗/hidden.php”這組信息崖蜜。
十五浊仆、代碼題
寫出如下form表單，性別和取向是單選豫领，愛好是多選
代碼詳見如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
form{
line-height: 40px;
}
textarea
{
width: 300px;
height:300px;
}
</style>
</head>
<body>
<form name="myForm" method="post" action="http://eeeke.com/houtai.php">
姓名：<input name="username" type="text" placeholder="用戶名" maxlength=8 > <br/>
密碼：<input name="password" type="password" maxlength=8 > <br/>
性別: <input name="sex" value="male" type="radio" checked > 男
<input name="sex" value="female" type="radio" > 女 <br/>
取向: <input name="quxiao" value="male" type="radio" > 男
<input name="quxiao" value="female" type="radio" checked > 女 <br/>
愛好：<input name="like" value="dota" type="checkbox" > dota
<input name="like" value="lvyou" type="checkbox" checked> 旅游
<input name="like" value="chongwu" type="checkbox" checked> 寵物 <br/>
評論：<textarea name="pinglun" maxlength=20 placeholder="ddd"></textarea> <br/>
我的car：<select name="car">
<option value="sabo" selected>薩博 </option>
<option value="aodi" >奧迪 </option>
<option value="baoma" >寶馬 </option>
<option value="benchi" >奔馳 </option>
</select>
<input name="submitname" type="submit" value="提交" > <br/>
</form>
</body>
</html>
**本文版權(quán)歸本人即簡書筆名：該賬戶已被查封 所有抡柿，如需轉(zhuǎn)載請注明出處。謝謝等恐！ *
