###前端開發面試知識點大綱:
##HTML&CSS:
對Web標準的理解、瀏覽器核心差異、相容性、hack、CSS基本功:佈局、盒子模型、選擇器優先順序及使用、HTML5、CSS3、移動端適應
JavaScript:
資料型別、物件導向、繼承、閉包、外掛、作用域、跨域、原型鏈、模組化、自定義事件、記憶體洩漏、事件機制、非同步裝載回撥、模板引擎、Nodejs、JSON、ajax等。
其他:
HTML
Doctype 作用? 嚴格模式與混雜模式如何區分?它們有何意義?
(1)、<!DOCTYPE> 宣告位於文件中的最前面,處於 標籤之前。告知瀏覽器的解析器,用什麼文件型別 規範來解析這個文件。 //在此我向大家推薦一個前端全棧開發交流圈:619586920 突破技術瓶頸,提升思維能力 (2)、嚴格模式的排版和 JS 運作模式是 以該瀏覽器支援的最高標準執行。 (3)、在混雜模式中,頁面以寬鬆的向後相容的方式顯示。模擬老式瀏覽器的行為以防止站點無法工作。 (4)、DOCTYPE不存在或格式不正確會導致文件以混雜模式呈現。
行內元素有哪些?塊級元素有哪些? 空(void)元素有那些?
(1)CSS規範規定,每個元素都有display屬性,確定該元素的型別,每個元素都有預設的display值, 比如div預設display屬性值為“block”,成為“塊級”元素;塊級元素獨佔一行。 span預設display屬性值為“inline”,是“行內”元素。 行內元素處於同一行。 (2)行內元素有:a b span img input select strong(強調的語氣) 塊級元素有:div ul ol li dl dt dd h1 h2 h3 h4 h5 h6 p 等 //在此我向大家推薦一個前端全棧開發交流圈:619586920 突破技術瓶頸,提升思維能力 (3)知名的空元素:
<br> <hr> <img> <input> <link> <meta> 複製程式碼
鮮為人知的是:
<area> <base> <col> <command> <embed> <keygen> <param> <source> <track> <wbr> 複製程式碼
link 和@import 的區別是?
(1)link屬於XHTML標籤,而@import是CSS提供的; (2)頁面被載入的時,link會同時被載入,而@import引用的CSS會等到頁面被載入完再載入; (3)import只在IE5以上才能識別,而link是XHTML標籤,無相容問題; (4)link方式的樣式的權重 高於@import的權重. 複製程式碼
瀏覽器的核心分別是什麼?
IE瀏覽器的核心Trident、Mozilla的Gecko、Chrome的Blink(WebKit的分支)、Opera核心原為Presto,現為Blink;
常見相容性問題?
##css
1 .bb{ 2 background-color:#f1ee18; /*所有識別*/ 3 .background-color:#00deff\9; /*IE6、7、8識別*/ 5 +background-color:#a200ff; /*IE6、7識別*/ 6 _background-color:#1e0bd1; /*IE6識別*/ 7 } 複製程式碼
1.IE下,可以使用獲取常規屬性的方法來獲取自定義屬性, 也可以使用getAttribute()獲取自定義屬性; Firefox下,只能使用getAttribute()獲取自定義屬性. 解決方法:統一通過getAttribute()獲取自定義屬性.
2.IE下,event物件有x,y屬性,但是沒有pageX,pageY屬性; Firefox下,event物件有pageX,pageY屬性,但是沒有x,y屬性. 解決方法:(條件註釋)缺點是在IE瀏覽器下可能會增加額外的HTTP請求數。
3.Chrome 中文介面下預設會將小於 12px 的文字強制按照 12px 顯示, 可通過加入 CSS 屬性 -webkit-text-size-adjust: none; 解決.
4.超連結訪問過後hover樣式就不出現了 被點選訪問過的超連結樣式不在具有hover和active了, 解決方法是改變CSS屬性的排列順序: L-V-H-A : a:link { } ,a:visited { } ,a:hover { } ,a:active { } ; HTML5有哪些新特性、移除了那些元素?如何處理html5新標籤的瀏覽器相容問題?如何區分 HTML 和 Html5?
1.HTML5 現在已經不是 SGML 的子集,主要是關於影象,位置,儲存,多工等功能的增加。
2.繪畫 canvas
用於媒介回放的 video 和 audio 元素 本地離線儲存 localStorage 長期儲存資料,瀏覽器關閉後資料不丟失; sessionStorage 的資料在瀏覽器關閉後自動刪除. 語意化更好的內容元素,比如 article、footer、header、nav、section 表單控制元件,calendar、date、time、email、url、search 新的技術webworker, websocket, Geolocation
3.移除的元素
純表現的元素:basefont,big,center,font, s,strike,tt,u; 對可用性產生負面影響的元素:frame,frameset,noframes;
支援HTML5新標籤:
IE8/IE7/IE6支援通過document.createElement方法產生的標籤, 可以利用這一特性讓這些瀏覽器支援HTML5新標籤, 瀏覽器支援新標籤後,還需要新增標籤預設的樣式: 當然最好的方式是直接使用成熟的框架、使用最多的是html5shiv框架
如何區分: DOCTYPE宣告新增的結構元素\功能元素 語義化的理解? 1.用正確的標籤做正確的事情! 2.html語義化就是讓頁面的內容結構化,便於對瀏覽器、搜尋引擎解析; 3.在沒有樣式CCS情況下也以一種文件格式顯示,並且是容易閱讀的。 4.搜尋引擎的爬蟲依賴於標記來確定上下文和各個關鍵字的權重,利於 SEO。 5.使閱讀原始碼的人對網站更容易將網站分塊,便於閱讀維護理解。 HTML5的離線儲存? localStorage 長期儲存資料,瀏覽器關閉後資料不丟失; sessionStorage 資料在瀏覽器關閉後自動刪除。 HTML5中新增加的很多標籤(如: