一、html和css
ie: trident核心
firefox：gecko核心
safari:webkit核心
opera:以前是presto核心，opera現已改用google chrome的blink核心
chrome:blink(基於webkit，google與opera software共同開發)
宣告位於文件中的最前面的位置，處於 標籤之前。此標籤可告知瀏覽器文件使用哪種 html 或 xhtml 規範。（重點：告訴瀏覽器按照何種規範解析頁面）
從ie6開始，引入了standards模式，標準模式中，瀏覽器嘗試給符合標準的文件在規範上的正確處理達到在指定瀏覽器中的程度。
在ie6之前css還不夠成熟，所以ie5等之前的瀏覽器對css的支援很差， ie6將對css提供更好的支援，然而這時的問題就來了，因為有很多頁面是基於舊的布局方式寫的，而如果ie6 支援css則將令這些頁面顯示不正常，如何在即保證不破壞現有頁面，又提供新的渲染機制呢？
在寫程式時我們也會經常遇到這樣的問題，如何保證原來的介面不變，又提供更強大的功能，尤其是新功能不相容舊功能時。遇到這種問題時的乙個常見做法是增加引數和分支，即當某個引數為真時，我們就使用新功能，而如果這個引數 不為真時，就使用舊功能，這樣就能不破壞原有的程式，又提供新功能。ie6也是類似這樣做的，它將dtd當成了這個「引數」，因為以前的頁面大家都不會去寫dtd，所以ie6就假定 如果寫了dtd，就意味著這個頁面將採用對css支援更好的布局，而如果沒有，則採用相容之前的布局方式。這就是quirks模式（怪癖模式，詭異模式，怪異模式）。
區別：總體會有布局、樣式解析和指令碼執行三個方面的區別。
title(tool tip):該屬性為設定該屬性的元素提供建議性的資訊。
strong:粗體強調標籤，強調，表示內容的重要性
em:斜體強調標籤，更強烈強調，表示內容的強調點
「優雅降級」觀點
「優雅降級」觀點認為應該針對那些最高端、最完善的瀏覽器來設計**。而將那些被認為「過時」或有功能缺失的瀏覽器下的測試工作安排在開發周期的最後階段，並把測試物件限定為主流瀏覽器（如 ie、mozilla 等）的前乙個版本。
在這種設計範例下，舊版的瀏覽器被認為僅能提供「簡陋卻無妨 (poor, but passable)」 的瀏覽體驗。你可以做一些小的調整來適應某個特定的瀏覽器。但由於它們並非我們所關注的焦點，因此除了修復較大的錯誤之外，其它的差異將被直接忽略。
「漸進增強」觀點
「漸進增強」觀點則認為應關注於內容本身。
內容是我們建立**的誘因。有的**展示它，有的則收集它，有的尋求，有的操作，還有的**甚至會包含以上的種種，但相同點是它們全都涉及到內容。這使得「漸進增強」成為一種更為合理的設計範例。這也是它立即被 yahoo! 所採納並用以構建其「分級式瀏覽器支援 (graded browser support)」策略的原因所在。
那麼問題來了。現在產品經理看到ie6,7,8網頁效果相對高版本現代瀏覽器少了很多圓角，陰影（css3），要求相容（使用背景，放棄css3），你會如何說服他？
網頁標準和標準制定機構都是為了能讓web發展的更『健康』，開發者遵循統一的標準，降低開發難度，開發成本，seo也會更好做，也不會因為濫用**導致各種bug、安全問題，最終提高**易用性。
sessionstorage用於本地儲存乙個會話（session）中的資料，這些資料只有在同乙個會話中的頁面才能訪問並且當會話結束後資料也隨之銷毀。因此sessionstorage不是一種持久化的本地儲存，僅僅是會話級別的儲存。而localstorage用於持久化的本地儲存，除非主動刪除資料，否則資料是永遠不會過期的。
web storage和cookie的區別
web storage的概念和cookie相似，區別是它是為了更大容量儲存設計的。cookie的大小是受限的，並且每次你請求乙個新的頁面的時候cookie都會被傳送過去，這樣無形中浪費了頻寬，另外cookie還需要指定作用域，不可以跨域呼叫。
除此之外，web storage擁有setitem,getitem,removeitem,clear等方法，不像cookie需要前端開發者自己封裝setcookie，getcookie。但是cookie也是不可以或缺的：cookie的作用是與伺服器進行互動，作為http規範的一部分而存在 ，而web storage僅僅是為了在本地「儲存」資料而生。
png-8，png-24，jpeg，gif，svg。
但是上面的那些都不是面試官想要的最後答案。面試官希望聽到是webp。（是否有關注新技術，新鮮事物）
科普一下webp：webp格式，谷歌（google）開發的一種旨在加快載入速度的格式。壓縮體積大約只有jpeg的2/3，並能節省大量的伺服器頻寬資源和資料空間。facebook ebay等知名**已經開始測試並使用webp格式。
在質量相同的情況下，webp格式影象的體積要比jpeg格式影象小40%。
**微格式（microformats）**是一種讓機器可讀的語義化xhtml詞彙的集合，是結構化資料的開放標準。是為特殊應用而制定的特殊格式。
優點：將智慧型資料新增到網頁上，讓**內容在搜尋引擎結果介面可以顯示額外的提示。（應用範例：豆瓣，有興趣自行google）
答案：dns快取，cdn快取，瀏覽器快取，伺服器快取。
去掉或樣式丟失的時候能讓頁面呈現清晰的結構：
html本身是沒有表現的，我們看到例如派生選擇器（用html標籤申明）
id選擇器（用dom的id申明）
類選擇器（用乙個樣式類名申明）
屬性選擇器（用dom的屬性申明，屬於css2，ie6不支援，不常用，不知道就算了）
除了前3種基本選擇器，還有一些擴充套件選擇器，包括
後代選擇器（利用空格間隔，比如div .a）
群組選擇器（利用逗號間隔，比如p,div,#a）
那麼問題來了，css選擇器的優先順序是怎麼樣定義的？
基本原則：
一般而言，選擇器越特殊，它的優先順序越高。也就是選擇器指向的越準確，它的優先順序就越高。
複雜的計算方法：
用1表示派生選擇器的優先順序div.test1 .span var 優先順序 1+10 +10 +1用10表示類選擇器的優先順序
用100標示id選擇器的優先順序
span#*** .songs li 優先順序1+100 + 10 + 1
#*** li 優先順序 100 +1
那麼問題來了，看下列**，
標籤內的文字是什麼顏色的？
123
最基本的：
設定display屬性為none，或者設定visibility屬性為hidden
技巧性：
設定寬高為0，設定透明度為0，設定z-index位置在-1000
練習鞏固知識點
強制型別轉換 char a int b float c double d 執行語句 c a b c d 後，變數c的資料型別是 由算術表示式表示為c語言的表示式 31.6 8 1 7 12 華氏度和攝氏度的關係是 c 5 f 32 9 c 5 f 32 9 自增運算子 為什麼 結果是12呢？incl...
迴圈知識點鞏固
迴圈結構的程式設計是面向過程的程式設計課程的核心部分，掌握好迴圈結構的程式設計技術對學好此類課程至關重要。小白已經經歷了利用計算機使用和掌握了程式設計中選擇結構，感悟了程式設計是其中的關鍵環節，對程式設計已經產生一定興趣，但由於在程式設計過程中，會出現重複的進行一些相同功能語句的編寫 為了讓程式設計...
前端知識點
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 知識點 ul li 中預設選擇class active firstli rem...