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