面試答辯

1. 你做的頁(yè)面在哪些流覽器測(cè)試過(guò)?這些瀏覽器的內(nèi)核分別是什么? ?

Trident 內(nèi)核:IE 系列

Gecko 內(nèi)核:Firefox

Webkit 內(nèi)核:Safari

Blink 內(nèi)核:是基于 Webkit 內(nèi)核的子項(xiàng)目,使用的瀏覽器有:

Chrome/opera 等除 IE、Firefox、Safari 之外的幾乎所有瀏覽器

幾乎所有國(guó)產(chǎn)雙內(nèi)核瀏覽器(Trident/Blink)如 360、獵豹、qq、百度等

?2. 個(gè) 每個(gè) L HTML 文件里開頭都有個(gè)很重要的東西, Doctype ,知道這是干什么的

嗎?

文檔聲明。

聲明位于文檔中的最前面的位置,處于? 標(biāo)簽之前。此標(biāo)簽可告知瀏覽器文檔使用

哪種 HTML 或 XHTML 規(guī)范。(重點(diǎn):告訴瀏覽器按照何種規(guī)范解析頁(yè)面)

IE 下如不書寫文檔聲明會(huì)使用怪異模式解析網(wǎng)頁(yè)導(dǎo)致一系列 CSS 兼容性問(wèn)題。

?3. s div+css 的布局較 e table 布局有什么優(yōu)點(diǎn)?

正常場(chǎng)景一般都適用 div+CSS 布局,優(yōu)點(diǎn):

結(jié)構(gòu)與樣式分離

代碼語(yǔ)義性好

更符合 HTML 標(biāo)準(zhǔn)規(guī)范

SEO 友好

Table 布局的適用場(chǎng)景:

某種原因不方便加載外部 CSS 的場(chǎng)景,例如郵件正文,此時(shí)用 table 布局可以在無(wú) css 情況下保持頁(yè)面布

4. 你能描述一下漸進(jìn)增強(qiáng)和優(yōu)雅降級(jí)之間的不同嗎??

漸進(jìn)增強(qiáng) progressive enhancement:針對(duì)低版本瀏覽器進(jìn)行構(gòu)建頁(yè)面,保證最基本的功能,然后再針

對(duì)高級(jí)瀏覽器進(jìn)行效果、交互等改進(jìn)和追加功能達(dá)到更好的用戶體驗(yàn)。

優(yōu)雅降級(jí) graceful degradation:一開始就構(gòu)建完整的功能,然后再針對(duì)低版本瀏覽器進(jìn)行兼容。

5. 請(qǐng)談一下你對(duì)網(wǎng)頁(yè)標(biāo)準(zhǔn)和標(biāo)準(zhǔn)制定機(jī)構(gòu)重要性的理解。

網(wǎng)頁(yè)標(biāo)準(zhǔn)和標(biāo)準(zhǔn)制定機(jī)構(gòu)都是為了能讓 web 發(fā)展的更‘健康’,開發(fā)者遵循統(tǒng)一的標(biāo)準(zhǔn),降低開發(fā)難度,開發(fā)成本,SEO 也會(huì)更好做,也不會(huì)因?yàn)闉E用代碼導(dǎo)致各種 BUG、安全問(wèn)題,最終提高網(wǎng)站易用性。

6. 為什么利用多個(gè)域名來(lái)存儲(chǔ)網(wǎng)站資源會(huì)更有效?

CDN 緩存更方便

突破瀏覽器并發(fā)限制

節(jié)約 cookie 帶寬

節(jié)約主域名的連接數(shù),優(yōu)化頁(yè)面響應(yīng)速度

防止不必要的安全問(wèn)題

7.你如何理解 L HTML 結(jié)構(gòu)的語(yǔ)義化?

HTML 結(jié)構(gòu)語(yǔ)義化:

更符合 W3C 統(tǒng)一的規(guī)范標(biāo)準(zhǔn),是技術(shù)趨勢(shì)。

沒(méi)有樣式時(shí)瀏覽器的默認(rèn)樣式也能讓頁(yè)面結(jié)構(gòu)很清晰。

對(duì)功能障礙用戶友好。屏幕閱讀器(如果訪客有視障)會(huì)完全根據(jù)你的標(biāo)記來(lái)“讀”你的網(wǎng)頁(yè)。

對(duì)其他非主流終端設(shè)備友好。例如機(jī)頂盒、PDA、各種移動(dòng)終端。

對(duì) SEO 友好。

8.有哪項(xiàng)方式可以對(duì)一個(gè) DOM 設(shè)置它的CSS 樣式?

外部樣式表,引入一個(gè)外部 css 文件

內(nèi)部樣式表,將 css 代碼放在? 標(biāo)簽內(nèi)部

內(nèi)聯(lián)樣式,將 css 樣式直接定義在 HTML 元素內(nèi)部

9.CSS 中可以通過(guò)哪些屬性定義,使得一個(gè) DOM 元素不顯示在瀏覽器可視范

圍內(nèi)?

設(shè)置 display 屬性為 none,或者設(shè)置 visibility 屬性為 hidden

設(shè)置寬高為 0,設(shè)置透明度為 0,設(shè)置 z-index 位置在-1000em

設(shè)置 text-indent:-9999px;

