一、有序列表、無序列表、自定義列表如何使用？寫個簡單的例子。三者在語義上有什么區(qū)別？在哪些情況下使用哪種（重要）？ 如何嵌套？

1、有序列表就是列表結(jié)構(gòu)中的列表項有先后順序的列表形式，從上到下可以有各種不同的序列編號，如1、2、3或a、b、c等；列表使用ol標(biāo)簽標(biāo)記，start值表示編號起始值。每個列表項始于li標(biāo)簽。

Paste_Image.png

無序列表就是列表結(jié)構(gòu)中的列表項沒有先后順序的列表形式，大部分網(wǎng)頁應(yīng)用中的列表均采用無序列表，其列表標(biāo)簽采用ul，默認的使用粗體圓點進行標(biāo)記。每個列表項始于li標(biāo)簽。

Paste_Image.png

Paste_Image.png

2、區(qū)別

• 有序列表列表項是序的，無序列表列表項無先后順序。自定義列表不僅僅是一列項目，而且是項目及其注釋的組合。
• 列表標(biāo)簽不同，有序列表使用ol標(biāo)簽、有start屬性。無序列表使用ul標(biāo)簽，無start屬性。自定義列表使用dl標(biāo)簽，其中自定義列表列表項以dt標(biāo)簽開始，自定義列表項描述使用dd標(biāo)簽，而有序和無序列表表示列表項均采用li標(biāo)簽。

• 無序列表有特殊圖形（如小黑點、小方框等）顯示，有序列表列表項的標(biāo)記有數(shù)字或字母。
  有序列表使用編號來記錄項目的順序，無序列表使用項目符號來記錄無序的項目，如并列項。自定義列表定義條件和定義描述，會默認前后層級關(guān)系；
  3、三種列表可以相互嵌套
  如：

  
  
  Paste_Image.png

二、如何去除列表前面的點或者數(shù)字？

1、在CSS中寫入代碼，找到相關(guān)性的CSS，在.li和.ul下寫入list-style:none或list-style-type:none。
2、head頭部style標(biāo)簽內(nèi)加入list-style:none；
3、在li,ul內(nèi)加入list-style:none。

三、class 和 id 有什么區(qū)別？什么時候用 class 什么時候用 id？

區(qū)別：
1、id和class都是dom元素的屬性值。不同的地方在于id屬性的值是唯一的，在css中定義的樣式也只能使用一次，而class屬性值可以重復(fù)。id的樣式優(yōu)先級高于class。
2、id是識別符，有錨點功能，當(dāng)瀏覽器地址欄有一個#xxx，頁面會自動滾動到id=xxx的元素上面。而class是類，用來定義通用的樣式然后給需要運用到這個樣式的Dom節(jié)點賦予這個class。id一般先找到結(jié)構(gòu)/內(nèi)容，再定義樣式；class是先定義好一種樣式，再套給多個結(jié)構(gòu)/內(nèi)容。
3、css樣式定義時，id采用#xx{屬性；屬性值}，class采用.xx{屬性：屬性值}。
4、id是表示著標(biāo)簽的身份，在js腳本中會用到id，當(dāng)js要修改一個標(biāo)簽的屬性時，js會將id名作為該標(biāo)簽的唯一標(biāo)識進行操作。也就是說id只是頁面元素的標(biāo)識，供其他元素腳本等引用。
用法：
什么時候一定使用id什么時候一定使用class沒有硬性規(guī)定，通常比較重要的部分、大的布局使用id;不重要的可以重復(fù)使用的使用class命名，有時js特效類需要唯一性，這個時候需要一定使用“id”。

四、塊級元素、行內(nèi)元素是什么？有什么區(qū)別？分別對應(yīng)哪些常用標(biāo)簽？

1、塊元素(block element)一般是其他元素的容器元素，能容納其他塊元素或行內(nèi)元素。常見的有p和div等。行內(nèi)元素(inline element)一般都是基于語義級(semantic)的基本元素。只能容納文本或者其他內(nèi)聯(lián)元素，常見內(nèi)聯(lián)元素有a和span。

2、區(qū)別：
（1）塊級元素會獨占一行，其寬度自動填滿其父元素寬度。行內(nèi)元素不會獨占一行，相鄰的行內(nèi)元素會排列在同一行里，知道一行排不下，才會換行，其寬度隨元素的內(nèi)容而變化。
（2） 塊級元素可以設(shè)置 width, height屬性，行內(nèi)元素設(shè)置width, height無效，塊級元素即使設(shè)置了寬度，仍然是獨占一行。
（3）塊級元素可以設(shè)置margin 和 padding. 行內(nèi)元素的水平方向的padding-left,padding-right,margin-left,margin-right 都產(chǎn)生邊距效果，但是豎直方向的padding-top,padding-bottom,margin-top,margin-bottom都不會產(chǎn)生邊距效果。（水平方向有效，豎直方向無效）
（4）塊級元素一般是其他元素的容器，可以容納行內(nèi)元素和其他塊元素，行內(nèi)元素只能容納文本或則其他行內(nèi)元素。

