前端開發就業面試題

HTML+CSS篇

1.對WEB標準以及W3C的理解與認識。

標籤閉合、標籤小寫、不亂嵌套、提升搜索機器人搜索概率、使用外鏈css和js腳本、結構行爲表現的分離、文件下載與頁面速度更快、內容能被更多的用戶所訪問、內容能被更普遍的設備所訪問、更少的代碼和組件，容易維護、改版方便，不須要變更頁面內容、提供打印版本而不須要複製內容、提升網站易用性。

2.xhtml和html有什麼區別？

HTML是一種基本的WEB網頁設計語言，XHTML是一個基於XML的置標語言。

最主要的不一樣：

XHTML元素必須被正確地嵌套；

XHTML元素必須被關閉；

標籤名必須用小寫字母；

XHTML文檔必須擁有根元素。

3.Doctype的做用？嚴格模式和混雜模式的區別？它們有什麼意義？

1）<!DOCTYPE>聲名位於文檔的最前面，在 標籤的前面，告知瀏覽器以何種模式來渲染文檔。

2）嚴格模式的排版和JS運做模式都是以瀏覽器支持的最高的標準運行。按照W3C的標準來解析代碼。

3）混雜模式是以寬鬆的，向後兼容的方式來解析代碼。是指瀏覽器用本身的方式解析代碼，模擬老式瀏覽器的行爲以防止網站中止工做。

4）若DOCTYPE爲聲名或格式不正確，頁面將會以怪異模式的方式解析。

5）Doctype標籤可聲明三種DLD類型，分別是嚴格型，過渡型，框架型。

4.行內元素有哪些?塊級元素有哪些?CSS的盒模型?

**塊級元素：**div p h1 h2 h3 h4 form ul

**行內元素：**a b br i span input select

**CSS盒模型：**內容、填充（padding）、邊框（border）、外邊界（margin）

5.CSS引入的方式有哪些? link和@import的區別是?

方式：

內聯方式、嵌入方式、連接方式、導入方式。

區別：

1）link是XHTML標籤，除了加載CSS外，還能夠定義RSS等其餘事務；@import屬於CSS範疇，只能加載CSS。

2）link引用CSS時，在頁面載入時同時加載；@import須要頁面網頁徹底載入之後加載。

3）link是XHTML標籤，無兼容問題；@import是在CSS2.1提出的，低版本的瀏覽器不支持。

4）ink支持使用Javascript控制DOM去改變樣式；而@import不支持。

6.CSS選擇符有哪些?哪些屬性能夠繼承?優先級算法如何計算?內聯和important哪一個優先級高?

CSS選擇符：

