前端开发面试题集锦（一）
你怎樣理解HTML結構的語意化?
1、去掉或樣式丟失的時候能讓頁面呈現清晰的結構。
2.屏幕閱讀器（假設訪客有視障）會全然依據你的標記來“讀”你的網頁；
3.PDA、手機等設備可能無法像普通電腦的瀏覽器一樣來渲染網頁（一般是由于這些設備對
CSS的支持較弱）。
4.搜索引擎的爬蟲也依賴于標記來確定上下文和各個keyword的權重。
5.你的頁面是否對爬蟲easy理解非常重要,由于爬蟲非常大程度上會忽略用于表現的標記。而僅僅注重語義標記；
6、便于團隊開發和維護。
Doctype文檔聲明的嚴格模式和混雜模式，怎樣觸發這兩種模式，區分它們有何意義?
1、怎樣觸發兩種模式：
增加xml頭部聲明，能夠觸發IE瀏覽器的Quirks mode，觸發之后，瀏覽器解析方式就和IE5.5一樣，擁有IE5.5一樣的bug和其它問題。行為（Javascript）也是如此。
???? ?
2、IE6的觸發：在XHTML的DOCTYPE前增加XML聲明，
<?xml version="1.0" encoding="utf-8"?
>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
3、IE7的觸發：在XML聲明和XHTML的DOCTYPE之間，增加HTML凝視
<?
xml version="1.0" encoding="utf-8"?
>
<!-- ... and keep IE7 in quirks mode -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
4、IE6和IE7都能夠觸發的：在HTML4.01的DOCTYPE文檔頭部，增加HTML凝視
<!-- quirks mode -->? <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
5、在頁面頂部加 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">，將觸發“怪異模式”
6、沒有使用DTD聲明或者使用HTML4下面（不包含HTML4）的DTD聲明時。基本上全部的瀏覽器都是使用quirks mode呈現
談談曾經端角度出發做好SEO須要考慮什么？
1、了解搜索引擎怎樣抓取網頁和怎樣索引網頁；
2、Meta標簽優化。
3、怎樣選取關鍵詞并在網頁中放置關鍵詞；
4、了解基本的搜索引擎；
5、基本的互聯網文件夾
6、按點擊付費的搜索引擎；
7、搜索引擎登錄；
8、鏈接交換和鏈接廣泛度（Link Popularity）；
9、標簽的合理使用。
我們知道能夠以外鏈的方式引入CSS文件，請談談外鏈引入CSS有哪些方式，這些方式的性能有差別嗎？
CSS的引入方式最經常使用的有三種：
第一：在head部分增加<link rel="stylesheet" type="text/css" href="my.css"/>,引入外部的CSS文件。
第二：在head部分增加
<style type="text/css">
div{margin: 0;padding: 0;border:1px red solid;}
</style>
第三：直接在頁面的標簽里加<div style="border:1px red solid;">
CSS Sprite是什么，談談這個技術的優缺點。
CSS sprites在國內非常多人叫css精靈。是一種網頁圖片應用處理方式。它同意你將一個頁面涉及到的全部零星圖片都包括到
中去。降低對server的請求次數，提高訪問速度。
1、長處：
（1）利用CSS Sprites能非常好地降低了網頁的http請求，從而大大的提高了頁面的性能，這也是CSS Sprite的長處，也是其被廣泛傳播和應用的主要原因。
（2）攻克了網頁設計師在圖片命名上的困擾。僅僅需對一張集合的圖片上命名就能夠了，不須要對每個小元素命名，從而提高了網頁的制作效率。
（3）換風格方便。僅僅須要在一張或少張圖片上改動圖片的顏色或樣式，整個網頁的風格就能夠改變。維護起來也非常方便。
2、缺點：
（1）在圖片合并的時候，你要把多張圖片有序的合理的合并成一張圖片，還要留好足夠的空間，防止板塊內顯示不必要的背景；這些還好，最痛苦的是在寬屏，高分辨率的屏幕下的自適應頁面，你的圖片假設不夠寬，非常easy將背景斷裂；
（2）CSS Sprites在開發的時候比較麻煩，你要通過photoshop或其它工具測量計算每個背景單元的精確位是針線活，沒什么難度。可是非常繁瑣。
（3）CSS Sprites在維護的時候比較麻煩，假設頁面背景有少許修改，一般就要改這張合并的圖片。無需改的好不要動，這樣避免修改很多其它的css，假設在原來的地方放不下，又僅僅能（最好）往下加圖片。這樣圖片的字加了，還要修改css。
以CSS3標準定義一個webkit內核瀏覽器識別的圓角（尺寸任意）
-moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius:10px;
行內元素有哪些？塊級元素有哪些？CSS的盒模型？
行內元素有：a b span I em img input select strong
級元素有：div ul ol li dl dt dd h1 h2 h3 h4 p
盒模型：margin border padding width
前端頁面有哪三層構成，各自是什么？作用是什么？
網頁分成三個層次，即：結構層、表示層、行為層。
1、網頁的結構層（structurallayer）由HTML 或XHTML 之類的標記語言負責創建。標簽。也就是那些出如今尖括號中的單詞，對網頁內容的語義含義做出這些標簽不包括不論什么關于怎樣顯示有關內容的信息。比如，P標簽表達了這樣一種語義：“這是一個文本段。”
2、網頁的表示層（presentationlayer）由CSS 負責創建。CSS對“怎樣顯示有關內容”的問題做出了回答。
3、網頁的行為層（behaviorlayer）負責回答“內容應該怎樣對事件做出反應”這一問題。
這是Javascript 語言和DOM 主宰的領域。
html中form里action方法的get和post有什么差別
1、Get是用來從server上獲得數據，而Post是用來向server上傳遞數據。
2、Get將表單中數據的依照variable=value的形式，加入到action所指向的URL后面。而且兩者使用“?”連接。而各個變量之間使用“&”連接。Post是將表單中的數據放在form的數據體中。依照變量和值相相應的方式，傳遞到action所指向URL。
3、Get是不安全的，由于在傳輸過程，數據被放在請求的URL中，而現在現有的非常多server、代理server或者用戶代理都會將請求URL記錄到日志文件里。然后放在某個地方，這樣就可能會有一些隱私的信息被第三方看到。
另外，用戶也能夠在瀏覽器上直接看到提交的數據，一些系統內部消息將會一同顯示在用戶面前。
Post的全部操作對用戶來說都是不可見的。
4、Get傳輸的數據量小，這主要是由于受URL長度限制；而Post能夠傳輸大量的數據，所以在上傳文件僅僅能使用Post（當然另一個原因。將在后面的提到）。
5、Get限制Form表單的數據集的值必須為ASCII字符。而Post支持整個ISO10646字符集。
6、Get是Form的默認方法。
html元素的id跟class什么差別
id和class是網頁中兩個通用屬性。他們協同工作使整個頁面豐富多彩。當我們為一個元素定義樣式時，二者都可用，但有差別
1、在css樣式表中書寫時。id選擇符前綴應加“#”。class選擇符前綴應加“.”
2、id屬性在一個頁面中書寫時僅僅能使用一次。而class能夠重復使用
3、id作為元素標簽用于區分不同結構和內容，而class作為一個樣式，能夠應用到不論什么結構和內容其中去
4、布局上的一般原則：id先確定結構和內容再為它定義樣式。而class正好相反，是先定義樣式，然后在頁面中依據不同需求把樣式應用到不同結構和內容上
5、眼下瀏覽器都同意同一個頁面出現多個同樣屬性值的id。普通情況能正常顯示，只是當javascript通過id來控制元素時就會出錯
6、在實際應用中，class常被用到文字版塊和頁面修飾上，而id多被用在雄偉布局和設計包括塊，或包括框的樣式。
Ajax是什么？
Ajax不是一個技術，它實際上是幾種技術，每種技術都有其獨特這處，合在一起就成了一個功能強大的新技術。Ajax包含：
1、XHTML和CSS
2、使用文檔對象模型(Document Object Model)作動態顯示和交互
3、使用XML和XSLT做數據交互和操作
4、使用XMLHttpRequest進行異步數據接收
5、使用JavaScript將它們綁定在一起?
你做的頁面在哪些流覽器測試過？這些瀏覽器的內核各自是什么?常常遇到的瀏覽器的兼容性有哪些？怎么會出現？解決方法是什么？
1、DOCTYPE 影響 CSS 處理
2、FF: 設置 padding 后， div 會添加 height 和 width， 但 IE 不會， 故須要用 !important 多設一個 height 和 width
3、FF: 支持 !important， IE 則忽略， 可用 !important 為 FF 特別設置樣式
4、div 的垂直居中問題: vertical-align:middle; 將行距添加到和整個DIV一樣高 line-height:200px; 然后插入文字。就垂直居中了。缺點是要控制內容不要換行
5、在mozilla firefox和IE中的BOX模型解釋不一致導致相差2px?????? 解決方法：? div{margin:30px!important;margin:28px;}? 注意這兩個margin的順序一定不能寫反。!important這個屬性IE不能識別。但別的瀏覽器能夠識別。
[html5]離線存儲
H5的一個重要特性就是離線存儲，所謂的離線存儲就是將一些資源文件保存在本地。這樣興許的頁面又一次載入將使用本地資源文件，在離線情況下能夠繼續訪問web應用，同一時候通過一定的手法（更新相關文件或者使用相關API），能夠更新、刪除離線存儲等操作。
H5的離線存儲使用一個manifest文件來標明哪些文件是須要被存儲的，使用如 <html manifest='offline.manifest'> 來引入一個manifest文件，這個文件的路徑能夠是相對的。也能夠是絕對的，假設你的web應用非常多，并且希望能集中管理manifest文件，那么靜態文件server是個不錯的選擇。
iframe的優缺點
1、缺點：
在網頁中使用框架結構最大的弊病是搜索引擎的“蜘蛛”程序無法解讀這樣的頁面。
當“蜘蛛”程序遇到由數個框架組成的網頁時。它們僅僅看到框架而無法找到鏈 接。因此它們會以為該站點是個死站點，并且非常快轉身離去。對一個站點來說這無異于一場災難。
假設你想銷售產品。你須要客戶;如想得到客戶，你首先要讓人們 訪問你的站點，而要做到這一點。你就非求助于搜索引擎不可。你花費了大量的時間、精力和金錢開設了一家網上商店，卻又有益不讓搜索引擎檢索你，這就好象開 家零售商店，卻將窗戶所有漆成黑色。并且還不掛不論什么招牌一樣。
2、長處：
從上文中我們能夠發現，使用ifame框架的弊端是無法被搜索引擎所爬行抓取。但凡事總是具有兩面性。
它的這個缺點也可能是他的長處。
利用這一點那我 們就能夠把我們網站上一些須要給我們的用戶查看。可是不須要搜索引擎爬行的內容用ifame框架進行顯示。這樣就能夠讓ifram發揮真正的效果了，并且 有我們網站中的代碼也能夠得到非常大的精簡。舉一個樣例，就如筆者上文提到的加入微博直播信息，這些微博信息我們并不須要提供給搜索引擎。而我們須要提供的 是與訪客的一個互動的體驗，例如以下圖所看到的，而假設我們使用ifame框架嵌入微博的信息，不僅能夠簡便的加入網站的微博直播平臺。同一時候我們看到代碼也十分的 精簡。
iframe好在可以把原先的網頁所有原封不動顯示下來,可是假設用在首頁,是搜索引擎最套討厭的.那么你的站點即使做的在好,也排不到好的名次!如 果是動態網頁。用include還好點！可是必需要去除他 的<html><head><title><body>標簽！
總結：框架的長處
??? 重載頁面時不須要重載整個頁面，僅僅須要重載頁面中的一個框架頁(降低了數據的傳輸，添加了網頁下載速度)
??? 方便制作導航欄
框架的缺點
??? 會產生非常多頁面，不easy管理
??? 不easy打印
??? 瀏覽器的后退button無效
??? 代碼復雜,無法被一些搜索引擎索引到
??? 多數小型的移動設備（PDA 手機）無法全然顯示框架
??? 多框架的頁面會添加server的http請求
??? 因為上面諸多缺點，因此不符合標準網頁設計的理念,已經被標準網頁設計拋棄
提示: 眼下框架的全部長處全然能夠使用Ajax實現。因此已經沒有必要使用框架了。
CSS盒模型原理
1、W3C 盒子模型的范圍包括 margin、border、padding、content，而且 content 部分不包括其它部分。
2、IE 盒子模型的范圍也包括 margin、border、padding、content，和標準 W3C 盒子模型不同的是：IE 盒子模型的 content 部分包括了 border 和 pading。
CSS display:none和visibility:hidden的差別
visibility:hidden隱藏，但在瀏覽時保留位置；CSS display:none視為不存在。且不載入！
總結
以上是生活随笔為你收集整理的前端开发面试题集锦（一）的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： MS SQL 语法大全
- 下一篇： 《玩转掌上生活——手机网上生活达人秘笈》