這是個人網羅的比較常見的web前端面試題
方法/步驟
1、 對WEB標準以及W3C的理解與認識
標籤閉合、標籤小寫、不亂巢狀、提高搜尋機器人搜尋機率、使用外 鏈css和js指令碼、結構行為表現的分離、檔案下載與頁面速度更快、內容能被更多的使用者所訪問、內容能被更廣泛的裝置所訪問、更少的程式碼和元件，容易維 護、改版方便，不需要變動頁面內容、提供列印版本而不需要複製內容、提高網站易用性
2、xhtml和html有什麼區別
HTML是一種基本的WEB網頁設計語言，XHTML是一個基於XML的置標語言
最主要的不同：
XHTML 元素必須被正確地巢狀。
XHTML 元素必須被關閉。
標籤名必須用小寫字母。
XHTML 文件必須擁有根元素
3、 行內元素有哪些?塊 級元素有哪些?CSS的盒模型?
行內元素: a b br i span input select strong
塊 級元素：div p h1 h2 h3 h4 form ul ol li dl dd dt
css盒模型:內容，border ,margin，padding
行內元素與塊 級元素的區別：
1）塊 級元素會獨佔一行，其寬度自動填滿其父元素寬度; 行內元素不會獨佔一行，相鄰的行內元素會排列在同一行裡，知道一行排不下，才會換行，其寬度隨元素的內容而變化
2） 塊 級元素可以設定 width, height屬性，行內元素設定width, height無效【注意：塊級元素即使設定了寬度，仍然是獨佔一行的】
3) 塊 級元素可以設定margin 和 padding. 行內元素的水平方向的padding-left,padding-right,margin-left,margin-right 都產生邊距效果，但是豎直方向的padding-top,padding-bottom,margin-top,margin-bottom都不會產生邊距效果。（水平方向有效，豎直方向無效）
4、在HTML中引入CSS的方法主要有四種，它們分別是行內式、內嵌式、連結式和匯入式。
行內式
行內式是在標記的style屬性中設定CSS樣式。這種方式沒有體現出CSS的優勢，不推薦使用。
嵌入式
嵌入式是將CSS樣式集中寫在網頁的標籤對的標籤對中。格式如下：
缺點是對於一個包含很多網頁的網站，在每個網頁中使用嵌入式，進行修改樣式時非常麻煩。單一網頁可以考慮使用嵌入式。
匯入式
將一個獨立的.css檔案引入HTML檔案中，匯入式使用CSS規則引入外部CSS檔案，
匯入式會在整個網頁裝載完後再裝載CSS檔案，因此這就導致了一個問題，如果網頁比較大則會兒出現先顯示無樣式的頁面，閃爍一下之後，再出現網頁的樣式。這是匯入式固有的一個缺陷。
連結式
也是將一個.css檔案引入到HTML檔案中，但它與匯入式不同的是連結式使用HTML規則引入外部CSS檔案，它在網頁的標籤對中使用 標記來引入外部樣式表文件，使用語法如下：
使用連結式時與匯入式不同的是它會以網頁檔案主體裝載前裝載CSS檔案，因此顯示出來的網頁從一開始就是帶樣式的效果的，它不會象匯入式那樣先顯示無樣式的網頁，然後再顯示有樣式的網頁，這是連結式的優點。
總結：一般來說，做網站時把樣式多寫在多個樣式表文件中，因此我們先用連結式引入一個總的CSS檔案，然後在這個CSS檔案中在使用匯入式來引入其他的CSS檔案。但如果通過JavaScrip來動態引入CSS檔案則只能使用連結式。
5、CSS選擇符有哪些？哪些屬性可以繼承？優先順序演算法如何計算？css3新增偽類有哪些？
選擇符：標籤選擇器（div，h1，p）、id選擇器（#myid）、類選擇器（.myclassname）、相鄰選擇器（h1+p）、
子選擇器（ul > li）、後代選擇器（li a）、萬用字元選擇器（*）、屬性選擇器（a[ rel = "external"]）、偽類選擇器（a:hover, li:nth-child）
可繼承的樣式：font-size font-family color, text-indent;
不可繼承的樣式：border padding margin width height
優先順序就近原則，同權重情況下樣式定義最近者為準；載入樣式以最後載入的定位為準；
優先順序為：
！important > id > class >tag
important 比內聯優先順序高，但內聯比 id 要高
css3新增偽類舉例：
p：first-of-type 選擇屬於其父元素
6、前端頁面又哪三層構成，分別是什麼？作用是什麼？
結構層HTML 表示層CSS 行為層js
7、你做的頁面在哪些瀏覽器測試過？這些瀏覽器的核心分別是什麼？
IE（IE核心）、 火狐（Gecko）、 谷歌（webkit）、 opear（Presto）
8、寫出幾種IE6 BUG的解決辦法
雙邊距BUG：float引起的，使用display:inline（在IE7,Firefox等瀏覽器下能正確解釋左邊距10px。但是在IE6下會理解為左邊距20px。也就是說，在與浮動同方向的空白邊會加倍，解決方法是為這個div的css中新增：display:inline; 這樣就可避免雙倍邊距bug。）
3畫素問題：float引起的，使用display：inline -3px;（當使用float浮動容器後，在IE6下會產生3px的空隙，因為是確切的3px，所以，用“暴力破解”吧，比如.left _margin-right:-3px;，還有一種方法是也設定float HTML：
在ie6瀏覽狀態下，我們看到。綠色div與藍色div中間出現了一條空隙。這就是ie6下3畫素bug問題。
結果： ）超連結hover：點選後失效，使用正確的書寫順序 link visited hover active
IE z-index問題：給父級新增position:relative
Png透明：使用js程式碼改
Min-height：最小高度！important解決
select在IE6下遮蓋：使用iframe巢狀
為什麼沒有辦法定義1px左右的高度容器：IE預設的行高造成的，使用overflow:hidden; zoom:0.08; line-height:1px;
當子元素浮動且未知高度時，怎麼使父容器適應子元素的高度？
在父視窗加上overflow：auto； _zoom：1 ；這兩個樣式屬性，
overflow：auto是讓父容器來自適應內部容器的高度，
_zoom：1；是為了相容IE6而使用的CSS HACK
IE6中奇數寬高的bug
IE6還有奇數寬高的bug，解決方案就是將外部相對定位的div寬度改為偶數
IE6下為什麼圖片下方有空隙產生
解決這個bug的方法也有很多，可以是改變HTML的排版，或者定義img為display：block；或者定義vertical-align屬性值為vertical-align：top bottom middle text-bottom還可以設定父容器的字型大小為零，font-size:0
IE6下空標籤高度問題
一個空div如果高度設定為0到19px，IE6下高度預設始終19px。例如：
.c{background-color:#f00; height:2px; /*給定任何小於20px的高度*/}
如果不讓它預設為19px。而是0px的話
解決方法有3種
1）、css裡面加上overflow：hidden
2）、div裡面加上註釋
3）、css裡面加上line-height：0；然後div裡面加上#nbsp；
如何用css分別單獨定義IE6、7、8的width屬性
所有瀏覽器通用：height：100px
IE6專用：_height:100px;
IE6專用：*height：100px;
IE7專用：*+height：100px
IE7、FF共用：height：100px ！important；
css中哪些屬性可以同父元素繼承
繼承：文字類的均可繼承，列表元素可繼承
9、標籤上title與alt屬性的區別是什麼?
title:為該屬性提供資訊
alt：當圖片不顯示時，用文字代表
10、:visited 選擇器用於選取已被訪問的連結。:link選擇器對指向未被訪問頁面的連結設定樣式, :hover選擇器用於設定滑鼠指標浮動到連結上時的樣式，:active選擇器用於設定點選連結時的樣式。
11、描述css reset的作用和用途。
Reset重置瀏覽器的css預設屬性 瀏覽器的品種不同，樣式不同，然後重置，讓他們統一
如，最簡化的CSS Reset（避免瀏覽器相容問題，）
*{
padding：0；
margin：0；
}
12、解釋css sprites，如何使用。
Css 精靈 把一堆小的圖片整合到一張大的圖片上，減輕伺服器對圖片的請求數量
13、瀏覽器標準模式和怪異模式之間的區別是什麼?
14、你如何對網站的檔案和資源進行優化？期待的解決方案包括：
檔案合併、檔案最小化/檔案壓縮、使用CDN託管、快取的使用（多個域名來提供快取）
15、請說出三種減少頁面載入時間的方法（載入時間指感知的時間或者實際載入時間)
a、優化圖片
b、影象格式的選擇（gif：提供的顏色較少，可用在一些對顏色要求不高的地方）
c、優化CSS（壓縮合並CSS，如margin-top，margin-left……）
d、網址後加斜槓（如www.campr.com/目錄，會判斷這個目錄是什麼檔案型別 或者是目錄）
e、標明高度和寬度（如果瀏覽器沒有找到這兩個引數，它需要一邊下載圖片，一邊計算大小，如果圖片很多，瀏覽器需要不斷地調整頁面。這不但影響速度，也影響瀏覽體驗。當瀏覽器知道了高度和寬度引數後，即使圖片暫時無法顯示，頁面上也會騰出圖片的空位，然後繼續載入後面的內容，從而載入時間快了，瀏覽體驗也更好了。）
f、減少HTTP請求（合併檔案、合併圖片（CSS精靈，CSS sprites技術））
16、data-屬性的作用是什麼？
data-為前端開發者提供自定義的屬性，這些屬性集可以通過物件的dataset屬性獲取，不支援改屬性的瀏覽器可以通過getAttribute方法獲取
div.dataset.commentNum; // 10
需要注意的是：data-之後的以連字元分割的多個單片語成的屬性，獲取的時候使用駝峰風格。
並不是所有的瀏覽器都支援.dataset屬性，測試的瀏覽器中只有Chrome和Opera支援。
17、如何視覺隱藏網頁內容，只讓它們在螢幕閱讀器中可用？
a、display:none 的缺陷
搜尋引擎可能認為被隱藏的文字屬於垃圾資訊而被忽略
螢幕閱讀器（是為了視覺上有障礙的人設計的讀取螢幕內容的程式）會忽略被隱藏的文字。
b、visibility：hidden 的缺陷
隱藏的內容會佔據他所應該佔據物理空間
c、overflow：hidden 一個比較合理的方法
.texthidden{display:block;/*統一轉化為塊級元素*/ overflow：hidden； width：0；height：0}
就像上面的一段CSS所展示的方法，將寬度和高度設定為0，然後超多部分隱藏，就會彌補上述一、二方法中的缺陷，也達到了隱藏內容的目的。
18、填空題
a、目前常用的WEB標準靜態頁面語言是： HTML
b、改變元素的外邊距用 margin ，改變元素的內填充用 padding
c、在Table中，tr是 行 ，td是 列
d、如果給一行兩列的表格（table）定義高度樣式，在 table 標籤中定義最合理，最能減少程式碼的臃腫
e、對ul li的樣式設成無，應該是用什麼樣式？ list-style-type:none;
f、在新視窗開啟連結的方法是 target=“_blank”
g、color:#666666可縮寫為： color：#666
h、合理的頁面佈局中常聽過結構與表現分離，那麼結構是 html ， 表現是 css
19、選擇題
（1）、在下面的XHTML中，哪些可以正確地標記折行？ A
A：
B:
（
標籤插入簡單的換行符。
標籤是一個空標籤，意味著它沒有結束標籤。所以這樣是錯誤的：
）
20、請寫出超連結的順序或者你在初始樣式中的連結方法（要求預設無下劃線，滑鼠經過有下劃線）
L-V-H-A （:link 選擇器用於選取未被訪問的連結。:visited 選擇器對指向已訪問頁面的連結設定樣式，:hover 選擇器用於設定滑鼠指標浮動到連結上時的樣式，:active選擇器用於設定點選連結時的樣式。）
a：link { text-decoration:none; }
a：hover { text-decoration:underline; }
21、當float和margin同時使用時，IE6的雙倍邊距BUG如何解決？
display:inline 或者 margin-right:-3px;
22、Firework中標籤的居中問題的解決方法？
*{margin：0px auto;}
23、請寫出XHTML和CSS如何註釋？
XHTML：
css：/*註釋內容*/
24、請以縮寫方法寫出1px直線（實線）灰色（任意灰色程式碼值），上面無邊框的矩形邊框樣式
.class{border:1px solid #ccc; border-top:0px;} 或者 border:1px solid #ccc; border-top:none;