一，有序列表、無序列表、自定義列表如何使用？寫個簡單的例子。三者在語義上有什么區(qū)別？在哪些情況下使用哪種（重要）？ 如何嵌套？
答：
有序列表通常用來表示內(nèi)容之間的順序或者是重要性關(guān)系，每一個列表都分為多個子項(xiàng)，每一個子項(xiàng)都有相應(yīng)的編號。
無序列表僅僅用于表示內(nèi)容之間存在有并列關(guān)系，也是分為多個子項(xiàng)，但是子項(xiàng)之前沒有相應(yīng)的編號，只有一個原點(diǎn)用于標(biāo)識。
定義列表通常用于表示名詞或者是概念的定義，每一個子項(xiàng)有兩個部分組成，第一部分是名詞或者是概念，第二部分是相應(yīng)的解釋和描述。
列表的簡單舉例
<!doctype html>
<HTML>
<head>
<meta name="hkeywords" content"ol,ul,dl" charset="utf-8"/>
</head>
<body>
<!--無序列表-->
<ul>
<li>我是無序列表</li>
<li>我是無序列表</li>
<li>我是無序列表</li>
</ul>
<!--有序列表-->
<ol>
<li>我是有序列表1</li>
<li>我是有序列表2</li>
<li>我是有序列表3</li>
</ol>
<!--自定義列表-->
<dl>
<dt>我是自定義列表項(xiàng)目</dt>
<dd>這是項(xiàng)目內(nèi)容</dd>
<dd>這是項(xiàng)目內(nèi)容</dd>
<dt>web前端</dt>
<dd>HTML</dd>
<dd>CSS</dd>
<dd>JavaScript</dd>
<dt>編程語言</dt>
<dd>Java</dd>
<dd>C++</dd>
</dl>
</body>
</HTML>
無序列表 unorder list 默認(rèn)列表項(xiàng)前是小圓點(diǎn)
有序列表排序的類型共五種：默認(rèn)阿拉伯?dāng)?shù)字，“a”小寫字母，"A"大寫字母，"I"大寫羅馬數(shù)字排序，"i"小寫羅馬數(shù)字排序.
start 排序的其實(shí)位置如果type="a" start="5" 那么從字母e開始.
reversed="true" 倒序排列.
自定義列表表達(dá)對名詞或概念的解釋或者描述
- 三者在語義上的區(qū)別：
1.無序列表:就是列表結(jié)構(gòu)中的列表項(xiàng)沒有先后順序的列表形式，大部分網(wǎng)頁應(yīng)用中的列表均采用無序列表，其列表標(biāo)簽采用ul，默認(rèn)的使用粗體圓點(diǎn)進(jìn)行標(biāo)記。每個列表項(xiàng)始于li標(biāo)簽。
2.有序列表:有序列表就是列表結(jié)構(gòu)中的列表項(xiàng)有先后順序的列表形式，從上到下可以有各種不同的序列編號，如1、2、3或a、b、c等；列表使用ol標(biāo)簽標(biāo)記，start值表示編號起始值。每個列表項(xiàng)始于li標(biāo)簽。
3.自定義列表:它由兩個部分組成：定義條件和定義描述。
列表以 dl 標(biāo)簽開始，每個自定義列表項(xiàng)以 dt 開始。每個自定義列表項(xiàng)的定義以 dd 開始。 - 在哪些情況下使用哪種（重要）？
對于一個列表項(xiàng)目，三種方法都可以實(shí)現(xiàn)，若此項(xiàng)目是按順序排列的，則使用有序列表。若項(xiàng)目中的列表內(nèi)容是并列的，則使用無序列表，自定義列表用法和無序列表一樣，不過比無序列表更便捷。
list-style-type:list-style-type屬性是用來定義li列表的項(xiàng)目符號的，即列表前面的修飾,是一個可繼承的屬性。
list-style-image:list-style-image用來定義使用圖片代替項(xiàng)目符號。它也是一個可繼承屬性。
list-style-position屬性是用來定義項(xiàng)目符號在列表中顯示位置的屬性。它同樣是一個可繼承的屬性，語法結(jié)構(gòu)如下：
list-style-position:inside/outside
inside：項(xiàng)目符號放置在文本以內(nèi)。 outside：項(xiàng)目符號放置在文本以外。
- 如何嵌套？
<HTML>
<head>
<meta name="hkeywords" content"ol,ul,dl" charset="utf-8"/>
</head>
<body style="background-color:#ccc color:#333">
<p>綜合性大學(xué)</p>
<!--無序列表-->
<ul>
<li>外國語學(xué)院</li>
<li>工商管理學(xué)院</li>
<li>計(jì)算機(jī)學(xué)院</li>
<!--嵌套有序列表-->
<ol>
<li>計(jì)算機(jī)網(wǎng)絡(luò)技術(shù)</li>
<li>計(jì)算機(jī)編程技術(shù)</li>
<li>web前端開發(fā)</li>
<!--嵌套自定義列表-->
<dl>
<dt>web前端</dt>
<dd>HTML</dd>
<dd>CSS</dd>
<dd>JavaScript</dd>
</dl>
<li>操作系統(tǒng)與系統(tǒng)架構(gòu)</li>
<li>數(shù)據(jù)庫編程與開發(fā)</li>
</ol>
<li>化工學(xué)院</li>
<li>醫(yī)學(xué)院</li>
</ul>
</body>
</HTML>
參考資料：css控制UL LI 的樣式詳解(推薦)
二，如何去除列表前面的點(diǎn)或者數(shù)字？
答：將列表屬性值設(shè)置為：list-style-type:none。即可。
三，class 和 id 有什么區(qū)別？什么時候用 class 什么時候用 id？
答：
class：用于概念上相似的元素，可以出現(xiàn)在同一頁面上的多個位置。
id：具有唯一性，用于不同的唯一的元素。
區(qū)別：
（1）class可重復(fù)使用；而id只能使用一次。
（2）class具有普遍性；id具有唯一性。
（3）id的樣式優(yōu)先級高于class。
（4）在CSS文件里書寫時，id加前綴"#"；class用"."。
（5）class在結(jié)構(gòu)內(nèi)部使用，通常用于樣式定義；id在結(jié)構(gòu)外圍使用，通常用于頁面布局。id和class的使用方法和時機(jī)
單一的元素，或需要程序、JS控制的東西，需要用id定義；重復(fù)使用的元素、類別，用class定義。其他解釋：
class是設(shè)置標(biāo)簽的類，id是設(shè)置標(biāo)簽的標(biāo)識，class屬性用于指定元素屬于何種樣式的類。
例如樣式表可以加入
.content1 { color: red; background: #ff80c0 }使用方法：class="content1"
id屬性用于定義一個元素的獨(dú)特的樣式。如一個CSS規(guī)則#content2 { font-size: larger }使用方法：id="content2"
id是一個標(biāo)簽，用于區(qū)分不同的結(jié)構(gòu)和內(nèi)容，就象你的名字，區(qū)分你和別人。
class是一個樣式，可以套在任何結(jié)構(gòu)和內(nèi)容上，就象一件衣服；
概念上說就是不一樣的：
id是先找到結(jié)構(gòu)/內(nèi)容，再給它定義樣式；class是先定義好一種樣式，再套給多個結(jié)構(gòu)/內(nèi)容。
參考資料,還有這里.
四，塊級元素、行內(nèi)元素是什么？有什么區(qū)別？分別對應(yīng)哪些常用標(biāo)簽？
答：
常用塊級元素如下：
塊級元素：div , p , form, ul, li , ol, dl, form, address, fieldset, hr, menu, table
行內(nèi)元素：span, strong, em, br, img , input, label, select, textarea, cite, 。
行內(nèi)元素與塊級函數(shù)的三個區(qū)別
1.行內(nèi)元素與塊級元素直觀上的區(qū)別：
行內(nèi)元素會在一條直線上排列，都是同一行的，水平方向排列塊級元素各占據(jù)一行，垂直方向排列。塊級元素從新行開始結(jié)束接著一個斷行。
2.塊級元素可以包含行內(nèi)元素和塊級元素。行內(nèi)元素不能包含塊級元素。
3.行內(nèi)元素與塊級元素屬性的不同，主要是盒模型屬性上行內(nèi)元素設(shè)置width無效，height無效(可以設(shè)置line-height)，margin左右有效，上下無效，padding左右有效，上下無效。
4.塊級元素和行內(nèi)元素的相關(guān)屬性是display,其中塊級元素對應(yīng)于display:block,行內(nèi)元素對應(yīng)于display:inline.我們可以修改dispaly屬性切換塊級元素和行內(nèi)元素。
5.<input>和<img>都是行內(nèi)元素，但是它們是可以設(shè)置寬和高的。這里就涉及到可替換元素和不可替換元素?？商鎿Q元素一般都是行內(nèi)元素。
附錄：
所有的塊級元素和行內(nèi)元素
塊級元素（block element）
- address - 地址
- blockquote - 塊引用
- center - 舉中對齊塊
- div - 常用塊級容易，也是css layout的主要標(biāo)簽
- dl - 定義列表
- fieldset - form控制組
- form - 交互表單
- h1 - 大標(biāo)題
- h2 - 副標(biāo)題
- h3 - 3級標(biāo)題
- h4 - 4級標(biāo)題
- h5 - 5級標(biāo)題
- h6 - 6級標(biāo)題
- hr - 水平分隔線
- isindex - input prompt
- ol - 有序列表
- p - 段落
- pre - 格式化文本
- table - 表格
- ul - 無序列表
內(nèi)聯(lián)元素(inline element)
- a - 錨點(diǎn)
- abbr - 縮寫
- acronym - 首字
- b - 粗體(不推薦)
- big - 大字體
- br - 換行
- cite - 引用
- code - 計(jì)算機(jī)代碼(在引用源碼的時候需要)
- dfn - 定義字段
- em - 強(qiáng)調(diào)
- font - 字體設(shè)定(不推薦)
- i - 斜體
- img - 圖片
- input - 輸入框
- kbd - 定義鍵盤文本
- label - 表格標(biāo)簽
- q - 短引用
- s - 中劃線(不推薦)
- samp - 定義范例計(jì)算機(jī)代碼
- select - 項(xiàng)目選擇
- small - 小字體文本
- span - 常用內(nèi)聯(lián)容器，定義文本內(nèi)區(qū)塊
- strike - 中劃線
- strong - 粗體強(qiáng)調(diào)
- sub - 下標(biāo)
- sup - 上標(biāo)
- textarea - 多行文本輸入框
可替換元素
可變元素為根據(jù)上下文語境決定該元素為塊元素或者內(nèi)聯(lián)元素。
- applet - java applet
- button - 按鈕
- del - 刪除文本
- iframe - inline frame
- ins - 插入的文本
- map - 圖片區(qū)塊(map)
- object - object對象
- script - 客戶端腳本
五，display: block、display: inline、display: inline-block分別有什么作用?
答：
1.display：block將元素定義為塊級元素。元素占滿整行100%，可設(shè)置width,height、margin和padding屬性
2.display：inline將元素定義為行內(nèi)元素，對width,height無效，line-height有效，margin和padding屬性水平方向有效，垂直方向無效。一行排滿才會換行，寬度隨元素內(nèi)容而變化。
3.display: inline-block的作用是行內(nèi)快元素。元素既擁有了block元素可以設(shè)置width和height的特性，又保持了inline元素不換行的特性。
六，下面代碼是做什么的？抄寫一遍下面的代碼，注意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>
答：網(wǎng)頁實(shí)現(xiàn)了一個簡單的頁面布局。主要分為三大區(qū)塊，分別為頭部的header區(qū)，中間部分的content區(qū)（又分為側(cè)邊欄aside和主體區(qū)域main），以及底部區(qū)域footer。
網(wǎng)頁中統(tǒng)一的樣式布局全部用class（.wrap）來定義。id作為區(qū)域劃分的標(biāo)簽使用。使頁面的布局和樣式清晰明了。
七，如何理解 HTML CSS 語義化? 在平時寫代碼的過程中要注意哪些細(xì)節(jié)？
答：根據(jù)內(nèi)容的結(jié)構(gòu)化（內(nèi)容語義化），選擇合適的標(biāo)簽（代碼語義化）便于開發(fā)者閱讀和寫出更優(yōu)雅的代碼的同時讓瀏覽器的爬蟲和機(jī)器很好地解析。使頁面有良好的結(jié)構(gòu)，頁面元素有含義，能夠讓人和搜索引擎都容易理解。
寫HTML代碼時應(yīng)注意什么？
- 盡可能少的使用無語義的標(biāo)簽div和span；
- 在語義不明顯時，既可以使用div或者p時，盡量用p, 因?yàn)閜在默認(rèn)情況下有上下間距，對兼容特殊終端有利；
- 不要使用純樣式標(biāo)簽，如：b、font、u等，改用css設(shè)置。
- 需要強(qiáng)調(diào)的文本，可以包含在strong或者em標(biāo)簽中（瀏覽器預(yù)設(shè)樣式，能用CSS指定就不用他們），strong默認(rèn)樣式是加粗（不要用b），em是斜體（不用i）；
- 使用表格時，標(biāo)題要用caption，表頭用thead，主體部分用tbody包圍，尾部用tfoot包圍。表頭和一般單元格要區(qū)分開，表頭用th，單元格用td；
- 表單域要用fieldset標(biāo)簽包起來，并用legend標(biāo)簽說明表單的用途；
- 每個input標(biāo)簽對應(yīng)的說明文本都需要使用label標(biāo)簽，并且通過為 input設(shè)置id屬性，在lable標(biāo)簽中設(shè)置for=someld來讓說明文本和相對應(yīng)的input關(guān)聯(lián)起來。
八，form表單有什么作用？有哪些常用的input 標(biāo)簽，分別有什么作用？
答：<form> 標(biāo)簽用于為用戶輸入創(chuàng)建 HTML 表單,表單向服務(wù)器傳輸用戶數(shù)據(jù)。
表單能夠包含 input 元素，比如文本字段、復(fù)選框、單選框、提交按鈕等等。表單還可以包含 menus、textarea、fieldset和 label 元素 等。
<form>標(biāo)簽屬性：
- name: 表單提交時的名稱
- action {URL}：一個URL地址；指定form表單向何處發(fā)送數(shù)據(jù)。
- method {get/post}：指定表單以何種方式發(fā)送到指定的頁面。
指定的值有g(shù)et和post：
get ：from表單里所填的值，附加在action指定的URL后面，做為URL鏈接而傳遞；
post ：from表單里所填的值，附加在HTML Headers上。 - enctype {string}：規(guī)定在發(fā)送表單數(shù)據(jù)之前，如何對表單數(shù)據(jù)進(jìn)行編碼。
指定的值有application/x-www-form-urlencoded 和multipart/form-data：
application/x-www-form-urlencoded ：在發(fā)送前編碼所有字符（默認(rèn)為此方式）；
multipart/form-data ：不對字符編碼。使用包含文件上傳控件的表單時，必須使用該值。
附錄：常見的input類型
有哪些常用的input 標(biāo)簽，分別有什么作用?
<input type="text">用于輸入文本,可以加入placeholder屬性來寫框內(nèi)的提示內(nèi)容，還有maxlength用來限制文本框里的字?jǐn)?shù)，value用來填寫里面的默認(rèn)內(nèi)容。
<input type="password">里面輸入密碼顯示文字為星號。
<input type=“raido”>是單選框但是只在里面name相同的情況下是單選，不相同的話是多選。
<input type="checkbox">復(fù)選框，加入checked使之成為默認(rèn)選項(xiàng)。
<input type="textrea">文本域，用于輸入大量文本。
<input type="select">下拉選擇列表，加入selected使之成為默認(rèn)選擇。
<input type="submit">定義提交按鈕,向服務(wù)器發(fā)送表單數(shù)據(jù)，里面的內(nèi)容根據(jù)value決定。
<input type="reset" > 定義重置按鈕。重置按鈕會清除表單中的所有數(shù)據(jù)。
<input type="image" >定義圖像形式的提交按鈕。
必須把標(biāo)簽的 src 屬性和Alt屬性與其結(jié)合使用。
<input type="hidden">定義隱藏字段。隱藏字段對于用戶是不可見的。隱藏字段通常會存儲一個默認(rèn)值，它們的值也可以由 JavaScript 進(jìn)行修改。
<input type="file" >用于文件上傳。
<input type="button" >定義可點(diǎn)擊的按鈕，但沒有任何行為。button 類型常用于在用戶點(diǎn)擊按鈕時啟動 JavaScript 程序。
所有的input可以添加屬性 disabled來禁用輸入
參考資料1，參考資料2,參考資料2,參考資料3。
九，post 和 get 方式的區(qū)別？
答：
- GET提交，請求的數(shù)據(jù)會附在URL之后（就是把數(shù)據(jù)放置在HTTP協(xié)議頭中），以?分割URL和傳輸數(shù)據(jù)，多個參數(shù)用&連接；例 如：
login.action?name=jierengu&password=idontknow&verify=%E4%BD%A0 %E5%A5%BD。如果數(shù)據(jù)是英文字母/數(shù)字，原樣發(fā)送;如果是空格，轉(zhuǎn)換為+，如果是中文/其他字符，則直接把字符串用BASE64加密，得出如： %E4%BD%A0%E5%A5%BD，其中％XX中的XX為該符號以16進(jìn)制表示的ASCII。
POST提交：把提交的數(shù)據(jù)放置在是HTTP包的包體中。上文示例中紅色字體標(biāo)明的就是實(shí)際的傳輸數(shù)據(jù)
因此，GET提交的數(shù)據(jù)會在地址欄中顯示出來，而POST提交，地址欄不會改變
- 傳輸數(shù)據(jù)的大?。菏紫嚷暶鳎篐TTP協(xié)議沒有對傳輸?shù)臄?shù)據(jù)大小進(jìn)行限制，HTTP協(xié)議規(guī)范也沒有對URL長度進(jìn)行限制。
而在實(shí)際開發(fā)中存在的限制主要有：
GET:特定瀏覽器和服務(wù)器對URL長度有限制，例如 IE對URL長度的限制是2083字節(jié)(2K+35)。對于其他瀏覽器，如Netscape、FireFox等，理論上沒有長度限制，其限制取決于操作系 統(tǒng)的支持。
因此對于GET提交時，傳輸數(shù)據(jù)就會受到URL長度的 限制。
POST:由于不是通過URL傳值，理論上數(shù)據(jù)不受 限。但實(shí)際各個WEB服務(wù)器會規(guī)定對post提交數(shù)據(jù)大小進(jìn)行限制，Apache、IIS6都有各自的配置。 - 安全性：
POST的安全性要比GET的安全性高。注意：這里所說的安全性和上面GET提到的“安全”不是同個概念。上面 “安全”的含義僅僅是不作數(shù)據(jù)修 改，而這 里安全的含義是真正的Security的含義，比如：通過GET提交數(shù)據(jù)，用戶名和密碼將明文出現(xiàn)在URL上，因?yàn)椋?br> (1)登錄頁面有可能被瀏覽器緩存，
(2)其他人查看瀏覽器的歷史紀(jì)錄，那么別人就可以拿到你的賬號和密碼了，除此之外，使用GET提交數(shù)據(jù)還可能會造成Cross-site request forgery攻擊。 - Http get,post,soap協(xié)議都是在http上運(yùn)行的。
1）get：請求參數(shù)是作為一個key/value對的序列（查詢字符串）附加到URL上的查詢字符串的長度受到web瀏覽器和web服務(wù)器的限制（如IE最多支持2048個字符），不適合傳輸大型數(shù)據(jù)集同時，它很不安全
2）post：請求參數(shù)是在http標(biāo)題的一個不同部分（名為entity body）傳輸?shù)模@一部分用來傳輸表單信息，因此必須將Content-type設(shè)置為:application/x-www-form- urlencoded。post設(shè)計(jì)用來支持web窗體上的用戶字段，其參數(shù)也是作為key/value對傳輸。但是：它不支持復(fù)雜數(shù)據(jù)類型，因?yàn)閜ost沒有定義傳輸數(shù)據(jù)結(jié)構(gòu)的語義和規(guī)則。3）soap：是http post的一個專用版本，遵循一種特殊的xml消息格式Content-type設(shè)置為: text/xml 任何數(shù)據(jù)都可以xml化。
十，在input里，name 有什么作用？
答：
- name屬性用于規(guī)定input元素的名稱，
- 用于對提交到服務(wù)器后的表單數(shù)據(jù)進(jìn)行標(biāo)識，
- 在客戶端通過javascript引用表單數(shù)據(jù)
[注意]只有設(shè)置了name屬性的表單元素才能在提交表單時傳遞它們的值。
擴(kuò)展閱讀：name id,參考資料1.
十一，<button>提交</button> / <a class="btn" href="#">提交</a> / <input type="submit" value="提交">三者有什么區(qū)別？
答：
<button>提交</button>是一個單純的按鈕，點(diǎn)擊以后頁面沒有任何動作。
<a class=“btn” href="#">提交</a>是一個偽裝成按鈕的超鏈接，點(diǎn)擊以后可以進(jìn)入另外的頁面。
<input type=“submit” value=“提交”>，是表單的按鈕，用來向服務(wù)器提交表單數(shù)據(jù)。
十二，radio 如何 分組?
答：設(shè)置 name 屬性，名稱相同的為一組。
placeholder 屬性適用于以下的 <input> 類型：text, search, url, telephone, email 以及 password。
十三，placeholder 屬性有什么作用?
答：placeholder屬性是HTML5 中為input添加的。在input上提供一個占位符，文字形式展示輸入字段預(yù)期值的提示信息（hint），該字段會在輸入為空時顯示。
<!DOCTYPE HTML>
<html>
<body>
<form action="/example/html5/demo_form.asp" method="get">
<input type="search" name="user_search" placeholder="Search W3School" />
姓名：<input type="text" name="姓名" placeholder="姓名"/>
密碼：<input type="password" name="密碼" placeholder="密碼"/>
<input type="submit" />
</form>
</body>
</html>
十三，type=hidden隱藏域有什么作用? 舉例說明
答：
隱藏域的功能是用來儲存一些表單資訊，而不想要直接顯示在頁面表單上。例如一些特定的參數(shù)，填寫時間戳記，登入記錄...等，有許多種的應(yīng)用都可以使用隱藏欄位來記錄。當(dāng)表單提交的時候，隱藏域的值也會傳遞給后端的程序，每一個表單可以安插許多不同名稱的隱藏域，傳遞各種表單信息。
<head>
<title>My Page</title>
</head>
<body>
<form name="myform" action="http://www.mydomain.com/myformhandler.cgi" method="POST">
<div align="center">
<input type="text" size="25" value="Enter your name here!">
<input type="hidden" name="Language" value="English">
<input type="submit" name="submit" value="提交">
</div>
</form>
</body>
</html>
