常見的CSS和HTML面試題

來源:互聯網
上載者:User

標籤:本地   沒有   trunk   常用   特性   storage   local   doc   inline   

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

瀏覽器:IE,Chrome,FireFox,Safari,Opera。

核心:Trident,Gecko,Presto,Webkit。

2. 說下行內元素和區塊層級元素的區別?行內塊元素的相容性使用?(IE8 以下)

  • 行內元素:會在水平方向排列,不能包含區塊層級元素,設定width無效,height無效(可以設定line-height),margin上下無效,padding上下無效。
    區塊層級元素:各佔據一行,垂直方向排列。從新行開始結束接著一個斷行。
  • 相容性:display:inline-block;*display:inline;*zoom:1;

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

(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。

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

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

content-box:寬度和高度分別應用到元素的內容框。在寬度和高度之外繪製元素的內邊距和邊框(元素預設效果)。
border-box:元素指定的任何內邊距和邊框都將在已設定的寬度和高度內進行繪製。通過從已設定的寬度和高度分別減去邊框和內邊距才能得到內容的寬度和高度。

5.Doctype作用?標準模式與相容模式各有什麼區別?

<!DOCTYPE>告知瀏覽器的解析器用什麼文檔標準解析這個文檔。DOCTYPE不存在或格式不正確會導致文檔以相容模式呈現。

標準模式的排版和JS運作模式都是以該瀏覽器支援的最高標準運行。在相容模式中,頁面以寬鬆的向後相容的方式顯示,類比老式瀏覽器的行為以防止網站無法工作。

6.HTML5 為什麼只需要寫 <!DOCTYPEHTML>

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或RenderingEngine)和JS引擎。

渲染引擎:負責取得網頁的內容(HTML、XML、映像等等)、整理訊息(例如加入CSS等),以及計算網頁的顯示方式,後會輸出至顯示器或印表機。瀏覽器的核心的不同對於網頁的文法解釋會有不同,所以渲染的效果也不相同。所有網頁瀏覽器、電子郵件用戶端以及其它需要編輯、顯示網路內容的應用程式都需要核心。

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

最開始渲染引擎和JS引擎並沒有區分的很明確,後來JS引擎越來越獨立,核心就傾向於只指渲染引擎。

9.html5有哪些新特性?如何處理HTML5新標籤的瀏覽器安全色問題?如何區分 HTML HTML5

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;

IE8/IE7/IE6支援通過document.createElement方法產生的標籤,可以利用這一特性讓這些瀏覽器支援HTML5新標籤,瀏覽器支援新標籤後,還需要添加標籤預設的樣式。當然也可以直接使用成熟的架構、比如html5shim;

<!--[iflt IE 9]>

<script>src="http://html5shim.googlecode.com/svn/trunk/html5.js"</script>

<![endif]-->

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

    • 用正確的標籤做正確的事情。
    • html語義化讓頁面的內容結構化,結構更清晰,便於對瀏覽器、搜尋引擎解析;
    • 即使在沒有樣式CSS情況下也以一種文檔格式顯示,並且是容易閱讀的;
    • 搜尋引擎的爬蟲也依賴於HTML標記來確定上下文和各個關鍵字的權重,利於SEO;
    • 使閱讀原始碼的人對網站更容易將網站分塊,便於閱讀維護理解。

常見的CSS和HTML面試題

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

Tags Index: