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