一子漩、有序列表豫喧、無序列表、自定義列表如何使用幢泼？寫個(gè)簡單的例子紧显。三者在語義上有什么區(qū)別？在哪些情況下使用哪種（重要）缕棵？ 如何嵌套孵班？

1、有序列表就是列表結(jié)構(gòu)中的列表項(xiàng)有先后順序的列表形式招驴，從上到下可以有各種不同的序列編號篙程，如1、2别厘、3或a虱饿、b、c等触趴；列表使用ol標(biāo)簽標(biāo)記氮发，start值表示編號起始值。每個(gè)列表項(xiàng)始于li標(biāo)簽冗懦。

Paste_Image.png

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

Paste_Image.png

Paste_Image.png

2、區(qū)別

• 有序列表列表項(xiàng)是序的寂屏，無序列表列表項(xiàng)無先后順序贰谣。自定義列表不僅僅是一列項(xiàng)目娜搂，而且是項(xiàng)目及其注釋的組合。
• 列表標(biāo)簽不同吱抚，有序列表使用ol標(biāo)簽百宇、有start屬性。無序列表使用ul標(biāo)簽秘豹，無start屬性携御。自定義列表使用dl標(biāo)簽，其中自定義列表列表項(xiàng)以dt標(biāo)簽開始既绕，自定義列表項(xiàng)描述使用dd標(biāo)簽啄刹，而有序和無序列表表示列表項(xiàng)均采用li標(biāo)簽。

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

  
  
  Paste_Image.png

二壶熏、如何去除列表前面的點(diǎn)或者數(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ū)別？什么時(shí)候用 class 什么時(shí)候用 id佳头？