3、對應(yīng)常用標(biāo)簽。
塊級元素：address-地址、blockquote- 塊引用、center-居中對齊、dir-目錄列表、div-常用塊級元素，也是css layout主要標(biāo)簽、fieldset-form控制組、form-交互表單、h1~h6-一到6級標(biāo)題、hr-水平分隔線、isindex-input prompt、menu-列表菜單、noframes-frames可選內(nèi)容（對不支持frame的瀏覽器顯示此塊狀內(nèi)容）、nosript-可選腳本內(nèi)容（對應(yīng)不支持script的瀏覽器顯示此內(nèi)容）、ol-列表、p-段落、pre-格式化文本、table-表格、ul-非排序列表內(nèi)聯(lián)元素（inline element）、tbody-標(biāo)簽表格主體（正文）、td-表格中的標(biāo)準(zhǔn)單元格、tfoot- 定義表格的頁腳（腳注或表注）、th-定義表頭單元格、thead-標(biāo)簽定義表格的表頭、tr-定義表格中的行 等等。

行內(nèi)元素：a-錨點、abbr-縮寫、acronym-首字、b-粗體、bdo- bidi override、big - 大字體、br-換行、cite-引用、code - 計算機代碼（在引用源碼的時候需要）、dfn - 定義字段、em-強調(diào)、font - 字體設(shè)定（不推薦）、i-斜體效果、img-向網(wǎng)頁中嵌入一幅圖像、input-輸入框、kbd-定義鍵盤文本、label-標(biāo)簽為 input 元素定義標(biāo)注（標(biāo)記）、q-定義短的引用、samp-定義樣本文本、select-創(chuàng)建單選或多選菜單、small-呈現(xiàn)小號字體效果、span-組合文檔中的行內(nèi)元素、strong-語氣更強的強調(diào)的內(nèi)容、sub-定義下標(biāo)文本、sup-定義上標(biāo)文本、textarea- 多行的文本輸入控件、tt-打字機或者等寬的文本效果、var-定義變量 等等。

五、display: block、display: inline、display: inline-block分別有什么作用?

1.display：block將元素定義為塊級元素?？稍O(shè)置width,height、margin和padding屬性
2.display：inline將元素定義為行內(nèi)元素，對width,height無效，margin和padding屬性水平方向有效，垂直方向無效。一行排滿才會換行，寬度隨元素內(nèi)容而變化。
3.display：inline-block將對象呈遞為內(nèi)聯(lián)對象，但是對象的內(nèi)容作為塊對象呈遞。旁邊的內(nèi)聯(lián)對象會被呈遞在同一行內(nèi)，允許空格。內(nèi)容具有塊元素屬性可以設(shè)置寬度和高度。

六、下面代碼是做什么的？抄寫一遍下面的代碼，注意class和id的使用及命名方式？

Paste_Image.png

1、代碼說明id和class的使用范圍，id定義在頁面僅出現(xiàn)一次的標(biāo)記（如logo），盡量在結(jié)構(gòu)外圍使用。在對頁面進行結(jié)構(gòu)化布局時一般使用id。（通常頁面都有一個頁眉、一個報頭、一個內(nèi)容區(qū)域和一個頁腳組成）。
class是可重復(fù)的，所以盡量在結(jié)構(gòu)內(nèi)部使用，通常用于樣式定義。
2、塊級元素和行內(nèi)元素區(qū)別。
（1）塊級元素的寬度總是等于其父元素內(nèi)容區(qū)的寬度，div、ul、li是塊級元素，所以繼承了父元素的寬度。塊級元素即使設(shè)置了寬度，仍然是獨占一行。div下wrap是塊級元素會獨占一行。
（2）div下a鏈接是行內(nèi)元素，會根據(jù)文字內(nèi)容的寬高而變化，所以寬高都是auto，為其設(shè)置寬高之類的具體屬性值失效。img也是行內(nèi)元素，圖片設(shè)置的高度會繼承父元素a的高度。
（3）列表下的a鏈接是行內(nèi)元素，不受寬高、magin和padding影響，寬高也是自動的。
3、wrap是塊級元素三個區(qū)塊設(shè)置margin：0 auto，寬度都是固定的，并且居中顯示。對其設(shè)定width是不影響的。

七、如何理解 HTML CSS 語義化? 在平時寫代碼的過程中要注意哪些細節(jié)？

根據(jù)內(nèi)容的結(jié)構(gòu)化（內(nèi)容語義化），選擇合適的標(biāo)簽（代碼語義化）便于開發(fā)者閱讀和寫出更優(yōu)雅的代碼的同時讓瀏覽器的爬蟲和機器很好地解析。