1）id選擇器(# myid)

2）類選擇器(.myclassname)

3）標籤選擇器(div, h1, p)

4）相鄰選擇器(h1 + p)

5）子選擇器(ul > li)

6）後代選擇器(li a)

7）通配符選擇器( * )

8）屬性選擇器(a[rel = "external"])

9）僞類選擇器(a: hover, li:nth-child)

可繼承的樣式：

1）font-size

2）font-family

3）color

4）text-indent

優先級算法：

1）優先級就近原則，同權重狀況下樣式定義最近者爲準

2）載入樣式以最後載入的定位爲準

3）!important > id > class > tag

4）important 比 內聯優先級高，但內聯比 id 要高

7.前端頁面有哪三層構成，分別是什麼?做用是什麼?

結構層 HTML：

由HTML或XHTML之類的標記語言負責建立。標籤，也就是那些出如今尖括號裏的單詞，對網頁內容的語義含義作出了描述，但這些標籤不包含任何關於如何顯示有關內容的信息。例如，P標籤表達了這樣一種語義：「這是一個文本段。」

表示層 CSS：

由CSS負責建立，CSS對「如何顯示有關內容」的問題作出了回答。

行爲層 JS：

負責回答「內容應該如何對事件作出反應」這一問題。這是 Javascript 語言和 DOM主宰的領域。

8.CSS的基本語句構成是?

選擇器{屬性 1:值 1;屬性 2:值 2;……}

9.你作的頁面在哪些流覽器測試過?這些瀏覽器的內核分別是什麼?

Ie(Ie 內核)、火狐（Gecko）、谷歌（webkit）、opear(Presto)

10.標籤上title與alt屬性的區別是什麼?

Alt當圖片不顯示時，用文字表明

Title 爲該屬性提供信息

11.描述css reset的做用和用途。

每一個瀏覽器都有一些自帶的或者共有的默認樣式，或形成一些佈局上的困擾，css reset的做用就是重置這些默認樣式，使樣式表現一致。

爲了讓頁面得到瀏覽器跨瀏覽器的兼容性，須要用重置文件css代碼覆蓋瀏覽器默認的樣式來統同樣式。

12.解釋css sprites，如何使用。

css sprites：

精靈圖（雪碧圖），把一堆小圖片整合在一張大圖上，經過背景圖片相關設置（背景圖片、背景圖是否重複、背景圖定位），顯示圖片，減輕服務器對圖片的請求數量

使用步驟：

1）製做一張具備多狀態的拼合圖片，須要按照必定規律處理

2）給要顯示背景的盒（一個固定尺寸，寬width、高height），以背景的方式加載，讓其局部顯示

3）經過背景圖定位（background-position）控制不一樣的顯示狀態

13.瀏覽器標準模式和怪異模式之間的區別是什麼?

所謂的標準模式是指，瀏覽器按W3C標準解析執行代碼；怪異模式則是使用瀏覽器本身的方式解析執行代碼，由於不一樣瀏覽器解析執行的方式不同，因此咱們稱之爲怪異模式。

使用window.top.document.compatMode可顯示爲何模式。

14.你如何對網站的文件和資源進行優化?期待的解決方案包括：

1）文件合併

2）文件最小化/文件壓縮

3）使用 CDN 託管

4）緩存的使用

5）GZIP壓縮你的JS和CSS文件

15.什麼是語義化的HTML？爲何要作到語義化？

語義化的HTML就是寫出的HTML代碼，符合內容的結構化（內容語義化），選擇合適的標籤（代碼語義化），可以便於開發者閱讀和寫出更優雅的代碼的同時讓瀏覽器的爬蟲和機器很好地解析。

語義化的優勢：

1）有利於SEO，有利於搜索引擎爬蟲更好的理解咱們的網頁，從而獲取更多的有效信息，提高網頁的權重。

2）在沒有CSS的時候可以清晰的看出網頁的結構，加強可讀性。

3）便於團隊開發和維護，語義化的HTML可讓開發者更容易的看明白，從而提升團隊的效率和協調能力。

4）支持多終端設備的瀏覽器渲染。

16.清除浮動的幾種方式，各自的優缺點：

1）使用空標籤清除浮動clear:both（理論上能清楚任何標籤，增長無心義的標籤）

2）使用overflow:auto（空標籤元素清除浮動而不得不增長無心代碼的弊端，使用 zoom:1 用於兼容 IE）

3）是用afert僞元素清除浮動（用於非 IE 瀏覽器）

17.如何居中div?如何居中一個浮動元素?

給div設置一個寬度，而後設置元素的左右外邊距爲 auto，好比，margin:0px auto。則能夠實現 div 居中顯示。 對於浮動元素，設置其左右外邊距爲關鍵字 auto 是無效的。此時，若是須要設置其居中顯示，能夠：

1）精確計算其左外邊距並進行設置，實現居中顯示

2）使用一個居中顯示的 div 元素包含此浮動元素

18.CSS3新增僞類舉例：

p:first-of-type 選擇屬於其父元素的首個元素的每一個元素。

p:last-of-type 選擇屬於其父元素的最後元素的每一個元素。 p:only-of-type 選擇屬於其父 元素惟一的元素的每一個元素。

p:only-child 選擇屬於其父元素的惟一子元素的每一個元素。

p:nth-child(2) 選擇屬於其父元素的第二個子元素的每一個元素。

:enabled :disabled 控制 表單控件的禁用態。

:checked 單選框或複選框被選中。

19.HTML5 的離線儲存有幾種方式?

localStorage 長期存儲數據，瀏覽器關閉後數據不丟失；sessionStorage 數據在瀏覽器關閉後自動刪除。

20.請描述一下cookies，sessionStorage和localStorage的區別?

相同點：

都存儲在客戶端

不一樣點：

1）存儲大小

cookie數據大小不能超過4k。

sessionStorage和localStorage 雖然也有存儲大小的限制，但比cookie大得多，能夠達到5M或更大。

2）有效時間

localStorage存儲持久數據，瀏覽器關閉後數據不丟失除非主動刪除數據。

sessionStorage數據在當前瀏覽器窗口關閉後自動刪除。

cookie設置的cookie過時時間以前一直有效，即便窗口或瀏覽器關閉。

3）數據與服務器之間的交互方式

cookie的數據會自動的傳遞到服務器，服務器端也能夠寫cookie到客戶端。

sessionStorage和localStorage不會自動把數據發給服務器，僅在本地保存。

21.簡述一下src與href的區別。

href是指向網絡資源所在位置，創建和當前元素（錨點）或當前文檔（連接）之間的連接，用於超連接。

src是指向外部資源的位置，指向的內容將會嵌入到文檔中當前標籤所在位置；在請求src資源時會將其指向的資源下載並應用到文檔內，例如js腳本，img圖片和frame等元素。當瀏覽器解析到該元素時，會暫停其餘資源的下載和處理，直到將該資源加載、編譯、執 行完畢，圖片和框架等元素也如此，相似於將所指向資源嵌入當前標籤內。這也是爲何將js腳本放在底部而不是頭部。

22.簡述同步和異步的區別。

同步是阻塞模式，異步是非阻塞模式。

同步就是指一個進程在執行某個請求的時候，若該請求須要一段時間才能返回信息，那麼 這個進程將會一直等待下去，直到收到返回信息才繼續執行下去；

異步是指進程不須要一直等下去，而是繼續執行下面的操做，無論其餘進程的狀態。當有消息返回時系統會通知進程進行處理，這樣能夠提升執行的效率。

23.HTML5爲何只須要寫 ？

HTML5不基於SGML，所以不須要對DTD進行引用，可是須要doctype來規範瀏覽器的行爲（讓瀏覽器按照它們應該的方式來運行）；而HTML4.01基於SGML，因此須要對DTD進行引用，才能告知瀏覽器文檔所使用的文檔類型。

24.CSS清除浮動的幾種方法。

1）使用帶clear屬性的空元素

2）使用CSS的overflow屬性

3）使用CSS的after僞元素

4）使用鄰接元素處理