區(qū)別：
1鹰贵、id和class都是dom元素的屬性值。不同的地方在于id屬性的值是唯一的康嘉，在css中定義的樣式也只能使用一次碉输，而class屬性值可以重復(fù)。id的樣式優(yōu)先級高于class亭珍。
2敷钾、id是識別符枝哄，有錨點(diǎn)功能，當(dāng)瀏覽器地址欄有一個(gè)#xxx阻荒，頁面會自動滾動到id=xxx的元素上面挠锥。而class是類，用來定義通用的樣式然后給需要運(yùn)用到這個(gè)樣式的Dom節(jié)點(diǎn)賦予這個(gè)class侨赡。id一般先找到結(jié)構(gòu)/內(nèi)容蓖租，再定義樣式；class是先定義好一種樣式羊壹，再套給多個(gè)結(jié)構(gòu)/內(nèi)容蓖宦。
3、css樣式定義時(shí)舶掖，id采用#xx{屬性球昨；屬性值}，class采用.xx{屬性：屬性值}眨攘。
4主慰、id是表示著標(biāo)簽的身份，在js腳本中會用到id鲫售，當(dāng)js要修改一個(gè)標(biāo)簽的屬性時(shí)共螺，js會將id名作為該標(biāo)簽的唯一標(biāo)識進(jìn)行操作。也就是說id只是頁面元素的標(biāo)識情竹，供其他元素腳本等引用藐不。
用法：
什么時(shí)候一定使用id什么時(shí)候一定使用class沒有硬性規(guī)定，通常比較重要的部分秦效、大的布局使用id;不重要的可以重復(fù)使用的使用class命名雏蛮，有時(shí)js特效類需要唯一性，這個(gè)時(shí)候需要一定使用“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）塊級元素會獨(dú)占一行尘颓，其寬度自動填滿其父元素寬度。行內(nèi)元素不會獨(dú)占一行晦譬，相鄰的行內(nèi)元素會排列在同一行里，知道一行排不下互广，才會換行敛腌，其寬度隨元素的內(nèi)容而變化。
（2） 塊級元素可以設(shè)置 width, height屬性惫皱，行內(nèi)元素設(shè)置width, height無效像樊，塊級元素即使設(shè)置了寬度，仍然是獨(dú)占一行旅敷。
（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-錨點(diǎn)瑰谜、abbr-縮寫欺冀、acronym-首字、b-粗體萨脑、bdo- bidi override隐轩、big - 大字體、br-換行渤早、cite-引用职车、code - 計(jì)算機(jī)代碼（在引用源碼的時(shí)候需要）、dfn - 定義字段鹊杖、em-強(qiáng)調(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-語氣更強(qiáng)的強(qiáng)調(diào)的內(nèi)容揩瞪、sub-定義下標(biāo)文本、sup-定義上標(biāo)文本篓冲、textarea- 多行的文本輸入控件李破、tt-打字機(jī)或者等寬的文本效果、var-定義變量 等等壹将。

五嗤攻、display: block、display: inline诽俯、display: inline-block分別有什么作用?

1.display：block將元素定義為塊級元素妇菱。可設(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)外圍使用密幔。在對頁面進(jìn)行結(jié)構(gòu)化布局時(shí)一般使用id。（通常頁面都有一個(gè)頁眉撩轰、一個(gè)報(bào)頭胯甩、一個(gè)內(nèi)容區(qū)域和一個(gè)頁腳組成）。
class是可重復(fù)的堪嫂，所以盡量在結(jié)構(gòu)內(nèi)部使用偎箫，通常用于樣式定義。
2皆串、塊級元素和行內(nèi)元素區(qū)別淹办。
（1）塊級元素的寬度總是等于其父元素內(nèi)容區(qū)的寬度，div恶复、ul怜森、li是塊級元素，所以繼承了父元素的寬度谤牡。塊級元素即使設(shè)置了寬度副硅，仍然是獨(dú)占一行。div下wrap是塊級元素會獨(dú)占一行。
（2）div下a鏈接是行內(nèi)元素往踢，會根據(jù)文字內(nèi)容的寬高而變化阴挣，所以寬高都是auto年栓，為其設(shè)置寬高之類的具體屬性值失效流纹。img也是行內(nèi)元素糜烹，圖片設(shè)置的高度會繼承父元素a的高度。
（3）列表下的a鏈接是行內(nèi)元素漱凝，不受寬高疮蹦、magin和padding影響，寬高也是自動的茸炒。
3愕乎、wrap是塊級元素三個(gè)區(qū)塊設(shè)置margin：0 auto，寬度都是固定的壁公，并且居中顯示感论。對其設(shè)定width是不影響的。

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

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

• 盡可能少的使用無語義的標(biāo)簽div和span芳绩。
• 在語義不明顯時(shí)，既可以使用div或者p時(shí)撞反，盡量用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）授账；
• 使用表格時(shí)枯跑，標(biāo)題要用caption，表頭用thead白热，主體部分用tbody包圍敛助，尾部用tfoot包圍。表頭和一般單元格要區(qū)分開屋确，表頭用th纳击，單元格用td续扔；
• 每個(gè)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ù)隊(duì)列加到提交表單的ACTION屬性所指的URL中氓栈，值和表單內(nèi)各個(gè)字段一一對應(yīng)，在URL中可以看到婿着。post是通過HTTP post機(jī)制授瘦，將表單內(nèi)各個(gè)字段與其內(nèi)容放置在HTML HEADER內(nèi)一起傳送到ACTION屬性所指的URL地址醋界。用戶看不到這個(gè)過程。
3.get傳送的數(shù)據(jù)量較小提完，不能大于2KB形纺。post傳送的數(shù)據(jù)量較大，一般被默認(rèn)為不受限制氯葬。
4.get安全性非常低挡篓，post安全性較高。
5.在form提交的時(shí)候帚称，如果不指定method官研，則默認(rèn)為get請求，form中提交的數(shù)據(jù)將會附加在url之后闯睹，以?分開與url分開戏羽。字母數(shù)字字符原樣發(fā)送，但空格轉(zhuǎn)換為“+“號楼吃，其它符號轉(zhuǎn)換為%XX,其中XX為該符號以16進(jìn)制表示的ASCII（或ISO Latin-1）值始花。get請求請?zhí)峤坏臄?shù)據(jù)放置在HTTP請求協(xié)議頭中，而post提交的數(shù)據(jù)則放在實(shí)體數(shù)據(jù)中孩锡；get方式提交的數(shù)據(jù)最多只能有1024字節(jié)酷宵，而post則沒有此限制。

十躬窜、在input里name 有什么作用浇垦？

1.作為可與服務(wù)器交互數(shù)據(jù)的HTML元素的服務(wù)器端的標(biāo)示。
2.建立頁面中的錨點(diǎn)荣挨，我們知道<a href="URL">link</a>是獲得一個(gè)頁面超級鏈接男韧，如果不用href屬性，而改用Name默垄，< a name="PageBottom"></a>此虑，我們就獲得了一個(gè)頁面錨點(diǎn)。
3.作為對象的Identity口锭，如Applet朦前、Object、Embed等元素鹃操。比如在Applet對象實(shí)例中况既，我們將使用其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）适篙。該提示會在輸入字段為空時(shí)顯示往核，并會在字段獲得焦點(diǎn)時(shí)消失。 屬性適用于以下的 <input> 類型：text, search, url, telephone, email 以及 password嚷节。

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

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