WEB前端開發(fā)的十個(gè)知識(shí)點(diǎn)

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

    (Q1) 瀏覽器：IE，Chrome，F(xiàn)ireFox，Safari，Opera。

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

2. 說(shuō)下行內(nèi)元素和塊級(jí)元素的區(qū)別?行內(nèi)塊元素的兼容性使用?(IE8 以下)

    (Q1) 行內(nèi)元素：會(huì)在水平方向排列，不能包含塊級(jí)元素，設(shè)置width無(wú)效，height無(wú)效(可以設(shè)置line-height)，margin上下無(wú)效，padding上下無(wú)效。

    塊級(jí)元素：各占據(jù)一行，垂直方向排列。從新行開始結(jié)束接著一個(gè)斷行。

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

3. 清除浮動(dòng)有哪些方式?比較好的方式是哪一種?

(Q1)

(1)父級(jí)div定義height。

    (2)結(jié)尾處加空div標(biāo)簽clear:both。

    (3)父級(jí)div定義偽類:after和zoom。

    (4)父級(jí)div定義overflow:hidden。

    (5)父級(jí)div定義overflow:auto。

    (6)父級(jí)div也浮動(dòng)，需要定義寬度。

    (7)父級(jí)div定義display:table。

    (8)結(jié)尾處加br標(biāo)簽clear:both。

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

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

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

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

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

5. Doctype作用?標(biāo)準(zhǔn)模式與兼容模式各有什么區(qū)別?

    (Q1) 告知瀏覽器的解析器用什么文檔標(biāo)準(zhǔn)解析這個(gè)文檔。DOCTYPE不存在或格式不正確會(huì)導(dǎo)致文檔以兼容模式呈現(xiàn)。

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

6. HTML5 為什么只需要寫 ?

    HTML5不基于 SGML，因此不需要對(duì)DTD進(jìn)行引用，但是需要doctype來(lái)規(guī)范瀏覽器的行為(讓瀏覽器按照它們應(yīng)該的方式來(lái)運(yùn)行)。

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

7. 頁(yè)面導(dǎo)入樣式時(shí)，使用link和@import有什么區(qū)別?

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

    (2)頁(yè)面被加載的時(shí)，link會(huì)同時(shí)被加載，而@import引用的CSS會(huì)等到頁(yè)面被加載完再加載;

    (3)import是CSS2.1 提出的，只在IE5以上才能被識(shí)別，而link是XHTML標(biāo)簽，無(wú)兼容問(wèn)題。

8. 介紹一下你對(duì)瀏覽器內(nèi)核的理解?

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

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

    JS引擎則：解析和執(zhí)行javascript來(lái)實(shí)現(xiàn)網(wǎng)頁(yè)的動(dòng)態(tài)效果。

最開始渲染引擎和JS引擎并沒(méi)有區(qū)分的很明確，后來(lái)JS引擎越來(lái)越獨(dú)立，內(nèi)核就傾向于只指渲染引擎。

9. html5有哪些新特性?如何處理HTML5新標(biāo)簽的瀏覽器兼容問(wèn)題?如何區(qū)分 HTML 和 HTML5?

(Q1)

    HTML5 現(xiàn)在已經(jīng)不是 SGML 的子集，主要是關(guān)于圖像，位置，存儲(chǔ)，多任務(wù)等功能的增加。

    (1)繪畫 canvas;

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

    (3)本地離線存儲(chǔ) localStorage 長(zhǎng)期存儲(chǔ)數(shù)據(jù)，瀏覽器關(guān)閉后數(shù)據(jù)不丟失;

    (4)sessionStorage 的數(shù)據(jù)在瀏覽器關(guān)閉后自動(dòng)刪除;

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

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

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

(Q2)

    IE8/IE7/IE6支持通過(guò)document.createElement方法產(chǎn)生的標(biāo)簽，

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

    瀏覽器支持新標(biāo)簽后，還需要添加標(biāo)簽?zāi)�認(rèn)的樣式。

    當(dāng)然也可以直接使用成熟的框架、比如html5shim，

10. 簡(jiǎn)述一下你對(duì)HTML語(yǔ)義化的理解?

    用正確的標(biāo)簽做正確的事情。

    html語(yǔ)義化讓頁(yè)面的內(nèi)容結(jié)構(gòu)化，結(jié)構(gòu)更清晰，便于對(duì)瀏覽器、搜索引擎解析;

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

    搜索引擎的爬蟲也依賴于HTML標(biāo)記來(lái)確定上下文和各個(gè)關(guān)鍵字的權(quán)重，利于SEO;

    使閱讀源代碼的人對(duì)網(wǎng)站更容易將網(wǎng)站分塊，便于閱讀維護(hù)理解。

      注：尊重原創(chuàng)文章,轉(zhuǎn)載請(qǐng)注明出處和鏈接 http://www.hebeijilong.cn/news-id-8724.html 違者必究！部分文章來(lái)源于網(wǎng)絡(luò)由培訓(xùn)無(wú)憂網(wǎng)編輯部人員整理發(fā)布,內(nèi)容真實(shí)性請(qǐng)自行核實(shí)或聯(lián)系我們，了解更多相關(guān)資訊請(qǐng)關(guān)注web前端頻道查看更多，了解相關(guān)專業(yè)課程信息您可在線咨詢也可免費(fèi)申請(qǐng)?jiān)囌n。關(guān)注官方微信了解更多：150 3333 6050