10.超鏈接訪問(wèn)過(guò)后 r hover 樣式就不出現(xiàn)的問(wèn)題是什么?如何解決?

答案:被點(diǎn)擊訪問(wèn)過(guò)的超鏈接樣式不再具有 hover 和 active 了,解決方法是改變 CSS 屬性的排列順

序: L-V-H-A(link,visited,hover,active)

11.rgba()和 和 y opacity 的透明效果有什么不同?

rgba()和 opacity 都能實(shí)現(xiàn)透明效果,但最大的不同是 opacity 作用于元素,以及元素內(nèi)的所有內(nèi)容的透

明度,

而 rgba()只作用于元素的顏色或其背景色。(設(shè)置 rgba 透明的元素的子元素不會(huì)繼承透明效果?。?/p>

12. ?px 和 和 em 的區(qū)別。

px 和 em 都是長(zhǎng)度單位,區(qū)別是:

px 值固定,容易計(jì)算。

em 值不固定,是相對(duì)單位,其相對(duì)應(yīng)父級(jí)元素的字體大小會(huì)調(diào)整

13. display:none 與 ?visibility:hidden 的區(qū)別是什么?

display : 隱藏對(duì)應(yīng)的元素但不擠占該元素原來(lái)的空間。

visibility: 隱藏對(duì)應(yīng)的元素并且擠占該元素原來(lái)的空間。

14.行內(nèi)元素有哪些? 塊級(jí)元素有哪些??

答:塊級(jí)元素:div p h1 h2 h3 h4 form ul

行內(nèi)元素: a b br i span input select

15. CSS 的盒子模型?

(1)兩種, IE 盒子模型、標(biāo)準(zhǔn) W3C 盒子模型;IE 的 content 部分包含了 border 和 pading;

(2)盒模型: 內(nèi)容(content)、填充(padding)、邊界(margin)、 邊框(border)

16.CSS3 有哪些新特性?

(1) CSS3 實(shí)現(xiàn)圓角(border-radius),陰影(box-shadow),

(2) 對(duì)文字加特效(text-shadow、),線性漸變(gradient),旋轉(zhuǎn)(transform)

(3) transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px)

skew(-9deg,0deg);// 旋轉(zhuǎn),縮放,定位,傾斜

(4) 增加了更多的 CSS 選擇器 多背景 rgba

(5) 在 CSS3 中唯一引入的偽元素是 ::selection.

(6) 媒體查詢,多欄布局

(7) border-image

17.html5 有哪些新特性、 、理 移除了那些元素?如何處理 5 HTML5 新標(biāo)簽的瀏覽器兼

分 容問(wèn)題?如何區(qū)分 L HTML 和 和 HTML5 ?

新特性:

1. 拖拽釋放(Drag and drop) API

2. 語(yǔ)義化更好的內(nèi)容標(biāo)簽(header,nav,footer,aside,article,section)

3. 音頻、視頻 API(audio,video)

4. 畫布(Canvas) API

5. 地理(Geolocation) API

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

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

8. 表單控件,calendar、date、time、email、url、search

9. 新的技術(shù) webworker, websocket, Geolocation

移除的元素:

1. 純表現(xiàn)的元素:basefont,big,center,font, s,strike,tt,u;

2. 對(duì)可用性產(chǎn)生負(fù)面影響的元素:frame,frameset,noframes;

支持 HTML5 新標(biāo)簽:

1. IE8/IE7/IE6 支持通過(guò) document.createElement 方法產(chǎn)生的標(biāo)簽,可以利用這一特性

讓這些瀏覽器支持 HTML5 新標(biāo)簽,瀏覽器支持新標(biāo)簽后,還需要添加標(biāo)簽?zāi)J(rèn)的樣式(當(dāng)

然最好的方式是直接使用成熟的框架、使用最多的是 html5shim 框架):

如何區(qū)分:

DOCTYPE 聲明新增的結(jié)構(gòu)元素、功能元素

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 問(wèn)答題47 /72 常見瀏覽器兼容性問(wèn)題與解決方案? 參考答案 (1)瀏覽器兼容問(wèn)題一:不同瀏覽器的標(biāo)簽?zāi)J(rèn)的外補(bǔ)...
    _Yfling閱讀 14,163評(píng)論 1 92
  • 在線閱讀 http://interview.poetries.top[http://interview.poetr...
    前端進(jìn)階之旅閱讀 115,567評(píng)論 24 450
  • ?前端面試題匯總 一、HTML和CSS 21 你做的頁(yè)面在哪些流覽器測(cè)試過(guò)?這些瀏覽器的內(nèi)核分別是什么? ...
    Simon_s閱讀 2,376評(píng)論 0 8
  • 前言 轉(zhuǎn)自博客園 原文 一、簡(jiǎn)單介紹一下什么是瀏覽器內(nèi)核。瀏覽器最重要或者說(shuō)核心的部分是“Rendering En...
    吳晗君閱讀 3,811評(píng)論 1 30
  • 前端開發(fā)面試知識(shí)點(diǎn)大綱: HTML&CSS: 對(duì)Web標(biāo)準(zhǔn)的理解、瀏覽器內(nèi)核差異、兼容性、hack、CSS基本功:...
    秀才JaneBook閱讀 2,781評(píng)論 0 25

友情鏈接更多精彩內(nèi)容