1.有序列表洽沟、無序列表以故、自定義列表如何使用？寫個簡單的例子裆操。三者在語義上有什么區(qū)別怒详？在哪些情況下使用哪種（重要）？ 如何嵌套踪区？
無序列表是一個項(xiàng)目的列表昆烁，此列項(xiàng)目使用粗體圓點(diǎn)（典型的小黑圓圈）進(jìn)行標(biāo)記,列表結(jié)構(gòu)中的列表項(xiàng)沒有先后順序的列表形式。大部分網(wǎng)頁應(yīng)用中的列表均采用無序列表缎岗，其列表標(biāo)簽采用
<ul></ul>有序列表就是列表結(jié)構(gòu)中的列表項(xiàng)有先后順序的列表形式静尼，從上到下可以有各種不同的序列編號，如1传泊、2鼠渺、3或 a、b眷细、c 等拦盹。
-
自定義列表不僅僅是一列項(xiàng)目，而是項(xiàng)目及其注釋的組合溪椎。自定義列表以
<dl>標(biāo)簽開始普舆。每個自定義列表項(xiàng)以<dt>開始恬口。每個自定義列表項(xiàng)的定義以<dd>開始。<li>無序1</li> <li>無序2</li> </ul> <ol> <li>有序1</li> <li>有序2</li> </ol> <dl> <dt>自定義1</dt> <dd>這是自定義1的定義</dd> <dt>自定義2</dt> <dd>這是自定義2的定義</dd> </dl>
列表1.png
若我們?nèi)绻胱専o序列表與有序列表的樣式有些改變沼侣，可以在ul與ol中添加 type 來修改相應(yīng)你想要的效果楷兽，例如：
<ul type="circle">
<li>無序1</li>
<li>無序2</li>
</ul>
<ol type="a">
<li>有序1</li>
<li>有序2</li>
</ol>
列表2.png
使用情況：
- 有序列表是使用者在對列表有順序要求時使用
- 無序列表最為常見，列表中各個數(shù)據(jù)關(guān)系并列华临，用于對列表沒有順序要求時使用
- 自定義列表用于對列表有定義內(nèi)容時使用
下面給一個簡單的嵌套：
<ul>
<li>體育</li>
<ul>
<li>足球</li>
<li>籃球</li>
<li>橄欖球</li>
</ul>
<li>樂器</li>
<ul>
<li>吉他</li>
<li>貝司</li>
<li>口琴</li>
</ul>
</ul>
2.如何去除列表前面的點(diǎn)或者數(shù)字芯杀？
要去除列表的默認(rèn)樣式，可以在樣式中清除列表的默認(rèn)樣式雅潭，參考代碼如下：
<style>
ol,ul{
list-style: none;
}
</style>
3.class 和 id 有什么區(qū)別揭厚？什么時候用 class 什么時候用 id？
區(qū)別：
- 在 css 的書寫中扶供，id加前綴“#”筛圆，class 加前綴“.”
- id 在頁面中是獨(dú)一無二的，是作為劃分大區(qū)塊使用的椿浓，有且只有一個名稱太援；class 可以重名，代表同一類型扳碍，是作為劃分小區(qū)塊使用的提岔，可以有多個名稱
- id 是一個標(biāo)簽，用于區(qū)分不同的結(jié)構(gòu)和內(nèi)容笋敞；class 是一個樣式碱蒙，可以套在任何結(jié)構(gòu)和內(nèi)容上
- id 是先找到結(jié)構(gòu)/內(nèi)容，再給它定義樣式夯巷；class 是先定義好一種樣式赛惩，再套給多個結(jié)構(gòu)/內(nèi)容
用法：
- id 使用于主要塊級元素
- class 用于要重復(fù)使用樣式的除 id 其他塊級或行內(nèi)元素
4.塊級元素、行內(nèi)元素是什么趁餐？有什么區(qū)別喷兼？分別對應(yīng)哪些常用標(biāo)簽？
- 塊級元素（block element）：每個塊級元素默認(rèn)占一行高度后雷，一行內(nèi)添加一個塊級元素后無法一般無法添加其他元素（float 浮動后除外）季惯，也就是說占用空間是一整行
- 行內(nèi)元素（inline element ）：也叫內(nèi)聯(lián)元素、內(nèi)嵌元素等喷面，行內(nèi)元素一般都是基于語義級(semantic)的基本元素星瘾，只能容納文本或其他內(nèi)聯(lián)元素走孽，占用空間是自身的內(nèi)容寬度
區(qū)別：
- 行內(nèi)元素會在一條直線上排列惧辈，都是同一行的，水平方向排列磕瓷；塊級元素各占據(jù)一行盒齿，垂直方向排列念逞。塊級元素從新行開始結(jié)束接著一個斷行
- 行內(nèi)元素沒有寬高，不能手動設(shè)置边翁，但又行高（line-height）翎承，左右內(nèi)邊距和外邊距均有效，但上下不占據(jù)空間符匾，若添加邊框叨咖，邊框可見但不占據(jù)空間；塊級元素高度啊胶，行高以及外邊距和內(nèi)邊距都可控制
- 塊級元素可以包含行內(nèi)元素和塊級元素甸各；行內(nèi)元素不能包含塊級元素，只能容納文本或者其他行內(nèi)元素
這里我們給出下面這個代碼來看一下具體的區(qū)別：
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="UTF-8">
<link href="css/style.css" rel="stylesheet">
<style>
a {
border: 1px solid red;
width: 50px;
height: 50px;
padding: 20px;
margin: 20px;
}
p {
margin: 0;
padding: 0;
background: #ccc;
}
</style>
</head>
<body>
<p>p1</p>
<a href="#">a</a>
<a href="#">b</a>
<p>p2</p>
</body>
</html>
我們可以看到作為行內(nèi)元素的 a 上下不占據(jù)空間焰坪，若添加邊框趣倾，邊框可見但不占據(jù)空間,而作為k塊級元素的 p 占了一整行。.png
對應(yīng)常用標(biāo)簽：
- 塊級元素：div, p, h1...h6, table, tr, ul, li, dl, dt, form
- 行內(nèi)元素：a, span, img, input, button, em, textarea
5. display: block某饰、display: inline儒恋、display: inline-block 分別有什么作用?
- display: block 讓對象成為塊級元素，此元素前后會帶有換行符
- display: inline 該元素是默認(rèn)的黔漂。對象會被顯示為行內(nèi)元素诫尽，元素前后沒有換行符。
- inline-block 此特性的元素呈現(xiàn)為內(nèi)聯(lián)對象炬守，四周元素保持在同一行箱锐，但可以設(shè)置寬度和高度地塊元素的屬性。
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>
這段代碼將頁面劃分為多個部分，將頭部观蜗，內(nèi)容與頁尾分別用唯一的 id 進(jìn)行命名臊恋。用 class=warp 對 div 的內(nèi)部結(jié)構(gòu)進(jìn)行了統(tǒng)一樣式，方便管理墓捻，不重復(fù)操作抖仅，設(shè)置為寬度900px，margin 外邊距根據(jù)瀏覽器自動調(diào)整砖第，上下外邊距為0撤卢。
7.如何理解 HTML CSS 語義化? 在平時寫代碼的過程中要注意哪些細(xì)節(jié)
- HTML 標(biāo)簽可以分為有語義的標(biāo)簽，和無語義的標(biāo)簽梧兼。比如
table表示表格放吩，form表示表單，a標(biāo)簽表示超鏈接羽杰，strong標(biāo)簽表強(qiáng)調(diào)渡紫。無語義標(biāo)簽典型的有div等到推。而 CSS 中可以利用 class 與 id 來進(jìn)行命名。HTML 與 css 語義化就是在頁面中盡量多滴結(jié)合場景多使用含有語義的標(biāo)簽惕澎，少使用無語義的標(biāo)簽莉测。 - 在寫代碼過程中，我們得注意命名得有意義唧喉，并且統(tǒng)一風(fēng)格捣卤，命名中包含2個以上單詞用“-”鏈接，用小寫字母來進(jìn)行規(guī)范八孝。
8.form 表單有什么作用腌零？有哪些常用的 input 標(biāo)簽，分別有什么作用唆阿？
<form> 標(biāo)簽用于為用戶輸入創(chuàng)建 HTML 表單益涧，用于把用戶輸入的數(shù)據(jù)提交到后臺。
<strong>常用的input 標(biāo)簽及其作用：
| 標(biāo)簽 | 值 | 定義 |
|---|---|---|
| name | field_name | 定義 input 元素的名稱 |
| action | URL | 定義提交的地址 |
| method | get/post | 規(guī)定如何發(fā)送表單數(shù)據(jù) |
<strong>input 的 type 屬性各類作用：
| 屬性 | 定義 |
|---|---|
| text | 定義單行的輸入字段驯鳖，用戶可在其中輸入文本闲询。默認(rèn)寬度為 20 個字符 |
| submit | 定義提交按鈕。提交按鈕會把表單數(shù)據(jù)發(fā)送到服務(wù)器 |
| radio | 定義單選按鈕 |
| checkbox | 定義復(fù)選框 |
| number | 限制只能輸入數(shù)字 |
| password | 定義密碼字段浅辙。該字段中的字符被掩碼扭弧。 |
<strong>其他表單元素：
| 元素 | 定義 |
|---|---|
| textarea | 創(chuàng)建一個多行文本區(qū)，可以在其中輸入多行文本 |
| select | 在頁面中創(chuàng)建一個菜單空間（與 option 結(jié)合使用可以創(chuàng)建一個菜單） |
| option | 表示各個菜單項(xiàng) |
9. post 和 get 方式的區(qū)別记舆？
瀏覽器使用 method 屬性設(shè)置的方法將表單中的數(shù)據(jù)傳送給服務(wù)器進(jìn)行處理鸽捻。共有兩種方法：POST 方法和 GET 方法。
<strong>post 和 get 方式的區(qū)別：
- 1 數(shù)據(jù)提交方式不同泽腮，GET 方法將表單參數(shù)直接放在應(yīng)用程序的 URL 中御蒲，這樣網(wǎng)絡(luò)窺探者可以很輕松地捕獲它們，還可以從服務(wù)器的日志文件中進(jìn)行摘錄诊赊。POST 沒有安全方面的漏洞厚满，在將參數(shù)作為單獨(dú)的事務(wù)傳輸給服務(wù)器進(jìn)行處理時，至少還可以采用加密的方法碧磅。所以在安全性方面更加提倡用 path 的方式碘箍。
- 2 提交數(shù)據(jù)的數(shù)量不同，post 用于提交大量數(shù)據(jù)鲸郊，而 get 一般用于提交少量數(shù)據(jù)
- 3 服務(wù)器限制丰榴，get 最多提交2K數(shù)據(jù)，瀏覽器會限制秆撮；post 理論上瀏覽器不會限制四濒，只會受服務(wù)器限制。
- 4 get 可收藏為書簽，post 不可收藏為書簽
10.在 input 里峻黍，name 有什么作用？
作為可與服務(wù)器交互數(shù)據(jù)的HTML元素的服務(wù)器端的標(biāo)示拨匆。name是用來連接數(shù)據(jù)庫姆涩，在服務(wù)器端的作用是十分大的。
11. <button>提交</button>惭每、<a class="btn" href="#">提交</a>骨饿、<input type="submit" value="提交"> 三者有什么區(qū)別？
-
<button>提交</button>在 button 元素內(nèi)部台腥，您可以放置內(nèi)容宏赘，比如文本或圖像，而 input 元素則不可以 -
<a class="btn" href="#">提交</a>表示 a 鏈接黎侈，用于從一張頁面鏈接到另一張頁面察署，并不能提交數(shù)據(jù)，而是轉(zhuǎn)到另一個指定頁面 -
<input type="submit" value="提交">為表單提供提交數(shù)據(jù)按鈕峻汉，提交表單的數(shù)據(jù)贴汪，但是不能提交其他內(nèi)容
12. radio 如何 分組?
<form name="one" method="POST">
<div>
體育愛好：<input type="radio" name="sports" value="足球">足球
<input type="radio" name="sports" value="籃球">籃球
<input type="radio" name="sports" value="羽毛球">羽毛球
<input type="radio" name="sports" value="橄欖球">橄欖球
</div>
<div>
食物愛好： <input type="radio" name="food" value="漢堡">漢堡
<input type="radio" name="food" value="薯?xiàng)l">薯?xiàng)l
<input type="radio" name="food" value="雞腿">雞腿
<input type="radio" name="food" value="米飯">米飯
</div>
<input type="hidden" name="url_delete" value="777777">
<input type="submit" value="提交">
</form>
<strong>radio 分組只要在 name 中輸入同一個名稱即可分為一組，效果如下：
radio分組.png
13.placeholder 屬性有什么作用?
placeholder 屬性提供可描述輸入字段預(yù)期值的提示信息（hint）休吠。
該提示會在輸入字段為空時顯示扳埂，并會在字段獲得焦點(diǎn)時消失。
14.type=hidden 隱藏域有什么作用? 舉例說明
<form name="text" method="post">
<div>姓名:<input name="usename" type="text" placeholder="用戶名" maxlength="10" /></div>
<div>密碼:<input type="password" name="password" placeholder="密碼" maxlength="16" /></div>
<input type="hidden" name="url_delete" value="777777">
<input type="submit" value="提交">
</form>
hidden.png
- type=hidden 定義隱藏的輸入字段,在表單中插入隱藏域的目的在于收集或發(fā)送信息瘤礁，以利于被處理表單的程序所使用阳懂。瀏覽者單擊發(fā)送按鈕發(fā)送表單的時候，隱藏域的信息也被一起發(fā)送到服務(wù)器柜思。
- 用以確定用戶身份
- 便于查找用戶提交按鈕
- form是不能同時提交岩调，添加隱藏域可使相關(guān)聯(lián)表單聯(lián)系起來
- javascript不支持全局變量，可添加隱藏域保留值
<strong>本教程版權(quán)歸本人和饑人谷所有赡盘，轉(zhuǎn)載須說明來源
