# 第一天
# 一. 網(wǎng)頁瀏覽器及瀏覽器內(nèi)核
- 1.IE:trident
- 2.Firefox:gecko
- 3.Safari:webkit
- 4.Opera:before-presto;now-Blink(developed with Google)
- 5.Chrome:Blink(base on Webkit)
# 二. <!Doctype html/xhtml>
- <!Doctype html/xhtml>聲明位于文檔中的最前面的位置,<html>標(biāo)簽前.
- **告知瀏覽器文檔使用的是html/xhtml規(guī)范的**
# 三. div+css的布局與table布局比較
- 1.div+css的布局:頁面加載速度更快,結(jié)構(gòu)化清晰,頁面顯示簡潔
- 2.表現(xiàn)與結(jié)構(gòu)相分離
- 3.易于優(yōu)化(seo),搜索引擎更友好,排名更容易靠前
> Seo：Search Engine Optimization的縮寫， 翻譯成中文就是“搜索引擎優(yōu)化"
就是通過一定的方法在網(wǎng)站內(nèi)外發(fā)布文章、交換連接等，最終達到某個關(guān)鍵詞在搜索引擎上獲得好的排名。
# img的alt與title異同/em與strong異同
- 1. alt:圖片**加載失敗**時，顯示在網(wǎng)頁上的替代文字
- 2. title:鼠標(biāo)放上面時顯示的文字
- 3. strong:粗體強調(diào)標(biāo)簽，強調(diào)，表示內(nèi)容的重要性
- 4. em:斜體強調(diào)標(biāo)簽，更強烈強調(diào)，表示內(nèi)容的強調(diào)點
# 五. 漸進增強/優(yōu)雅降級
- 1. **漸進增強** progressive enhancement：針對低版本瀏覽器進行構(gòu)建頁面，保證最基本的功能，然后再針對高級瀏覽器進行效果、交互等改進和追加功能達到更好的用戶體驗。**(由基本到強大)(從低到高)**
- 2. **優(yōu)雅降級** graceful degradation：一開始就構(gòu)建完整的功能，然后再針對低版本瀏覽器進行兼容。**(由完整到精簡)(從高到底)**
> 區(qū)別：
>
> 1.優(yōu)雅降級是從復(fù)雜的現(xiàn)狀開始，并試圖減少用戶體驗的供給，而漸進增強則是從一個非常基礎(chǔ)的，能夠起作用的版本開始，并不斷擴充，以適應(yīng)未來環(huán)境的需要。
> 2.降級（功能衰減）意味著往回看；而漸進增強則意味著朝前看，同時保證其根基處于安全地帶。
# 六. 利用多個域名來存儲網(wǎng)站資源
- 1. CDN(服務(wù)器)緩存更方便
- 2. 突破瀏覽器并發(fā)限制
- 3. 節(jié)約cookie帶寬
- 4. 節(jié)約主域名數(shù),優(yōu)化頁面響應(yīng)速度
- 5. 防止不必要的安全問題
> Cookie:瀏覽網(wǎng)頁時網(wǎng)站服務(wù)器放在客戶端的txt文件.存儲一些訪問這個網(wǎng)站有關(guān)的東西;當(dāng)下次訪問時,Cookie會記住上次訪問的狀態(tài)會設(shè)置,讓服務(wù)器針對性的發(fā)送頁面相關(guān)內(nèi)容.
> Cookie包括:
> 1. 所訪問網(wǎng)站的域名(domain name)/訪問開始的時間/訪問者的IP地址--客戶端信息
> 2. 訪問者關(guān)于這個網(wǎng)站的設(shè)置
# 七. 對網(wǎng)頁標(biāo)準(zhǔn)和標(biāo)準(zhǔn)制定機構(gòu)重要性的理解
- 1. 網(wǎng)頁標(biāo)準(zhǔn)和標(biāo)準(zhǔn)制定機構(gòu)都是為了能讓web發(fā)展的更‘健康’，
- 2. 開發(fā)者遵循統(tǒng)一的標(biāo)準(zhǔn)，降低開發(fā)難度，開發(fā)成本，SEO也會更好做，
- 3. 不會因為濫用代碼導(dǎo)致各種BUG、安全問題，最終提高網(wǎng)站易用性。
# 八. cookies，sessionStorage和localStorage的區(qū)別
- 共同點：都是保存在瀏覽器端，且同源的。
- 區(qū)別：
> 1.cookie數(shù)據(jù)始終在同源的http請求中攜帶（即使不需要），**即cookie在瀏覽器和服務(wù)器間來回傳遞。**,sessionStorage和localStorage**不會自動把數(shù)據(jù)發(fā)給服務(wù)器，僅在本地保存。**
> 2.cookie數(shù)據(jù)還有路徑（path）的概念，**可以限制cookie只屬于某個路徑下**。cookie還需要指定作用域，不可以跨域調(diào)用。
> 3.**存儲大小限制也不同**:
>
> **cookie數(shù)據(jù)不能超過4k**，同時因為每次http請求都會攜帶cookie(如會話標(biāo)識)。
>
> **sessionStorage和localStorage** 雖然也有存儲大小的限制，但比cookie大得多，**可以達到5M或更大。**
> 4.**數(shù)據(jù)有效期不同**，
>
> sessionStorage：僅在當(dāng)前瀏覽器窗口關(guān)閉前有效，自然也就不可能持久保持；
>
> localStorage：始終有效，窗口或瀏覽器關(guān)閉也一直保存，因此用作持久數(shù)據(jù)；
>
> cookie只在設(shè)置的cookie過期時間之前一直有效，即使窗口或瀏覽器關(guān)閉。
> **5.作用域不同**，
>
> sessionStorage不在不同的瀏覽器窗口中共享，即使是同一個頁面；
>
> localStorage 在所有同源窗口中都是共享的；
>
> cookie也是在所有同源窗口中都是共享的。
-? 插入內(nèi)容:
-? Web Storage 支持事件通知機制，可以將數(shù)據(jù)更新的通知發(fā)送給監(jiān)聽者。Web Storage 的 api 接口使用更方便。為了在本地“存儲”數(shù)據(jù)而生。
# 九. src與href的區(qū)別
> src用于替換當(dāng)前元素，href用于在當(dāng)前文檔和引用資源之間確立聯(lián)系。
- 1. src簡介
> source的縮寫，**指向外部資源的位置**，指向的內(nèi)容將會嵌入到文檔中當(dāng)前標(biāo)簽所在位置；在請求src資源時會將其指向的資源下載并應(yīng)用到文檔內(nèi)，例如js腳本，img圖片和frame等元素。
>
? ? ? ? <script src =”js.js”></script>
> **當(dāng)瀏覽器解析到該元素時，會暫停其他資源的下載和處理，直到將該資源加載、編譯、執(zhí)行完畢**，圖片和框架等元素也如此，類似于將所指向資源嵌入當(dāng)前標(biāo)簽內(nèi)。這也是為什么將js腳本放在底部而不是頭部。
- 2. href簡介
> Hypertext Reference的縮寫，**指向網(wǎng)絡(luò)資源所在位置**，建立和當(dāng)前元素（錨點）或當(dāng)前文檔（鏈接）之間的鏈接，如果我們在文檔中添加
>
? ? ? ? <link href=”common.css” rel=”stylesheet”/>
> 那么瀏覽器會識別該文檔為css文件，就**會并行下載資源并且不會停止對當(dāng)前文檔的處理**。這也是為什么建議使用link方式來加載css，而不是使用@import方式。
# 十. 網(wǎng)頁制作會用到的圖片格式
- png-8，png-24，jpeg，gif，svg , Webp
> Webp簡介
- WebP格式，谷歌（google）開發(fā)的一種旨在加快圖片加載速度的圖片格式。圖片壓縮體積大約只有JPEG的2/3，并能節(jié)省大量的服務(wù)器帶寬資源和數(shù)據(jù)空間。Facebook Ebay等知名網(wǎng)站已經(jīng)開始測試并使用WebP格式。
**在質(zhì)量相同的情況下，WebP格式圖像的體積要比JPEG格式圖像小40%**
---
# 第二天
# 十一. 微格式以及在前端構(gòu)建中應(yīng)該考慮微格式
> **Microformat**，是一種**對Web網(wǎng)頁進行語義注解的方法**，這種方法依托于標(biāo)準(zhǔn)的Web頁面寫作技術(shù)，例如，XHTML，這樣引入語義信息對瀏覽器等所有現(xiàn)存的Web技術(shù)沖擊最小。采用Microformat的Web頁面，在XHTML文檔中給一些標(biāo)簽（Tag）增加一些屬性（attribute），這些屬性對信息的語義結(jié)構(gòu)進行注解，處理XHTML文檔的軟件，例如，瀏覽器等，如果不認(rèn)識這些屬性可以跳過，并不造成任何不良影響。
- **優(yōu)點**：將智能數(shù)據(jù)添加到網(wǎng)頁上，讓網(wǎng)站內(nèi)容在搜索引擎結(jié)果界面可以顯示額外的提示。（應(yīng)用范例：豆瓣，有興趣自行g(shù)oogle）
# 十二. 在css/js代碼上線之后開發(fā)人員經(jīng)常會優(yōu)化性能，從用戶刷新網(wǎng)頁開始，一次js請求一般情況下有哪些地方會有緩存處理？
- dns緩存
- cdn緩存
- 瀏覽器緩存
- 服務(wù)器緩存。
# 十三. 一個頁面上有大量的圖片（大型電商網(wǎng)站），加載很慢，你有哪些方法**優(yōu)化這些圖片的加載**，給用戶更好的體驗
- 圖片懶加載:
> 在頁面上的未可視區(qū)域可以添加一個滾動條事件，**判斷圖片位置與瀏覽器頂端的距離與頁面的距離**，如果前者小于后者，優(yōu)先加載
- 幾種情況:
> 1.如果為幻燈片、相冊等，可以使用圖片預(yù)加載技術(shù)，將當(dāng)前展示圖片的前一張和后一張優(yōu)先下載。
> 2.如果圖片為css圖片，可以使用CSSsprite，SVGsprite，Iconfont、Base64等技術(shù)。
> 3.如果圖片過大，可以使用特殊編碼的圖片，加載時會先加載一張壓縮的特別厲害的縮略圖，以提高用戶體驗。
> 4.如果圖片展示區(qū)域小于圖片的真實大小，則因在服務(wù)器端根據(jù)業(yè)務(wù)需要先行進行圖片壓縮，圖片壓縮后大小與展示一致。
# 十四. 談?wù)勔郧岸私嵌瘸霭l(fā)做好SEO需要考慮什么？
- 1. 了解搜索引擎如何抓取網(wǎng)頁和如何索引網(wǎng)頁
- 2. 你需要知道一些搜索引擎的基本工作原理，各個搜索引擎之間的區(qū)別，搜索機器人（SE robot 或叫 web crawler）如何進行工作，搜索引擎如何對搜索結(jié)果進行排序等等。
- 3. Meta標(biāo)簽優(yōu)化
> 主題（Title)，網(wǎng)站描述(Description)，和關(guān)鍵詞（Keywords）。
> (還有一些其它的隱藏文字比如Author（作者），Category（目錄），Language（編碼語種）等。)
# 十五. 有哪項方式可以對一個DOM設(shè)置它的CSS樣式？
- 1.外部樣式表，引入一個外部css文件
- 2.內(nèi)部樣式表，將css代碼放在 <head> 標(biāo)簽內(nèi)部
- 3.內(nèi)聯(lián)樣式，將css樣式直接定義在 HTML 元素內(nèi)部
# 十六. CSS中可以通過哪些屬性定義，使得一個DOM元素不顯示在瀏覽器可視范圍內(nèi)？
- 1.基本：
> 設(shè)置display屬性為none，或者設(shè)置visibility屬性為hidden
- 2.技巧性：
> 設(shè)置寬高為0，設(shè)置透明度為0，設(shè)置z-index位置在-1000em
# 十七. 7. 超鏈接訪問過后hover樣式就不出現(xiàn)的問題是什么？如何解決？
- 被點擊訪問過的超鏈接樣式不再具有hover和active了,解決方法是改變CSS屬性的排列順序: L-V-H-A**（link,visited,hover,active）**
> Love hate? 就愛恨準(zhǔn)則
# 十八. Css Hack/ie6,7,8的hack分別是什么？
- 針對不同的瀏覽器寫不同的CSS code的過程，就是CSS hack。
- 示例如下：
? ? ? ? .test{?
? ? ? ? ? ? width:300px;?
? ? ? ? ? ? height:300px;?
? ? ? ? ? ? background-color:blue;? ? ? /*firefox*/
? ? ? ? ? ? background-color:red\9;? ? ? /*all ie*/
? ? ? ? ? ? background-color:yellow;? ? /*ie8*/
? ? ? ? ? ? background-color:pink;? ? ? ? /*ie7*/
? ? ? ? ? ? background-color:orange;? ? ? /*ie6*/? ?
? ? ? ? }?
? ? ? ? :root #test {
? ? ? ? ? ? background-color:purple\9;
? ? ? ? }? /*ie9*/
# 十九. 9. 行內(nèi)元素和塊級元素的具體區(qū)別/行內(nèi)元素的padding和margin可設(shè)置嗎？
- 1. 塊級元素(block)特性：
> 總是獨占一行，表現(xiàn)為另起一行開始，而且其后的元素也必須另起一行顯示;寬度(width)、高度
(height)、內(nèi)邊距(padding)和外邊距(margin)都可控制;
- 2. 內(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è)置的），就是里面文字或圖片的大小。
- 注釋:瀏覽器還有默認(rèn)的天生**inline-block元素**（擁有內(nèi)在尺寸，可設(shè)置高寬，但不會自動換行）
? ? ? ? input 、img 、button 、texterea 、label。
# 二十.rgba()和opacity的透明效果有什么不同？
- 相同點:
> rgba()和opacity都能實現(xiàn)透明效果，
- 不同點:
> opacity作用于元素，以及元素內(nèi)的所有內(nèi)容的透明度，
>
> rgba()只作用于元素的顏色或其背景色。
>
> **（設(shè)置rgba透明的元素的子元素不會繼承透明效果！）**
---
# 第三天
# 二十一. css中可以讓文字在垂直和水平方向上重疊的兩個屬性是什么？
- 垂直方向：line-height
- 水平方向：letter-spacing
- 關(guān)于letter-spacing的妙用
> 可以用于消除inline-block元素間的換行符空格間隙問題。
? ? <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
? ? <html>
? ? ? <head>
? ? ? <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
? ? ? <title>CSS letter-spacing 屬性示例</title>
? ? ? <style type="text/css" media="all">
? ? .ls3px
? ? {
? ? letter-spacing: 3px;
? ? }
? ? .lsn3px
? ? {
? ? letter-spacing: -3px;
? ? }
? ? ? </style>
? ? ? </head>
? ? ? <body>
? ? ? <p class="ls3px">夢之都 <a >CSS教程</a>,<strong><a >letter-spacing</a></strong>示例,All i have to do, is learn CSS.(仔細(xì)看是字母之間的距離,不是空格本身的寬度,參考<a >word-spacing</a>屬性示例.)</p>
? ? ? <p class="lsn3px">夢之都 <a >CSS教程</a>,<strong><a >letter-spacing</a></strong>示例,All i have to do, is learn CSS.</p>
? ? ? </body>
? ? </html>
# 二十二. px和em的區(qū)別。
- 相同點:
> px和em都是長度單位，
- 區(qū)別:
> 1. px的值是固定的，指定是多少就是多少，計算比較容易。
> 2. em得值不是固定的，并且em會繼承父級元素的字體大小。
- (瀏覽器的默認(rèn)字體高都是16px。所以未經(jīng)調(diào)整的瀏覽器都符合: 1em=16px。那么12px=0.75em, 10px=0.625em。)
# 二十三. Sass、LESS是什么？大家為什么要使用他們？
- CSS預(yù)處理器。他是CSS上的一種抽象層。他們是一種特殊的語法/語言編譯成CSS。
> 例如Less是一種動態(tài)樣式語言. 將CSS賦予了動態(tài)語言的特性，如變量，繼承，運算， 函數(shù). LESS 既可以在客戶端上運行 (支持IE 6+, Webkit, Firefox)，也可一在服務(wù)端運行 (借助 Node.js)。
#### 為什么要使用它們？
- 1. 結(jié)構(gòu)清晰，便于擴展。
- 2. 可以方便地屏蔽瀏覽器私有語法差異。這個不用多說，封裝對瀏覽器語法差異的重復(fù)處理，減少無意義的機械勞動。
- 3. 可以輕松實現(xiàn)多重繼承。
- 4. 完全兼容 CSS 代碼，可以方便地應(yīng)用到老項目中。
- 5. LESS 只是在 CSS 語法上做了擴展，所以老的 CSS 代碼也可以與 LESS 代碼一同編譯。
# 二十四. display:none與visibility:hidden的區(qū)別是什么？
- display : 隱藏對應(yīng)的元素但不擠占該元素原來的空間。
- visibility: 隱藏對應(yīng)的元素并且擠占該元素原來的空間。
- 區(qū)別
> a: 使用CSS display:none屬性后，HTML元素（對象）的寬度、高度等各種屬性值都將**“丟失”**
>
> b: 而使用visibility:hidden屬性后，HTML元素（對象）僅僅是在視覺上看不見（完全透明），而它所占據(jù)的空間位置仍然存在。
# 二十五. CSS中l(wèi)ink和@import的區(qū)別是：
- Link屬于html標(biāo)簽，而@import是CSS中提供的。在頁面加載的時候，link會同時被加載;
- @import引用的CSS會在頁面加載完成后才會加載引用的CSS。
- @import只有在ie5以上才可以被識別，而link是html標(biāo)簽，不存在瀏覽器兼容性問題
- Link引入樣式的權(quán)重大于@import的引用（@import是將引用的樣式導(dǎo)入到當(dāng)前的頁面中）
# 二十六. 簡介盒子模型(具體圖例見筆記)
#### CSS的盒子模型有兩種：IE盒子模型、標(biāo)準(zhǔn)的W3C盒子模型模型
#### 盒模型：內(nèi)容、內(nèi)邊距、外邊距（一般不計入盒子實際寬度）、邊框
# 二十七. 為什么要初始化樣式？
- 由于瀏覽器兼容的問題，不同的瀏覽器對標(biāo)簽的默認(rèn)樣式值不同，若不初始化會造成不同瀏覽器之間的顯示差異
> 注意內(nèi)容:(但是初始化CSS會對搜索引擎優(yōu)化造成小影響,代碼過多會影響速度)
# 二十八. html語義化是什么？
- 1. 當(dāng)頁面樣式加載失敗的時候能夠讓頁面呈現(xiàn)出清晰的結(jié)構(gòu)
- 2. 有利于seo優(yōu)化，利于被搜索引擎收錄（更便于搜索引擎的爬蟲程序來識別）
- 3. 便于項目的開發(fā)及維護，使html代碼更具有可讀性，便于其他設(shè)備解析。
# 二十九. Doctype的作用？嚴(yán)格模式與混雜模式的區(qū)別？
#### <!DOCTYPE>用于告知瀏覽器該以何種模式來渲染文檔
- 嚴(yán)格模式下：頁面排版及JS解析是以該瀏覽器支持的最高標(biāo)準(zhǔn)來執(zhí)行
- 混雜模式：不嚴(yán)格按照標(biāo)準(zhǔn)執(zhí)行，主要用來兼容舊的瀏覽器，向后兼容
> HTML是一種基本的WEB網(wǎng)頁設(shè)計語言，
> XHTML是一個基于XML的置標(biāo)語言，看起來與HTML有些相象
- 區(qū)別:
- 1. XHTML就是一個扮演著類似HTML的角色的XML，所以，本質(zhì)上說，XHTML是一個過渡技術(shù)，結(jié)合了XML(有幾分)的強大功能及HTML(大多數(shù))的簡單特性。
- 2. HTML 和 XHTML 的區(qū)別簡單來說，XHTML 可以認(rèn)為是 XML 版本的 HTML，為符合 XML 要求，XHTML 語法上要求更嚴(yán)謹(jǐn)些。
> 以下是 XHTML 相對 HTML 的幾大區(qū)別：
>
> XHTML 要求正確嵌套
>
> XHTML 所有元素必須關(guān)閉
>
> XHTML 區(qū)分大小寫
> XHTML 屬性值要用雙引號
> XHTML 用 id 屬性代替 name 屬性
> XHTML 特殊字符的處理
# 三十. IE的雙邊距BUG：塊級元素float后設(shè)置橫向margin，ie6顯示的margin比設(shè)置的大兩倍。
- 滿足下面這三個條件時，就會出現(xiàn)這個BUG：
> 1、要為塊狀元素；
>
> 2、要左側(cè)浮動；
>
> 3、要有左外邊距（margin-left）。
>
- 解決這個BUG，只需在相應(yīng)的塊狀元素的CSS屬性中加入“display:inline;”。
