前端面试常考系列二
轉載自?前端面試常考系列二
一、外部引用CSS有幾種方式，有何區別
外部引用CSS的方式有兩種分別是link和@import。
區別如下：
1、link是XHTML標簽，除了加載CSS外，還可以定義RSS等其它事務；@import屬于CSS范疇，只能加載CSS。
2、link引用CSS時，在頁面載入時同時加載；@import引用CSS時，需要頁面完全載入以后加載。
3、link是XHTML標簽，無兼容問題；@import是在CSS2.1提出的，低版本的瀏覽器不支持。
4、link支持使用Javascript控制DOM去改變樣式；而@import不支持。
二、介紹一下data-*屬性
data-*為前端開發者提供自定義的屬性，這些屬性集可以通過對象的dataset屬性獲取，不支持該屬性的瀏覽器可以通過getAttribute方法獲取。
需要注意的是：data-*之后的以連字符分割的多個單詞組成的屬性，獲取的時候使用駝峰風格。
三、如何在頁面上實現一個圓形的可點擊區域
1、設置div的border-radius:50%。
2、<img>通過usemap映射到<map>的circle形<area>。
3、JS實現，獲取鼠標點擊位置坐標，判斷坐標到圓點的距離是否不大于圓的半徑，來判斷點擊位置是否在圓內。
四、SVG是什么，有哪些特點
SVG是什么：SVG可縮放矢量圖形（Scalable Vector Graphics）是基于可擴展標記語言XML，用于描述二維矢量圖形的一種圖形格式。?SVG是W3C在2000年8月制定的一種新的二維矢量圖形格式，2003年1月14日成為W3C推薦標準。SVG嚴格遵從XML語法，并用文本格式的描述性語言來描述圖像內容，是一種和圖像分辨率無關的矢量圖形格式。
(1)可伸縮性：可以在不影響清晰度的情況下，任意縮放圖像顯示。
(2)文本獨立：SVG圖像中的文字獨立于圖像，文字保留可編輯和可搜尋的狀態。也不會再有字體的限制，用戶系統即使沒有安裝某一字體，也會看到和他們制作時完全相同的畫面。
(3)較小文件：SVG 與?JPEG?和?GIF?圖像比起來，尺寸更小，且可壓縮性更強，上傳下載速度比較快。
(4)超強顯示效果：SVG圖像在屏幕上總是邊緣清晰，它的清晰度適合任何屏幕分辨率和打印分辨率。
(5)超級顏色控制：SVG圖像提供了一個1600萬種顏色的調色板，支持ICC顏色描述文件標準、RGB、漸變和蒙版。
(6)交互性和動態性：由于網絡是動態的媒體，SVG要成為網絡圖像格式，必須要具有動態的特征，這也是區別于其它圖像格式的一個重要特征。你可以在SVG文件中嵌入動畫元素(如運動路徑、漸現或漸隱效果、生長的物體、收縮、快速旋轉、改變顏色等)，或通過腳本定義來達到高亮顯示、聲音、動畫等效果。
?
五、介紹一下超鏈接target的屬性
<a> 標簽的 target 屬性規定在何處打開鏈接文檔。
一個<a>標簽內如果包含一個target屬性，瀏覽器將會載入和顯示用這個標簽的 href 屬性命名的、名稱與這個目標吻合的框架或者窗口中的文檔。如果這個指定名稱或 id 的框架或者窗口不存在，瀏覽器將打開一個新的窗口，并給新窗口一個指定的標記，然后將新的文檔載入新窗口。從此以后，超鏈接文檔就可以指向這個新的窗口。
參數值主要有：
1、_blank：瀏覽器總在一個新打開、未命名的窗口中載入目標文檔。
2、_parent：這個目標使得文檔載入父窗口或者包含來超鏈接引用的框架的框架集。如果這個引用是在窗口或者在頂級框架中，那么它與目標?_self 等效。
3、_self?：這個目標的值對所有沒有指定目標的 <a> 標簽是默認目標，它使得目標文檔載入并顯示在相同的框架或者窗口中作為源文檔。這個目標是多余且不必要的，除非和文檔標題 <base> 標簽中的 target 屬性一起使用。
4、_top?：這個目標使得文檔載入包含這個超鏈接的窗口，用?_top 目標將會清除所有被包含的框架并將文檔載入整個瀏覽器窗口。
六、介紹一下瀏覽器內核
瀏覽器內核主要分成兩部分：渲染引擎(layout?engineer或Rendering Engine)和JS引擎。
渲染引擎負責取得網頁的內容（HTML、XML、圖像等等）、整理訊息（例如加入CSS等），以及計算網頁的顯示方式，然后會輸出至顯示器或打印機。瀏覽器的內核的不同對于網頁的語法解釋會有不同，所以渲染的效果也不相同。所有網頁瀏覽器、電子郵件客戶端以及其它需要編輯、顯示網絡內容的應用程序都需要內核。
JS引擎的功能是解析和執行javascript來實現網頁的動態效果。
最開始渲染引擎和JS引擎并沒有區分的很明確，后來JS引擎越來越獨立，內核就傾向于只指渲染引擎。
七、舉出幾種常見的瀏覽器內核及其應用
Trident內核：
IE,MaxThon,TT,The World,360,搜狗瀏覽器等。[又稱MSHTML]
Gecko內核：
Netscape6及以上版本，FF,MozillaSuite/SeaMonkey等
Presto內核：
Opera7及以上。 [Opera內核原為：Presto，現為：Blink;]
Webkit內核：
Safari,Chrome等。 [ Chrome的：Blink（WebKit的分支）]
八、iframe有那些缺點
1、產生頁面多，管理不方便。
2、瀏覽器的退后按鈕失效。
3、框架過多導致服務器的HTTP請求增加。
4、小型移動端無法顯示整個框架。
5、打印困難。
6、代碼復雜，一些搜索引擎無法索引。
九、介紹一下label的作用
label往往出現在表單中，在表單中用label標簽是為了提高用戶體驗。Label標簽定義了表單控制間的關系。用戶選擇該標簽時，和標簽相關的表單控件自動獲取焦點。
?
十、瀏覽器內多個標簽頁之間的通信如何實現
localStorage在一個標簽頁里面使用localStorage.setItem編輯內容；在另一個標簽頁里面監聽storage事件，即可實現不同標簽頁之間的通信。
cookie+setInterval()將要傳遞的信息存儲在cookie中，每隔一定時間讀取cookie信息，即可隨時獲取要傳遞的信息。
十一、title與h3、b與strong、i與em有什么區別
title屬性沒有明確意義只表示是個標題，H1則表示層次明確的標題，對頁面信息的抓取也有很大的影響。
<b>標簽對應 bold，即文本加粗，<strong>標簽意思是加強字符的語氣，表示該文本比較重要，為了標明重點而加粗。
iI是Italic(斜體)，即內容展示為斜體，em表示強調的文本。
十二、HTML全局屬性有哪些
accesskey:設置快捷鍵，提供快速訪問元素
class:規定元素的一個或多個類名（引用樣式表中的類），多個類名用空格分開
contenteditable: 指定元素內容是否可編輯
contextmenu: 自定義鼠標右鍵彈出菜單內容
data-*: 為元素增加自定義屬性 dir: 設置元素文本方向
draggable: 設置元素是否可拖拽
dropzone: 設置元素拖放類型： copy, move, link
hidden: 表示一個元素是否顯示
id: 元素id，文檔內唯一
lang: 元素內容的的語言
spellcheck: 是否啟動拼寫和語法檢查
style: 行內css樣式
tabindex: 設置元素可以獲得焦點，通過tab可以導航
title: 元素相關的建議信息
translate: 元素和子孫節點內容是否需要本地化
一、外部引用CSS有幾種方式，有何區別
外部引用CSS的方式有兩種分別是link和@import。
區別如下：
1、link是XHTML標簽，除了加載CSS外，還可以定義RSS等其它事務；@import屬于CSS范疇，只能加載CSS。
2、link引用CSS時，在頁面載入時同時加載；@import引用CSS時，需要頁面完全載入以后加載。
3、link是XHTML標簽，無兼容問題；@import是在CSS2.1提出的，低版本的瀏覽器不支持。
4、link支持使用Javascript控制DOM去改變樣式；而@import不支持。
二、介紹一下data-*屬性
data-*為前端開發者提供自定義的屬性，這些屬性集可以通過對象的dataset屬性獲取，不支持該屬性的瀏覽器可以通過getAttribute方法獲取。
需要注意的是：data-*之后的以連字符分割的多個單詞組成的屬性，獲取的時候使用駝峰風格。
三、如何在頁面上實現一個圓形的可點擊區域
1、設置div的border-radius:50%。
2、<img>通過usemap映射到<map>的circle形<area>。
3、JS實現，獲取鼠標點擊位置坐標，判斷坐標到圓點的距離是否不大于圓的半徑，來判斷點擊位置是否在圓內。
四、SVG是什么，有哪些特點
SVG是什么：SVG可縮放矢量圖形（Scalable Vector Graphics）是基于可擴展標記語言XML，用于描述二維矢量圖形的一種圖形格式。?SVG是W3C在2000年8月制定的一種新的二維矢量圖形格式，2003年1月14日成為W3C推薦標準。SVG嚴格遵從XML語法，并用文本格式的描述性語言來描述圖像內容，是一種和圖像分辨率無關的矢量圖形格式。
(1)可伸縮性：可以在不影響清晰度的情況下，任意縮放圖像顯示。
(2)文本獨立：SVG圖像中的文字獨立于圖像，文字保留可編輯和可搜尋的狀態。也不會再有字體的限制，用戶系統即使沒有安裝某一字體，也會看到和他們制作時完全相同的畫面。
(3)較小文件：SVG 與?JPEG?和?GIF?圖像比起來，尺寸更小，且可壓縮性更強，上傳下載速度比較快。
(4)超強顯示效果：SVG圖像在屏幕上總是邊緣清晰，它的清晰度適合任何屏幕分辨率和打印分辨率。
(5)超級顏色控制：SVG圖像提供了一個1600萬種顏色的調色板，支持ICC顏色描述文件標準、RGB、漸變和蒙版。
(6)交互性和動態性：由于網絡是動態的媒體，SVG要成為網絡圖像格式，必須要具有動態的特征，這也是區別于其它圖像格式的一個重要特征。你可以在SVG文件中嵌入動畫元素(如運動路徑、漸現或漸隱效果、生長的物體、收縮、快速旋轉、改變顏色等)，或通過腳本定義來達到高亮顯示、聲音、動畫等效果。
?
五、介紹一下超鏈接target的屬性
<a> 標簽的 target 屬性規定在何處打開鏈接文檔。
一個<a>標簽內如果包含一個target屬性，瀏覽器將會載入和顯示用這個標簽的 href 屬性命名的、名稱與這個目標吻合的框架或者窗口中的文檔。如果這個指定名稱或 id 的框架或者窗口不存在，瀏覽器將打開一個新的窗口，并給新窗口一個指定的標記，然后將新的文檔載入新窗口。從此以后，超鏈接文檔就可以指向這個新的窗口。
參數值主要有：
1、_blank：瀏覽器總在一個新打開、未命名的窗口中載入目標文檔。
2、_parent：這個目標使得文檔載入父窗口或者包含來超鏈接引用的框架的框架集。如果這個引用是在窗口或者在頂級框架中，那么它與目標?_self 等效。
3、_self?：這個目標的值對所有沒有指定目標的 <a> 標簽是默認目標，它使得目標文檔載入并顯示在相同的框架或者窗口中作為源文檔。這個目標是多余且不必要的，除非和文檔標題 <base> 標簽中的 target 屬性一起使用。
4、_top?：這個目標使得文檔載入包含這個超鏈接的窗口，用?_top 目標將會清除所有被包含的框架并將文檔載入整個瀏覽器窗口。
六、介紹一下瀏覽器內核
瀏覽器內核主要分成兩部分：渲染引擎(layout?engineer或Rendering Engine)和JS引擎。
渲染引擎負責取得網頁的內容（HTML、XML、圖像等等）、整理訊息（例如加入CSS等），以及計算網頁的顯示方式，然后會輸出至顯示器或打印機。瀏覽器的內核的不同對于網頁的語法解釋會有不同，所以渲染的效果也不相同。所有網頁瀏覽器、電子郵件客戶端以及其它需要編輯、顯示網絡內容的應用程序都需要內核。
JS引擎的功能是解析和執行javascript來實現網頁的動態效果。
最開始渲染引擎和JS引擎并沒有區分的很明確，后來JS引擎越來越獨立，內核就傾向于只指渲染引擎。
七、舉出幾種常見的瀏覽器內核及其應用
Trident內核：
IE,MaxThon,TT,The World,360,搜狗瀏覽器等。[又稱MSHTML]
Gecko內核：
Netscape6及以上版本，FF,MozillaSuite/SeaMonkey等
Presto內核：
Opera7及以上。 [Opera內核原為：Presto，現為：Blink;]
Webkit內核：
Safari,Chrome等。 [ Chrome的：Blink（WebKit的分支）]
八、iframe有那些缺點
1、產生頁面多，管理不方便。
2、瀏覽器的退后按鈕失效。
3、框架過多導致服務器的HTTP請求增加。
4、小型移動端無法顯示整個框架。
5、打印困難。
6、代碼復雜，一些搜索引擎無法索引。
九、介紹一下label的作用
label往往出現在表單中，在表單中用label標簽是為了提高用戶體驗。Label標簽定義了表單控制間的關系。用戶選擇該標簽時，和標簽相關的表單控件自動獲取焦點。
?
十、瀏覽器內多個標簽頁之間的通信如何實現
localStorage在一個標簽頁里面使用localStorage.setItem編輯內容；在另一個標簽頁里面監聽storage事件，即可實現不同標簽頁之間的通信。
cookie+setInterval()將要傳遞的信息存儲在cookie中，每隔一定時間讀取cookie信息，即可隨時獲取要傳遞的信息。
十一、title與h3、b與strong、i與em有什么區別
title屬性沒有明確意義只表示是個標題，H1則表示層次明確的標題，對頁面信息的抓取也有很大的影響。
<b>標簽對應 bold，即文本加粗，<strong>標簽意思是加強字符的語氣，表示該文本比較重要，為了標明重點而加粗。
iI是Italic(斜體)，即內容展示為斜體，em表示強調的文本。
十二、HTML全局屬性有哪些
accesskey:設置快捷鍵，提供快速訪問元素
class:規定元素的一個或多個類名（引用樣式表中的類），多個類名用空格分開
contenteditable: 指定元素內容是否可編輯
contextmenu: 自定義鼠標右鍵彈出菜單內容
data-*: 為元素增加自定義屬性 dir: 設置元素文本方向
draggable: 設置元素是否可拖拽
dropzone: 設置元素拖放類型： copy, move, link
hidden: 表示一個元素是否顯示
id: 元素id，文檔內唯一
lang: 元素內容的的語言
spellcheck: 是否啟動拼寫和語法檢查
style: 行內css樣式
tabindex: 設置元素可以獲得焦點，通過tab可以導航
title: 元素相關的建議信息
translate: 元素和子孫節點內容是否需要本地化
總結
