面試答辯

1. 你做的頁面在哪些流覽器測試過?這些瀏覽器的內核分別是什么? ?

Trident 內核:IE 系列

Gecko 內核:Firefox

Webkit 內核:Safari

Blink 內核:是基于 Webkit 內核的子項目,使用的瀏覽器有:

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

幾乎所有國產雙內核瀏覽器(Trident/Blink)如 360、獵豹、qq、百度等

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

嗎?

文檔聲明。

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

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

IE 下如不書寫文檔聲明會使用怪異模式解析網頁導致一系列 CSS 兼容性問題。

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

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

結構與樣式分離

代碼語義性好

更符合 HTML 標準規(guī)范

SEO 友好

Table 布局的適用場景:

某種原因不方便加載外部 CSS 的場景,例如郵件正文,此時用 table 布局可以在無 css 情況下保持頁面布

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

漸進增強 progressive enhancement:針對低版本瀏覽器進行構建頁面,保證最基本的功能,然后再針

對高級瀏覽器進行效果、交互等改進和追加功能達到更好的用戶體驗。

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

5. 請談一下你對網頁標準和標準制定機構重要性的理解。

網頁標準和標準制定機構都是為了能讓 web 發(fā)展的更‘健康’,開發(fā)者遵循統(tǒng)一的標準,降低開發(fā)難度,開發(fā)成本,SEO 也會更好做,也不會因為濫用代碼導致各種 BUG、安全問題,最終提高網站易用性。

6. 為什么利用多個域名來存儲網站資源會更有效?

CDN 緩存更方便

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

節(jié)約 cookie 帶寬

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

防止不必要的安全問題

7.你如何理解 L HTML 結構的語義化?

HTML 結構語義化:

更符合 W3C 統(tǒng)一的規(guī)范標準,是技術趨勢。

沒有樣式時瀏覽器的默認樣式也能讓頁面結構很清晰。

對功能障礙用戶友好。屏幕閱讀器(如果訪客有視障)會完全根據(jù)你的標記來“讀”你的網頁。

對其他非主流終端設備友好。例如機頂盒、PDA、各種移動終端。

對 SEO 友好。

8.有哪項方式可以對一個 DOM 設置它的CSS 樣式?

外部樣式表,引入一個外部 css 文件

內部樣式表,將 css 代碼放在? 標簽內部

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

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

圍內?

設置 display 屬性為 none,或者設置 visibility 屬性為 hidden

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

設置 text-indent:-9999px;

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

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

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

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

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

明度,

而 rgba()只作用于元素的顏色或其背景色。(設置 rgba 透明的元素的子元素不會繼承透明效果!)

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

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

px 值固定,容易計算。

em 值不固定,是相對單位,其相對應父級元素的字體大小會調整

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

display : 隱藏對應的元素但不擠占該元素原來的空間。

visibility: 隱藏對應的元素并且擠占該元素原來的空間。

14.行內元素有哪些? 塊級元素有哪些??

答:塊級元素:div p h1 h2 h3 h4 form ul

行內元素: a b br i span input select

15. CSS 的盒子模型?

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

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

16.CSS3 有哪些新特性?

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

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

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

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

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

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

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

(7) border-image

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

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

新特性:

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

2. 語義化更好的內容標簽(header,nav,footer,aside,article,section)

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

4. 畫布(Canvas) API

5. 地理(Geolocation) API

6. 本地離線存儲 localStorage 長期存儲數(shù)據(jù),瀏覽器關閉后數(shù)據(jù)不丟失;

7. sessionStorage 的數(shù)據(jù)在瀏覽器關閉后自動刪除

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

9. 新的技術 webworker, websocket, Geolocation

移除的元素:

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

2. 對可用性產生負面影響的元素:frame,frameset,noframes;

支持 HTML5 新標簽:

1. IE8/IE7/IE6 支持通過 document.createElement 方法產生的標簽,可以利用這一特性

讓這些瀏覽器支持 HTML5 新標簽,瀏覽器支持新標簽后,還需要添加標簽默認的樣式(當

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

如何區(qū)分:

DOCTYPE 聲明新增的結構元素、功能元素

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發(fā)布,文章內容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案? 參考答案 (1)瀏覽器兼容問題一:不同瀏覽器的標簽默認的外補...
    _Yfling閱讀 13,806評論 1 92
  • 在線閱讀 http://interview.poetries.top[http://interview.poetr...
    前端進階之旅閱讀 114,832評論 24 450
  • ?前端面試題匯總 一、HTML和CSS 21 你做的頁面在哪些流覽器測試過?這些瀏覽器的內核分別是什么? ...
    Simon_s閱讀 2,228評論 0 8
  • 前言 轉自博客園 原文 一、簡單介紹一下什么是瀏覽器內核。瀏覽器最重要或者說核心的部分是“Rendering En...
    吳晗君閱讀 3,682評論 1 30
  • 前端開發(fā)面試知識點大綱: HTML&CSS: 對Web標準的理解、瀏覽器內核差異、兼容性、hack、CSS基本功:...
    秀才JaneBook閱讀 2,552評論 0 25