這是個人網羅的比較常見的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樣式
缺點是對於一個包含很多網頁的網站,在每個網頁中使用嵌入式,進行修改樣式時非常麻煩。單一網頁可以考慮使用嵌入式。
匯入式
將一個獨立的.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;