• 盡可能少的使用無語義的標(biāo)簽div和span。
• 在語義不明顯時，既可以使用div或者p時，盡量用p, 因為p在默認情況下有上下間距，對兼容特殊終端有利；
• 不要使用純樣式標(biāo)簽，如：b、font、u等，改用css設(shè)置。
• 需要強調(diào)的文本，可以包含在strong或者em標(biāo)簽中（瀏覽器預(yù)設(shè)樣式，能用CSS就不用他們），strong默認樣式是加粗（不要用b），em是斜體（不用i）；
• 使用表格時，標(biāo)題要用caption，表頭用thead，主體部分用tbody包圍，尾部用tfoot包圍。表頭和一般單元格要區(qū)分開，表頭用th，單元格用td；
• 每個input標(biāo)簽對應(yīng)的說明文本都需要使用label標(biāo)簽，并且通過為input設(shè)置id屬性，在lable標(biāo)簽中設(shè)置for=someld來讓說明文本和相對應(yīng)的input關(guān)聯(lián)起來。1

八、form表單有什么作用？有哪些常用的input 標(biāo)簽，分別有什么作用？

<form> 標(biāo)簽用于為用戶輸入創(chuàng)建 HTML 表單、向服務(wù)器傳輸數(shù)據(jù)。
input標(biāo)簽屬性及作用：

• alt 屬性值text：定義圖像輸入的替代文本。
• height 屬性值pixels、% ：定義 input 字段的高度。（適用于 type="image"）
• max 屬性值number、date：規(guī)定輸入字段的最大值。
• name 屬性值field_name ：定義 input 元素的名稱。
• size 屬性值number_of_char：定義輸入字段的寬度。
• src 屬性值URL：定義以提交按鈕形式顯示的圖像的 URL。
• type 屬性值button、checkbox、file、hidden、image、password、radio、reset、submit、text：規(guī)定 input 元素的類型。
• value 屬性值value：規(guī)定 input 元素的值。
• width 屬性值pixels、%：定義 input 字段的寬度。（適用于 type="image"）

九、post 和 get 方式的區(qū)別？

1.get是從服務(wù)器上獲取數(shù)據(jù)，post是向服務(wù)器傳送數(shù)據(jù)。
2.get是把參數(shù)數(shù)據(jù)隊列加到提交表單的ACTION屬性所指的URL中，值和表單內(nèi)各個字段一一對應(yīng)，在URL中可以看到。post是通過HTTP post機制，將表單內(nèi)各個字段與其內(nèi)容放置在HTML HEADER內(nèi)一起傳送到ACTION屬性所指的URL地址。用戶看不到這個過程。
3.get傳送的數(shù)據(jù)量較小，不能大于2KB。post傳送的數(shù)據(jù)量較大，一般被默認為不受限制。
4.get安全性非常低，post安全性較高。
5.在form提交的時候，如果不指定method，則默認為get請求，form中提交的數(shù)據(jù)將會附加在url之后，以?分開與url分開。字母數(shù)字字符原樣發(fā)送，但空格轉(zhuǎn)換為“+“號，其它符號轉(zhuǎn)換為%XX,其中XX為該符號以16進制表示的ASCII（或ISO Latin-1）值。get請求請?zhí)峤坏臄?shù)據(jù)放置在HTTP請求協(xié)議頭中，而post提交的數(shù)據(jù)則放在實體數(shù)據(jù)中；get方式提交的數(shù)據(jù)最多只能有1024字節(jié)，而post則沒有此限制。

十、在input里name 有什么作用？

1.作為可與服務(wù)器交互數(shù)據(jù)的HTML元素的服務(wù)器端的標(biāo)示。
2.建立頁面中的錨點，我們知道<a href="URL">link</a>是獲得一個頁面超級鏈接，如果不用href屬性，而改用Name，< a name="PageBottom"></a>，我們就獲得了一個頁面錨點。
3.作為對象的Identity，如Applet、Object、Embed等元素。比如在Applet對象實例中，我們將使用其Name來引用該對象。
4.某些特定元素的屬性，如attribute，meta和param。2

十一、<button>提交</button>、<a class="btn" href="#">提交</a>、<input type="submit" value="提交"> 三者有什么區(qū)別？

1.<button>提交</button>：提交按鈕，需要綁定事件才能生效。
2.<a class="btn" href="#">提交</a>：鏈接按鈕。
3.<input type="submit" value="提交"> ：提交按鈕，用于表單中。

十二、radio 如何分組?

radio：單選按鈕,name的值相同，分為一組。

十三、placeholder 屬性有什么作用?

placeholder 屬性提供可描述輸入字段預(yù)期值的提示信息（hint）。該提示會在輸入字段為空時顯示，并會在字段獲得焦點時消失。 屬性適用于以下的 <input> 類型：text, search, url, telephone, email 以及 password。

十四、type=hidden隱藏域有什么作用? 舉例說明。

隱藏域在頁面中對于用戶是不可見的，在表單中插入隱藏域的目的在于收集或發(fā)送信息，以利于被處理表單的程序所使用。瀏覽者單擊發(fā)送按鈕發(fā)送表單的時候，隱藏域的信息也被一起發(fā)送到服務(wù)器。
在頁面中不顯示，經(jīng)過<form action=xx.asp>遞交到新一頁，通過request.form("隱藏域名的name")取出值。
本教程版權(quán)歸作者和饑人谷所有，轉(zhuǎn)載須說明來源！