1.有序列表、無序列表、自定義列表如何使用？寫個簡單的例子。三者在語義上有什么區(qū)別？在哪些情況下使用哪種（重要）？ 如何嵌套？
有序列表使用編號來記錄項目的順序，在當(dāng)列表項目的每個列表項目前面需要一個遞增值的時候使用，默認用1.、2.、3.。
無序列表使用項目符號來記錄無序的項目，默認用圓點。
自定義列表由兩個部分組成：定義條件和定義描述。<dt>描述項目名稱，<dd>描述項目名，一個項目可以有多個項目名，多個描述。
它們都按照由上到下順序執(zhí)行。
無序列表和有序列表都可以通過設(shè)置list-style-type，表現(xiàn)為對方的樣式。但這樣是不推薦的，這違反了html標(biāo)簽的語義化。語義化是標(biāo)簽被創(chuàng)造時具有的作用，像<h1>用于一級標(biāo)題，<p>用于段落，它們都有默認的樣式，是為了某種用途存在的，可以直接應(yīng)用時，沒必要設(shè)置多余的CSS樣式，增加編碼負擔(dān)。
無序列表主要應(yīng)用于導(dǎo)航條、下拉菜單、照片顯示等不需要數(shù)字編號的，有序列表主要用于博客評論等，需要樓層的編號。自定義列表主要用于商品列表等，有名稱，有描述。
在html5中<ol>標(biāo)簽多了兩個屬性start和reseved。start屬性支持從一個數(shù)字開始計算列表數(shù)。'reseved'支持倒序。
<ul>,<ol>,<li>,<dl>,<dt>,<dd>都是塊級元素標(biāo)簽。這三個列表可以相互嵌套。嵌套列表很容易。決定在哪里嵌套后，先不要閉合這個列表標(biāo)簽，插入需要嵌套的列表之后再閉合列表元素，然后繼續(xù)原來的列表。
舉個例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>列表嵌套</title>
<style>
body {
background-color: #ddd;
}
</style>
</head>
<body>
<ul>
<li>
無序列表
<ul>
<li>無序列表1</li>
<li>無序列表2</li>
</ul>
</li>
<li>有序列表
<ol>
<li>有序列表1</li>
<li>有序列表2</li>
<li>有序列表3</li>
</ol>
</li>
<li>無序
</li>
<li>
自定義列表
<dl>
<dt>自定義</dt>
<dt>列表</dt>
<dd>列表1</dd>
<dd>列表2</dd>
</dl>
</li>
</ul>
</body>
</html>
效果圖：
2.如何去除列表前面的點或者數(shù)字？
設(shè)置list-style-type: none;
舉個例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>去除標(biāo)號</title>
<style>
body {
background-color: #ddd;
}
ol,ul {
list-style-type: none;
}
</style>
</head>
<body>
<ul>
<li>無序列表1</li>
<li>無序列表2</li>
<li>無序列表3</li>
</ul>
<ol>
<li>有序列表1</li>
<li>有序列表2</li>
<li>有序列表3</li>
</ol>
</body>
</html>
效果：
3.class 和 id 有什么區(qū)別？什么時候用 class 什么時候用 id？
class和id的區(qū)別：
1.定義不同。class 屬性規(guī)定元素的類名（classname）。id 屬性規(guī)定 HTML 元素的唯一的 id，一般用于重要的獨一無二的標(biāo)簽。
2.同一class名在一篇HTML文檔中可以出現(xiàn)多次，id名只能出現(xiàn)一次，是唯一的。
3.class可以寫成class="intro other"，可以有多個class名，id名不能這樣寫。
4.同一個標(biāo)簽可以同時有class和id屬性，但在寫CSS樣式時，兩者權(quán)重不同。
一般在頁面布局時，id用于主區(qū)塊，class用于主區(qū)塊里的詳細內(nèi)容，對于有些重要的獨一無二的元素也可以用id。
4.塊級元素、行內(nèi)元素是什么？有什么區(qū)別？分別對應(yīng)哪些常用標(biāo)簽？
“塊級元素”譯為 block level element，塊級元素在瀏覽器顯示時，通常會以新行來開始（和結(jié)束）。“行內(nèi)元素”譯為 inline element。行內(nèi)元素在顯示時通常不會以新行開始。
塊級元素占用一整行，行內(nèi)元素的寬高是它自身內(nèi)容的寬高。行內(nèi)元素設(shè)置左右margin、padding時有效，上下時加邊框可以看到效果，但是對其上下元素的位置沒有影響。
塊級元素一般可以包含行內(nèi)元素和其它塊級元素。而行內(nèi)元素一般只能包含數(shù)據(jù)和其它行內(nèi)元素。
塊級元素主要對應(yīng)的常用標(biāo)簽有：
<p>,<div>,<ul>,<ol>,<li>,<dl>,<dt>,<dd>,<h1>~<h6>,<hr>,<form>,<table>,<tfoot>,<blockquote>,<address>,<fieldest>,<noscript>,<pre>
html5中新加的常用的有：
<article>,<figcaption>,<figure>,<output>,<aside>,<footer>,<audio>,<section>,<hgoup>,<video>
行內(nèi)元素有：
1.b, big, i, small, tt
2.abbr, acronym, cite, code, dfn, em, kbd, strong, samp, var
3.a, bdo, br, img, map, object, q, script, span, sub, sup
4.button, input, label, select, textarea
5.display: block、display: inline、display: inline-block分別有什么作用?
dispaly:block將元素設(shè)置為塊級元素。display: inline將元素設(shè)置為行內(nèi)元素。display: inline-block將元素設(shè)置為行內(nèi)塊元素。可以在必要時改變元素特性。
塊級元素的特點是：
1.總是在新行上開始；
2.高度，行高以及頂和底邊距都可控制；
3.寬度缺省是它的容器的100%，除非設(shè)定一個寬度。
行內(nèi)元素的特點是：
1.和其他元素都在一行上；
2.寬，高，行高及頂和底邊距不可改變。
行內(nèi)塊元素的特點是：
1.和其他元素都在一行上；
2.寬，高，行高及頂和底邊距可以改變。
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>
這段代碼設(shè)置class名為wrap的元素寬度為900px，并且在頁面上水平居中。
7.如何理解 HTML CSS 語義化? 在平時寫代碼的過程中要注意哪些細節(jié)
html標(biāo)簽的語義化是用合理html標(biāo)記以及其特有的屬性去格式化文檔內(nèi)容。
在編寫html文檔時，如果選用的標(biāo)簽幾乎全是不帶語義的，那么在去樣式后網(wǎng)頁中幾乎看不到任何結(jié)構(gòu)信息，可讀性非常差；如果選用的都是語義適合的標(biāo)簽，去樣式后網(wǎng)頁依然具有非常好的可讀性；各個瀏覽器有自己的默認樣式，默認的樣式給予了各個標(biāo)簽不同的顯示，標(biāo)簽使用的正確與否能體現(xiàn)網(wǎng)站的可用性，這也是檢驗一個網(wǎng)站可用性的最簡單的方法之一。
CSS語義化的命名是指用易于理解的名稱對html標(biāo)簽附加的class或id命名。語義化的命名這里就涉及到了團隊的命名規(guī)范，只有在團隊的規(guī)范的基礎(chǔ)之上進行更好的語義化命名才是王道。一個語義化的CSS命名至少應(yīng)遵守如下約定：
- 1.盡量規(guī)避拼音命名，用英文單詞去命名
- 2.單詞之間連接用三種方式：下劃線_ 、間隔符-、駝峰命名。具體使用哪種方式請根據(jù)團隊的規(guī)范，但個人建議不要同時使用2種以上的連接方法同時命名
- 3.單詞后不要跟無意義的數(shù)字，如logo1234 (團隊約定好的除外)
對于過長單詞的連接命名可采取縮寫形式，但應(yīng)確保成員都能看懂。
在平時寫代碼時，遇到諸如表格、標(biāo)題、段落、列表等，我們要盡量使用語義化標(biāo)簽，避免大段使用<div>這樣的非語義化標(biāo)簽。在給class、id屬性命名時，我們使用英文小寫的形式，單詞之間連接加間隔符-。
一些約定好的單詞命名：
頭：header
內(nèi)容：content/container
尾：footer
導(dǎo)航：nav
側(cè)欄：sidebar
欄目：column
登錄條：loginbar
標(biāo)志：logo
廣告：banner
輪轉(zhuǎn)：promo
頁面主體：main
熱點：hot
新聞：news
下載：download
子導(dǎo)航：subnav
菜單：menu
子菜單：submenu
搜索：search
友情鏈接：friendlink
版權(quán)copyright
8.form表單有什么作用？有哪些常用的input 標(biāo)簽，分別有什么作用？
<form>標(biāo)簽用于為用戶輸入創(chuàng)建 HTML 表單，向服務(wù)器傳輸數(shù)據(jù)。主要有以下屬性：
name:表單提交時的名稱。
action： 表單提交到的地址。
method：提交表單的方式。有post和get兩種。默認是get方式。
target：在何處打開action。
enctype :規(guī)定在發(fā)送到服務(wù)器之前應(yīng)該如何對表單數(shù)據(jù)進行編碼。
常用的input標(biāo)簽：
<input>標(biāo)簽按type的不同顯示出不同的樣式，有不同的作用。<input>標(biāo)簽必須有name屬性才能把輸入的數(shù)據(jù)傳到后臺。
1.<input type="text" name="xx">輸入文本，還可以加入placeholder屬性。placeholder展示提示信息。
舉例：
姓名：<input type="text" name= "fullname" placeholder="用戶名" maxlength=10 />
效果：
maxlength=10最大寬度表示輸入文本的最大寬度是10。2.
<input type="password" name="xx">輸入密碼，輸入時頁面上看不到輸入的數(shù)據(jù)。舉例：
密碼：<input type="password" name="key">效果：
3.
<input type="radio" name="xx" value="xx">單選框，一次只能選擇一個選項，且再點沒有反應(yīng)。一個單選框后有一個選項，它們的name屬性相同，便于瀏覽器識別這是同一個單選框。但value屬性不同，便于傳送選中的是哪個選項。舉例：
性別：<input type="radio" name="sex" value="male" checked>男
<input type="radio" name="sex" value="female">女<br/>
取向：<input type="radio" name="love" value="male" >男
<input type="radio" name="love" value="female" checked>女
效果：
checked表示默認選中這個選項。4.
<input type="checkbox" name="xx" value="xx">多選框，name的屬性可以寫成一樣，方便后臺把選中的選項排成數(shù)組。代碼：
愛好：<input type="checkbox" name="hobby" value="dota">dota
<input type="checkbox" name="hobby" value="旅游" checked>旅游
<input type="checkbox" name="hobby" value="寵物" checked>寵物
效果：
5.
<input type="submit" name="xxx" value="xxx">提交按鈕，提交按鈕放在form表單的任意位置，都是把表單中所有元素都提交。舉例：
6.
<textarea name="xxx" value="xxx" placeholder="xxx" >輸入大段文字舉例：
評論：<textarea name="commit" rows="5" cols="40" maxlength="1000"></textarea>
效果：
rows是行數(shù)，rols是列數(shù)。
7.
<input type="hidden" name="xxx" value="xxx">是隱藏域，用戶看不到，用于暫存數(shù)據(jù)或者安全校驗。8.
<select>標(biāo)簽用于下拉選擇。舉例：
我的car：
<select name="car">
<option value="volvo">沃爾沃</option>
<option value="saab" selected>薩博</option>
<option value="audi">奧迪</option>
</select>
效果：
selected表示預(yù)先選定。
<select>標(biāo)簽還有multiple屬性，表示多選，size屬性表示下拉列表中可見的選項。9.
<input type="file" name="xxx" > 用于文件上傳。舉例：
<input type="file" name="file" >
效果：
點擊選擇文件按鈕可以選擇要上傳的文件。
10.
<input type="image" src="xxx" alt="xxx">定義圖像形式的提交按鈕，必須有src屬性和alt屬性。舉例：
<input type="image" src="eg_submit.jpg" alt="submit" >
效果：
如果 type 屬性設(shè)置為 image，當(dāng)用戶單擊圖像時，瀏覽器將以像素為單位，將鼠標(biāo)相對于圖像邊界的偏移量發(fā)送到服務(wù)器，其中包括從圖像左邊界開始的水平偏移量，以及從圖像上邊界開始的垂直偏移。
11.
<input type="reset" name="xxx" value="xxx">定義重置按鈕。重置按鈕會清除表單中的所有數(shù)據(jù)數(shù)據(jù)。舉例：
value值不同，按鈕上顯示的值也不同。
12.
<input type="button" name="xxx" value="xxx">定義可點擊的按鈕，但沒有任何行為。常用于在用戶點擊按鈕時啟動JavaScript 程序。舉例：
<input type="button" value="Click me" onclick="msg()">
效果：
value值不同，按鈕上顯示的值也不同。加上onclick屬性，用于調(diào)用JavaScript。
9.post 和 get 方式的區(qū)別？
1.數(shù)據(jù)提交方式不同，get用來獲取信息，查詢數(shù)據(jù)庫，不會影響數(shù)據(jù)庫的數(shù)據(jù)和資源的狀態(tài)。post則會響數(shù)據(jù)庫的數(shù)據(jù)和資源的狀態(tài)。
2.post一般用于提交少量數(shù)據(jù)，得到大量數(shù)據(jù)。post用于提交大量數(shù)據(jù)。
3.pos理論上可以提交的數(shù)據(jù)無限制，但受服務(wù)器限制，get最多提交1k數(shù)據(jù)，主要用于查詢，受到瀏覽器和服務(wù)器的限制。
4.get提交的數(shù)據(jù)顯示在URL中，會記錄在瀏覽器的歷史記錄中，安全性不高。
10.在input里，name 有什么作用？
name 屬性規(guī)定 input 元素的名稱。name 屬性用于對提交到服務(wù)器后的表單數(shù)據(jù)進行標(biāo)識，或者在客戶端通過 JavaScript 引用表單數(shù)據(jù)。
只有設(shè)置了 name 屬性的表單元素才能在提交表單時傳遞它們的值。所以input必須設(shè)置name屬性。
11.<button>提交</button>、<a class="btn" href="#">提交</a>、<input type="submit" value="提交">三者有什么區(qū)別？
在頁面上：
都是行內(nèi)元素。
<a class="btn" href="#">提交</a>是一個鏈接，可以鏈接到任意網(wǎng)址，包括要提交到的頁面。<button>提交</button>和<input type="submit" value="提交">放在<form>表單中，都是一個按鈕，點擊后，都可以向后臺提交數(shù)據(jù)。在 button 元素內(nèi)部，可以放置更豐富的多媒體內(nèi)容，比如圖像。而
<input type="submit" value="提交">是通過改變value屬性的值，改變按鈕上顯示的文字。
12.radio 如何分組?
name屬性相同的是一組。
13.placeholder 屬性有什么作用?
placeholder 屬性提供可描述輸入字段預(yù)期值的提示信息（hint）。該提示會在輸入字段為空時顯示，并會在字段獲得焦點時消失。
14.type=hidden隱藏域有什么作用? 舉例說明
Hidden 對象代表一個 HTML 表單中的某個隱藏輸入域。這種類型的輸入元素實際上是隱藏的。這個不可見的表單元素的 value 屬性保存了一個要提交給 Web 服務(wù)器的任意字符串。如果想要提交并非用戶直接輸入的數(shù)據(jù)的話，就是用這種類型的元素。在 HTML 表單中 <input type="hidden"> 標(biāo)簽每出現(xiàn)一次，一個 Hidden 對象就會被創(chuàng)建。可通過遍歷表單的 elements[] 數(shù)組來訪問某個隱藏輸入域，或者通過使用document.getElementById()。
隱藏域用戶看不到，用于暫存數(shù)據(jù)或者安全校驗。
例如<input type="hidden" name="hidden" value="12345" />在頁面上不顯示這個信息，但是后臺可以接收到value的值。如果頁面一樣，但接收到的信息不一致，則不接受這個信息。用于頁面被偽造時，驗證頁面的正確性，保證頁面安全。
本文版權(quán)歸本人和饑人谷所有，轉(zhuǎn)載請注明出處
