一、基礎(chǔ)班模塊
基礎(chǔ)部分
1. 什么是HTML？
? - [ ] HTML并不是真正的的程序語(yǔ)言，他是一種 標(biāo) 記 語(yǔ) 言 ，用來(lái)結(jié)構(gòu)化和含義化你想要放在web 網(wǎng)站上的那些內(nèi)容。它由一系列的元素（elements）所組成，這些元素可以用來(lái)封裝你的內(nèi)容中擔(dān)任不同工作的各部分和各個(gè)角色。
2. 什么是CSS？
? - [ ] 就像 HTML，CSS 也不是真正的編程語(yǔ)言。它是樣式表語(yǔ)言，也就是說(shuō)，它允許你有選擇性的為 HTML 文檔的元素添加樣式。
3. 行內(nèi)元素和塊級(jí)元素的具體區(qū)別是什么？行內(nèi)元素的padding和margin可設(shè)置嗎？
? - [ ] 塊級(jí)元素(block)特性：
? ? ? ? 總是獨(dú)占一行，表現(xiàn)為另起一行開(kāi)始，而且其后的元素也必須另起一行顯示;寬度(width)、高度(height)、內(nèi)邊距(padding)和外邊距(margin)都可控制;
? ? ? ? 內(nèi)聯(lián)元素(inline)特性：
? ? ? ? 和相鄰的內(nèi)聯(lián)元素在同一行;寬度(width)、高度(height)、內(nèi)邊距的top/bottom(padding-top/padding-bottom)和外邊距的top/bottom(margin-top/margin-bottom)都不可改變（也就是padding和margin的left和right是可以設(shè)置的），就是里面文字或圖片的大小。
4. 簡(jiǎn)述一下你對(duì)HTML語(yǔ)義化的理解？
? - [ ] 1. HTML語(yǔ)義化讓頁(yè)面的內(nèi)容結(jié)構(gòu)化，結(jié)構(gòu)更清晰，便于對(duì)瀏覽器、搜索引擎解析；
? ? ? ? 2. 即使在沒(méi)有樣式CSS 的情況下也能以一種文檔格式顯示，并且是容易閱讀的；
? ? ? ? 3. 搜索引擎的爬蟲(chóng)也依賴于HTML標(biāo)記來(lái)確定上下文和各個(gè)關(guān)鍵字的權(quán)重，有利于SEO；
? ? ? ? 4. 使閱讀源代碼的人更容易將網(wǎng)站分塊，便于閱讀、維護(hù)和理解；
5. rgba() 和 opacity 設(shè)置透明度的區(qū)別是什么？
? - [ ] rgba()和opacity都能實(shí)現(xiàn)透明效果，但最大的不同是opacity作用于元素，以及元素內(nèi)的所有內(nèi)容的透明度，而rgba()只作用于元素的顏色或其背景色。（設(shè)置rgba透明的元素的子元素不會(huì)繼承透明效果?。?/p>
6. DOCTYPE的作用？
? - [ ] 1. <!DOCTYPE> 聲明位于文檔中的最前面，處于 <html> 標(biāo)簽之前。告知瀏覽器以何種模式來(lái)渲染文檔。
? ? ? ? 1. 嚴(yán)格模式的排版和 JS 運(yùn)作模式是以該瀏覽器支持的最高標(biāo)準(zhǔn)運(yùn)行。
? ? ? ? 2. 在混雜模式中，頁(yè)面以寬松的向后兼容的方式顯示。模擬老式瀏覽器的行為以防止站點(diǎn)無(wú)法工作。
? ? ? ? 3. DOCTYPE 不存在或格式不正確會(huì)導(dǎo)致文檔以混雜模式呈現(xiàn)。
7. 介紹一下你對(duì)瀏覽器內(nèi)核的理解？都有哪些常見(jiàn)的瀏覽器內(nèi)核？
? - [ ] 要或者說(shuō)核心的部分是“Rendering Engine”，可大概譯為“渲染引擎”，不過(guò)我們一般習(xí)慣將之稱為“瀏覽器內(nèi)核”。負(fù)責(zé)對(duì)網(wǎng)頁(yè)語(yǔ)法的解釋（如標(biāo)準(zhǔn)通用標(biāo)記語(yǔ)言下的一個(gè)應(yīng)用 HTML、JavaScript）并渲染（顯示）網(wǎng)頁(yè)。 所以，通常所謂的瀏覽器內(nèi)核也就是瀏覽器所采用的渲染引擎，渲染引擎決定了瀏覽器如何顯示網(wǎng)頁(yè)的內(nèi)容以及頁(yè)面的格式信息。不同的瀏覽器內(nèi)核對(duì)網(wǎng)頁(yè)編寫(xiě)語(yǔ)法的解釋也有不同，因此同一網(wǎng)頁(yè)在不同的內(nèi)核的瀏覽器里的渲染（顯示）效果也可能不同，這也是網(wǎng)頁(yè)編寫(xiě)者需要在不同內(nèi)核的瀏覽器中測(cè)試網(wǎng)頁(yè)顯示效果的原因。
? ? ? ? 常見(jiàn)瀏覽器內(nèi)核：
? ? ? ? Trident 內(nèi)核：IE,MaxThon,TT,The World,360,搜狗瀏覽器等。[又稱 MSHTML]
? ? ? ? Gecko內(nèi)核：Netscape6 及以上版本，F(xiàn)F,MozillaSuite/SeaMonkey 等。
? ? ? ? Presto 內(nèi)核：Opera7及以上。 [Opera內(nèi)核原為：Presto，現(xiàn)為、Blink;]
? ? ? ? Webkit 內(nèi)核：Safari,Chrome 等。 [ Chrome 的：Blink（WebKit 的分支）]
? ? ? ? EdgeHTML內(nèi)核：Microsoft Edge。 [此內(nèi)核其實(shí)是從 MSHTML fork 而來(lái)，刪掉了幾乎所有的 IE私有特性
8. CSS選擇器權(quán)重如何計(jì)算？
? - [ ] 頁(yè)面顯示樣式的優(yōu)先級(jí)取決于其“特殊性”’，特殊性越高，就顯示最高的，當(dāng)特殊性相等時(shí)，顯示后者
? ? ? ? 特殊性表述為 4個(gè)部分：0,0,0,0
? ? ? ? 一個(gè)選擇器的特殊性如下:
? ? ? ? 對(duì)于選擇器是#id的屬性值,特殊性值為：0,1,0,0
? ? ? ? 對(duì)于屬性選擇器，class或偽類，特殊性值為：0,0,1,0
? ? ? ? 對(duì)于標(biāo)簽選擇器或偽元素，特殊性值為：0,0,0,1
? ? ? ? 通配符‘*’特殊性值為：0,0,0,0
? ? ? ? 內(nèi)聯(lián)樣式特殊性值為：1,0,0,0
9. 對(duì)WEB標(biāo)準(zhǔn)以及W3C的理解與認(rèn)識(shí)？
? - [ ] 1. 標(biāo)簽閉合、標(biāo)簽小寫(xiě)、不亂嵌套、提高搜索機(jī)器人搜索幾率、使用外鏈 css 和 js 腳本、結(jié)構(gòu)行為表現(xiàn)的分離，
? ? ? ? 2. 文件下載與頁(yè)面速度更快、內(nèi)容能被更多的用戶所訪問(wèn)、內(nèi)容能被更廣泛的設(shè)備所訪問(wèn)、更少的代碼和組件，
? ? ? ? 3. 容易維護(hù)、改版方便，不需要變動(dòng)頁(yè)面內(nèi)容、提供打印版本而不需要復(fù)制內(nèi)容、提高網(wǎng)站易用性。
10. CSS中優(yōu)雅降級(jí)和漸進(jìn)增強(qiáng)有什么區(qū)別？
? ? - [ ] 優(yōu)雅降級(jí)和漸進(jìn)增強(qiáng)印象中是隨著css3 流出來(lái)的一個(gè)概念。由于低級(jí)瀏覽器不支持
? ? ? ? ? css3，但 css3 的效果又太優(yōu)秀不忍放棄，所以在高級(jí)瀏覽中使用 css3 而低級(jí)瀏覽器只保證最基本的功能。咋一看兩個(gè)概念差不多，都是在關(guān)注不同瀏覽器下的不同體驗(yàn)，關(guān)鍵的區(qū)別是他們所側(cè)重的內(nèi)容，以及這種不同造成的工作流程的差異。
? ? ? ? ? “優(yōu)雅降級(jí)”觀點(diǎn)認(rèn)為應(yīng)該針對(duì)那些最高級(jí)、最完善的瀏覽器來(lái)設(shè)計(jì)網(wǎng)站。
? ? ? ? ? “漸進(jìn)增強(qiáng)”觀點(diǎn)則認(rèn)為應(yīng)關(guān)注于內(nèi)容本身。
11. 對(duì)BFC規(guī)范的理解有哪些？
? ? - [ ] 1. 定義：
? ? ? ? ? BFC(Block formatting context)直譯為"塊級(jí)格式化上下文"。它是一個(gè)獨(dú)立的渲染區(qū)域，只有 Block-level box 參與，它規(guī)定了內(nèi)部的Block-level Box 如何布局，并且與這個(gè)區(qū)域外部毫不相干。
? ? ? ? ? 布局規(guī)則：
? ? ? ? ? A. 內(nèi)部的Box 會(huì)在垂直方向，一個(gè)接一個(gè)地放置。
? ? ? ? ? B. Box垂直方向的距離由 margin決定。屬于同一個(gè) BFC的兩個(gè)相鄰 Box的 margin 會(huì)發(fā)生重疊。
? ? ? ? ? C. 每個(gè)元素的 margin box 的左邊，與包含塊border box 的左邊相接觸(對(duì)于從左往右的格式化，否則相反)。即使存在浮動(dòng)也是如此。
? ? ? ? ? D. BFC 的區(qū)域不會(huì)與 float box 重疊。
? ? ? ? ? E. BFC 就是頁(yè)面上的一個(gè)隔離的獨(dú)立容器，容器里面的子元素不會(huì)影響到外面的元素。反之也如此。
? ? ? ? ? F. 計(jì)算 BFC 的高度時(shí)，浮動(dòng)元素也參與計(jì)算。
? ? ? ? ? 1. 哪些元素會(huì)生成 BFC：
? ? ? ? ? ? A. 根元素
? ? ? ? ? ? B. float 屬性不為 none
? ? ? ? ? ? C. position為 absolute 或 fixed
? ? ? ? ? ? D. display為inline-block， table-cell， table-caption， flex， inline-flex
? ? ? ? ? ? F. overflow 不為 visible
12. 有多少種清除浮動(dòng)的方法？
? ? - [ ] 1. 父級(jí)div定義 height
? ? ? ? ? 原理：父級(jí) div手動(dòng)定義 height，就解決了父級(jí) div無(wú)法自動(dòng)獲取到高度的問(wèn)題。 簡(jiǎn)單、代碼少、容易掌握 ，但只適合高度固定的布局.
? ? ? ? ? 1. 結(jié)尾處加空 div標(biāo)簽 clear：both
? ? ? ? ? 原理：在浮動(dòng)元素的后面添加一個(gè)空div兄弟元素，利用 css 提高的clear：both清除浮動(dòng)，讓父級(jí)div能自動(dòng)獲取到高度 ，如果頁(yè)面浮動(dòng)布局多，就要增加很多空 div，讓人感覺(jué)很 不好 .
? ? ? ? ? 1. 父級(jí)div定義 偽類：after 和 zoom
? ? ? ? ? /清除浮動(dòng)代碼/
? ? ? ? ? .clearfix：after{
? ? ? ? ? content：""；
? ? ? ? ? display：block；
? ? ? ? ? visibility：hidden；
? ? ? ? ? height：0；
? ? ? ? ? line-height：0；
? ? ? ? ? clear：both；
? ? ? ? ? }
? ? ? ? ? .clearfix{zoom：1}
? ? ? ? ? 原理：IE8以上和非 IE瀏覽器才支持：after，原理和方法 2有點(diǎn)類似，zoom(IE專有屬性)
? ? ? ? ? 可解決ie6，ie7 浮動(dòng)問(wèn)題 ，推薦使用，建議定義公共類，以減少CSS 代碼。
? ? ? ? ? 1. 父級(jí)div定義 overflow：hidden
? ? ? ? ? 超出盒子部分會(huì)被隱藏，不推薦使用.
? ? ? ? ? 1. 雙偽元素法：
? ? ? ? ? ? .clearfix：before，.clearfix：after {
? ? ? ? ? ? content： ""；
? ? ? ? ? ? display： block；
? ? ? ? ? ? clear：both；
? ? ? ? ? ? }
? ? ? ? ? ? .clearfix {
? ? ? ? ? ? zoom： 1；}
實(shí)際工作部分
1. HTML常見(jiàn)兼容性問(wèn)題？
? - [ ] 1. 雙邊距BUG float引起的? 使用display
? ? ? ? 1. 3像素問(wèn)題 使用float引起的 使用dislpay:inline -3px?
? ? ? ? 2. 超鏈接hover 點(diǎn)擊后失效? 使用正確的書(shū)寫(xiě)順序 link visited hover active
? ? ? ? 3. Iez-index問(wèn)題 給父級(jí)添加position:relative
? ? ? ? 4. Png透明 使用js代碼改
? ? ? ? 5. Min-height最小高度 ！Important解決’
? ? ? ? 6. select在ie6下遮蓋使用iframe嵌套
? ? ? ? 7. 為什么沒(méi)有辦法定義1px左右的寬度容器（IE6默認(rèn)的行高造成的，使用over:hidden,zoom:0.08line-height:1px）
? ? ? ? 8. IE5-8不支持opacity，解決辦法：
? ? ? ? ? ? .opacity{
? ? ? ? ? ? ? ? opacity: 0.4
? ? ? ? ? ? ? ? filter: alpha(opacity=60); /* for IE5-7 */
? ? ? ? ? ? ? ? -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=60)"; /* for IE 8*/
? ? ? ? ? ? }
? ? ? ? 9. IE6不支持PNG透明背景，解決辦法: IE6下使用gif圖片
2. 描述一個(gè)"reset"的CSS文件并如何使用它。知道`normalize.css`嗎？你了解他們的不同之處？
? - [ ] 重置樣式非常多，凡是一個(gè)前端開(kāi)發(fā)人員肯定有一個(gè)常用的重置CSS文件并知道如何使用它們。他們是盲目的在做還是知道為什么這么做呢？原因是不同的瀏覽器對(duì)一些元素有不同的默認(rèn)樣式，如果你不處理，在不同的瀏覽器下會(huì)存在必要的風(fēng)險(xiǎn)，或者更有戲劇性的性發(fā)生。
? ? ? ? 你可能會(huì)用Normalize來(lái)代替你的重置樣式文件。它沒(méi)有重置所有的樣式風(fēng)格，但僅提供了一套合理的默認(rèn)樣式值。既能讓眾多瀏覽器達(dá)到一致和合理，但又不擾亂其他的東西（如粗體的標(biāo)題）。
? ? ? ? 在這一方面，無(wú)法做每一個(gè)復(fù)位重置。它也確實(shí)有些超過(guò)一個(gè)重置，它處理了你永遠(yuǎn)都不用考慮的怪癖，像HTML的audio元素不一致或line-height不一致。
3. BFC是什么？
? - [ ] BFC（塊級(jí)格式化上下文），一個(gè)創(chuàng)建了新的BFC的盒子是獨(dú)立布局的，盒子內(nèi)元素的布局不會(huì)影響盒子外面的元素。在同一個(gè)BFC中的兩個(gè)相鄰的盒子在垂直方向發(fā)生margin重疊的問(wèn)題
? ? ? ? BFC是指瀏覽器中創(chuàng)建了一個(gè)獨(dú)立的渲染區(qū)域，該區(qū)域內(nèi)所有元素的布局不會(huì)影響到區(qū)域外元素的布局，這個(gè)渲染區(qū)域只對(duì)塊級(jí)元素起作用
4. 怎樣實(shí)現(xiàn)三欄布局，兩邊寬度固定，中間自適應(yīng)？
? - [ ] 圣杯布局? 雙飛翼布局
? ? ? ? ? ? <!DOCTYPE html>
? ? ? ? ? ? <html>
? ? ? ? ? ? <head>
? ? ? ? ? ? ? ? <meta charset="UTF-8">
? ? ? ? ? ? ? ? <title></title>
? ? ? ? ? ? ? ? <style type="text/css">
? ? ? ? ? ? ? ? ? ? * {
? ? ? ? ? ? ? ? ? ? ? ? margin: 0;
? ? ? ? ? ? ? ? ? ? ? ? padding: 0;
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? #left {
? ? ? ? ? ? ? ? ? ? ? ? width: 200px;
? ? ? ? ? ? ? ? ? ? ? ? height: 200px;
? ? ? ? ? ? ? ? ? ? ? ? float: left;
? ? ? ? ? ? ? ? ? ? ? ? background-color: red;
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? #right {
? ? ? ? ? ? ? ? ? ? ? ? width: 150px;
? ? ? ? ? ? ? ? ? ? ? ? height: 200px;
? ? ? ? ? ? ? ? ? ? ? ? float: right;
? ? ? ? ? ? ? ? ? ? ? ? background-color: mistyrose;
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? #middle {
? ? ? ? ? ? ? ? ? ? ? ? height: 200px;
? ? ? ? ? ? ? ? ? ? ? ? margin: 0 150px 0 200px;
? ? ? ? ? ? ? ? ? ? ? ? background-color: saddlebrown;
? ? ? ? ? ? ? ? ? ? ? ? word-break: break-word;
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? </style>
? ? ? ? ? ? </head>
? ? ? ? ? ? <body>
? ? ? ? ? ? <div id="content">
? ? ? ? ? ? ? ? <div id="left">我是左側(cè)內(nèi)容我是左側(cè)內(nèi)容我是左側(cè)內(nèi)容我是左側(cè)內(nèi)容我是左側(cè)內(nèi)容</div>
? ? ? ? ? ? ? ? <div id="right">我是右側(cè)內(nèi)容我是右側(cè)內(nèi)容我是右側(cè)內(nèi)容我是右側(cè)內(nèi)容我是右側(cè)內(nèi)容我是右側(cè)內(nèi)容</div>
? ? ? ? ? ? ? ? <div id="middle">我是中間內(nèi)容我是中間內(nèi)容我是中間內(nèi)容我是中間內(nèi)容我是中間內(nèi)容我是中間內(nèi)容我是中間內(nèi)容我是中間內(nèi)容我是中間內(nèi)容我是中間內(nèi)容</div>
? ? ? ? ? ? </div>
? ? ? ? ? ? </body>
? ? ? ? ? ? </html>
5. 精靈圖(CSS Sprites)的優(yōu)點(diǎn)和缺點(diǎn)
? - [ ] 精靈圖是一種網(wǎng)頁(yè)圖片應(yīng)用處理方式。就是把網(wǎng)頁(yè)中很多小背景圖片整合到一張圖片文件中，再利用CSS的“background-image”，“background-repeat”，“background-position”的組合進(jìn)行背景圖顯示及定位，達(dá)到顯示某一部分背景圖的效果。
? ? ? ? 精靈圖的優(yōu)點(diǎn)：
? ? ? ? 1. 減少圖片的體積，因?yàn)槊總€(gè)圖片都有一個(gè)頭部信息，把多個(gè)圖片放到一個(gè)圖片里，就會(huì)共用同一個(gè)頭部信息，從而減少了字節(jié)數(shù)。
? ? ? ? 2. 減少了網(wǎng)頁(yè)的http請(qǐng)求次數(shù)，從而加快了網(wǎng)頁(yè)加載速度，提高用戶體驗(yàn)。
? ? ? ? 3. 解決了網(wǎng)頁(yè)設(shè)計(jì)師在圖片命名上的困擾，只需對(duì)一張集合的圖片上命名就可以了，不需要對(duì)每一個(gè)小元素進(jìn)行命名，從而提高了網(wǎng)頁(yè)的制作效率。
? ? ? ? 4. 更換風(fēng)格方便，只需要在一張或少?gòu)垐D片上修改圖片的顏色或樣式，整個(gè)網(wǎng)頁(yè)的風(fēng)格就可以改變。維護(hù)起來(lái)更加方便。
? ? ? ? 精靈圖的缺點(diǎn)：
? ? ? ? 1. 在圖片合并的時(shí)候，你要把多張圖片有序的合理的合并成一張圖片，還要留好足夠的空間，防止板塊內(nèi)出現(xiàn)不必要的背景；這些還好，最痛苦的是在寬屏，高分辨率的屏幕下的自適應(yīng)頁(yè)面，你的圖片如果不夠?qū)?，很容易出現(xiàn)背景斷裂；
? ? ? ? 2. 在開(kāi)發(fā)的時(shí)候比較麻煩，你要通過(guò)photoshop或其他工具測(cè)量計(jì)算每一個(gè)背景單元的精確位置，這是針線活，沒(méi)什么難度，但是很繁瑣；
? ? ? ? 3. 在維護(hù)的時(shí)候比較麻煩，如果頁(yè)面背景有少許改動(dòng)，一般就要改這張合并的圖片，無(wú)需改的地方最好不要?jiǎng)?，這樣避免改動(dòng)更多的css，如果在原來(lái)的地方放不下，又只能（最好）往下加圖片，這樣圖片的字節(jié)就增加了，還要改動(dòng)css。
? ? ? ? 4. 精靈圖不能隨意改變大小和顏色。精靈圖改變大小會(huì)失真模糊，降低用戶體驗(yàn)，css3新屬性可以改變精靈圖顏色，但是比較麻煩，并且新屬性有兼容問(wèn)題?，F(xiàn)在一般都是用web字體(圖標(biāo)字體)來(lái)代替精靈圖。.
