WEB前端開發必會的十個知識點

1. 常用那幾種瀏覽器測試？有哪些內核(Layout Engine)?

    (Q1) 瀏覽器：IE，Chrome，FireFox，Safari，Opera。

    (Q2) 內核：Trident，Gecko，Presto，Webkit。

2. 說下行內元素和塊級元素的區別？行內塊元素的兼容性使用？（IE8 以下）

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

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

    (Q2) 兼容性：display:inline-block;*display:inline;*zoom:1;

3. 清除浮動有哪些方式？比較好的方式是哪一種？

(Q1)

    （1）父級div定義height。

    （2）結尾處加空div標簽clear:both。

    （3）父級div定義偽類:after和zoom。

    （4）父級div定義overflow:hidden。

    （5）父級div定義overflow:auto。

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

    （7）父級div定義display:table。

    （8）結尾處加br標簽clear:both。

    (Q2) 比較好的是第3種方式，好多網站都這么用。

4. box-sizing常用的屬性有哪些？分別有什么作用？

    (Q1)box-sizing: content-box|border-box|inherit;

    (Q2)content-box:寬度和高度分別應用到元素的內容框。在寬度和高度之外繪制元素的內邊距和邊框(元素默認效果)。

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

5. Doctype作用？標準模式與兼容模式各有什么區別?

    (Q1) 告知瀏覽器的解析器用什么文檔標準解析這個文檔。DOCTYPE不存在或格式不正確會導致文檔以兼容模式呈現。

    (Q2) 標準模式的排版和JS運作模式都是以該瀏覽器支持的最高標準運行。在兼容模式中，頁面以寬松的向后兼容的方式顯示,模擬老式瀏覽器的行為以防止站點無法工作。

6. HTML5 為什么只需要寫 ？

    HTML5不基于 SGML，因此不需要對DTD進行引用，但是需要doctype來規范瀏覽器的行為（讓瀏覽器按照它們應該的方式來運行）。

    而HTML4.01基于SGML,所以需要對DTD進行引用，才能告知瀏覽器文檔所使用的文檔類型。

7. 頁面導入樣式時，使用link和@import有什么區別？

    （1）link屬于XHTML標簽，除了加載CSS外，還能用于定義RSS, 定義rel連接屬性等作用；而@import是CSS提供的，只能用于加載CSS;

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

    （3）import是CSS2.1 提出的，只在IE5以上才能被識別，而link是XHTML標簽，無兼容問題。

8. 介紹一下你對瀏覽器內核的理解？

    主要分成兩部分：渲染引擎(layout engineer或Rendering Engine)和JS引擎。

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

    JS引擎則：解析和執行javascript來實現網頁的動態效果。

    最開始渲染引擎和JS引擎并沒有區分的很明確，后來JS引擎越來越獨立，內核就傾向于只指渲染引擎。

9. html5有哪些新特性？如何處理HTML5新標簽的瀏覽器兼容問題？如何區分 HTML 和 HTML5？

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

    (1)繪畫 canvas;

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

    (3)本地離線存儲 localStorage 長期存儲數據，瀏覽器關閉后數據不丟失;

    (4)sessionStorage 的數據在瀏覽器關閉后自動刪除;

    (5)語意化更好的內容元素，比如 article、footer、header、nav、section;

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

    (7)新的技術webworker, websocket, Geolocation;

(Q2)

    IE8/IE7/IE6支持通過document.createElement方法產生的標簽，

    可以利用這一特性讓這些瀏覽器支持HTML5新標簽，

    瀏覽器支持新標簽后，還需要添加標簽默認的樣式。

    當然也可以直接使用成熟的框架、比如html5shim，

10. 簡述一下你對HTML語義化的理解？

    用正確的標簽做正確的事情。

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

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

    搜索引擎的爬蟲也依賴于HTML標記來確定上下文和各個關鍵字的權重，利于SEO;

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

      注：尊重原創文章,轉載請注明出處和鏈接 http://m.dedgn.cn/news-id-8194.html 違者必究！部分文章來源于網絡由培訓無憂網編輯部人員整理發布,內容真實性請自行核實或聯系我們，了解更多相關資訊請關注web前端頻道查看更多，了解相關專業課程信息您可在線咨詢也可免費申請試課。關注官方微信了解更多：150 3333 6050