前端開發必會的10個知識點

浏覽器：ie，chrome，firefox，safari，opera。

核心：trident，gecko，presto，webkit。

行内元素：會在水準方向排列，不能包含塊級元素，設定width無效，height無效(可以設定line-height)，margin上下無效，padding上下無效。

塊級元素：各占據一行，垂直方向排列。從新行開始結束接着一個斷行。

相容性：display:inline-block;*display:inline;*zoom:1;

父級div定義height。

結尾處加空div标簽clear:both。

父級div定義僞類:after和zoom。

父級div定義overflow:hidden。

父級div定義overflow:auto。

父級div也浮動，需要定義寬度。

父級div定義display:table。

結尾處加br标簽clear:both。

比較好的是第3種方式，好多網站都這麼用。

box-sizing: content-box|border-box|inherit;

content-box:寬度和高度分别應用到元素的内容框。在寬度和高度之外繪制元素的内邊距和邊框(元素預設效果)。

border-box:元素指定的任何内邊距和邊框都将在已設定的寬度和高度内進行繪制。通過從已設定的寬度和高度分别減去邊框和内邊距才能得到内容的寬度和高度。

告知浏覽器的解析器用什麼文檔标準解析這個文檔。doctype不存在或格式不正确會導緻文檔以相容模式呈現。

标準模式的排版和js運作模式都是以該浏覽器支援的最高标準運作。在相容模式中，頁面以寬松的向後相容的方式顯示,模拟老式浏覽器的行為以防止站點無法工作。

html5不基于 sgml，是以不需要對dtd進行引用，但是需要doctype來規範浏覽器的行為（讓浏覽器按照它們應該的方式來運作）。

而html4.01基于sgml,是以需要對dtd進行引用，才能告知浏覽器文檔所使用的文檔類型。

link屬于xhtml标簽，除了加載css外，還能用于定義rss, 定義rel連接配接屬性等作用；而@import是css提供的，隻能用于加載css;

頁面被加載的時，link會同時被加載，而@import引用的css會等到頁面被加載完再加載;

import是css2.1 提出的，隻在ie5以上才能被識别，而link是xhtml标簽，無相容問題。

主要分成兩部分：渲染引擎(layout engineer或renderingengine)和js引擎。

渲染引擎：負責取得網頁的内容（html、xml、圖像等等）、我們組建一大牛裙前面是4七一，整理訊息（例如加入css等），中間是零2七，以及計算網頁的顯示方式，後面是壹武四，是學習的就加，不是學習的請勿打擾。然後會輸出至顯示器或列印機。浏覽器的核心的不同對于網頁的文法解釋會有不同，是以渲染的效果也不相同。所有網頁浏覽器、電子郵件用戶端以及其它需要編輯、顯示網絡内容的應用程式都需要核心。

js引擎則：解析和執行javascript來實作網頁的動态效果。

最開始渲染引擎和js引擎并沒有區分的很明确，後來js引擎越來越獨立，核心就傾向于隻指渲染引擎。

html5 現在已經不是 sgml 的子集，主要是關于圖像，位置，存儲，多任務等功能的增加。

繪畫 canvas;

用于媒介回放的 video 和 audio 元素;

本地離線存儲 localstorage 長期存儲資料，浏覽器關閉後資料不丢失;

sessionstorage 的資料在浏覽器關閉後自動删除;

語意化更好的内容元素，比如 article、footer、header、nav、section;

表單控件，calendar、date、time、email、url、search;

新的技術webworker, websocket, geolocation;

ie8/ie7/ie6支援通過document.createelement方法産生的标簽，可以利用這一特性讓這些浏覽器支援html5新标簽，浏覽器支援新标簽後，還需要添加标簽預設的樣式。當然也可以直接使用成熟的架構、比如html5shim，

<!--[if lt ie 9]>

用正确的标簽做正确的事情。

html語義化讓頁面的内容結構化，結構更清晰，便于對浏覽器、搜尋引擎解析;

即使在沒有樣式css情況下也以一種文檔格式顯示，并且是容易閱讀的;

搜尋引擎的爬蟲也依賴于html标記來确定上下文和各個關鍵字的權重，利于seo;

使閱讀源代碼的人對網站更容易将網站分塊，便于閱讀維護了解。