web前端筆試題集錦(HTML/CSS篇)

　　導讀：網頁不再只是承載單一的文字和圖片，各種富媒體讓網頁的內容更加生動，網頁上軟件化的交互形式為用戶提供了更好的使用體驗，這些都是基于前端技術實現的。以下是由應屆畢業生網小編J.L為您整理推薦的前端開發筆試題目，歡迎參考閱讀。

　　一、HTML/CSS

　　1，讓一個input的背景顏色變成紅色

　　2，div的高寬等于瀏覽器可見區域的高寬，瀏覽器滾動，div始終覆蓋瀏覽器的整個可見區域

　　思路：

　　(1)先放置一個div1，浮動：position:absolute;top:0px;left:0px;

　　(2)再放置一個div2，浮動：position:absolute;top:0px;left:0px;width:100%;height:100%;

　　(3)在div2中放置一個div3，令其高度超過瀏覽器高度，使div2產生滾動條

　　(4)對html,body進行樣式設置：width:100%;height:100%;overflow:hidden->不讓瀏覽器產生滾動條，避免頁面出現兩個滾動條

　　(5)編寫JavaScript，另div2的高度等于頁面可見高度，寬度等于頁面可見寬度，注意，在計算完可見高度height和可見寬度width后，要對這兩個值做處理，可見寬度-div2的滾動條的寬度，滾動條的寬度我這里假設是20px

　　這樣題目基本就完成了，不過瀏覽器的兼容性還不是很好。

　　3，IE、FF下面CSS的解釋區別

　　(1) 讓頁面元素居中

　　ff{margin-left:0px;margin-right:0px;width:***}

　　ie上面的設置+text-align:center

　　(2) ff：不支持濾鏡

　　ie：支持濾鏡

　　(3) ff：支持!important

　　ie支持*，ie6支持_

　　(4) min-width,min-height

　　FF支持，IE不支持，IE可以用css expression來替代

　　(5) Css Expression

　　FF不支持，IE支持

　　(6) cursor：hand

　　IE下可以顯示手指狀，FF下不行

　　(7) UL的默認padding和margin

　　IE下ul默認有margin，FF下ul默認有padding

　　(8) FORM的默認margin

　　IE下FORM有默認margin，FF下margin默認為0

　　4，一個定寬元素在瀏覽器(IE6，IE7，Firefox)中橫向居中對齊的布局，請寫出主要的HTML標簽及CSS

　　思路：

　　IE6/7：text-align:center

　　Firefox：margin:0 auto(margin-top和margin-bottom也可以為其他數字，關鍵是margin-left,margin-right為auto)

　　5，CSS中margin和padding的區別

　　margin是元素的外邊框，是元素邊框和相鄰元素的距離

　　Padding是元素的內邊框，是元素邊框和子元素的距離

　　6，最后一個問題是，如何制作一個combo選項，就是可以輸入可以下拉菜單選擇。

　　思路：

　　(1)布局select和input，讓input覆蓋select，除了select的下拉圖標，以方便select選擇

　　(2)編寫JS，為select添加onchange事件，onchange時將input的value置成select選中的指

　　7，

　　中alt和tittle的區別

　　alt：圖片顯示不出來了就提示alt

　　title：鼠標劃過圖片顯示的提示

　　8，用css、html編寫一個兩列布局的網頁，要求右側寬度為200px，左側自動擴展。

　　在這里我使用了兩種方式：

　　(1)使用position

　　HTML:

　　left

　　right

　　(2) 使用float

　　HTML:

　　固定寬度

　　自適應

　　二者的CSS公用，如下：

　　html,body{width:100%;height:100%;margin:0px;padding:0px;}

　　.container {width:100%;height:400px;position:relative;}

　　.fl1 {float:left;}

　　.left {width:100%;height:400px;background:#AFFFD0;position:absolute;}

　　.right {width:200px;height:400px;background:#F9AFFF;position:absolute;right:0px;top:0px;}

　　.clear {clear:both;overflow:hidden;height:0px;}

　　.container2 {width:100%;height:400px;margin-top:100px;}

　　.left2 {background:#afffd0;height:400px;width:200px;margin-right:-3px;}

　　.right2 {height:400px;background:#f9afff;}

　　9，解釋document.getElementByIdx_x_x_x("ElementID").style.fontSize="1.5em"

　　em是相對長度單位，相當于當前對象內文本的字體尺寸，如果當前行內文本的字體尺寸未被指定，則相對于瀏覽器的默認字體尺寸。

　　該語句將id為ElementID的元素的字體設置為當前對象內文本的字體尺寸的1.5倍

　　10，Doctype? 嚴格模式與混雜模式-如何觸發這兩種模式，區分它們有何意義? 行內元素有哪些?塊級元素有哪些?CSS的盒模型?

　　DOCTYPE是文檔類型，用來說明使用的HTML或者XHTML是什么版本，其中的DTD叫文檔類型定義，里面包含了文檔規則，瀏覽器根據定義的DTD來解析頁面的標識并展現出來

　　DOCTYPE有兩種用途：一個可以進行頁面的有效性驗證，另一個可以區分瀏覽器使用嚴格模式還是混雜模式來解析CSS。

　　嚴格模式和混雜模式是瀏覽器解析CSS的兩種模式，目前使用的大部分瀏覽器對這兩種模式都支持，但是IE5只支持混雜模式。

　　可那個過DOCTYPE聲明來判斷哪種模式被觸發

　　(1) 沒有DOCTYPE聲明的網頁采用混雜模式解析

　　(2) 對使用DOCTYPE聲明的網頁視不同瀏覽器進行解析

　　(3) 對于瀏覽器不能識別的DOCTYPE聲明，瀏覽器采用嚴格模式解析

　　(4) 在ie6下，如果在DOCTYPE聲明之前有一個xml聲明比如

　　，采用混雜模式解析，在IE7，IE8中這條規則不生效。

　　(5) 在ie下，如果DOCTYPE之前有任何字符，都會導致它進入混雜模式，如：

　　區分這兩種模式可以理解瀏覽器解析CSS的區別，主要是在盒模式的解釋上。

　　常見的塊級元素有：DIV,FORM,TABLE,P,PRE,H1~H6,DL,OL,UL等

　　常見的內聯元素：SPAN,A,STRONG,EM,LABEL,INPUT,SELECT,TEXTAREA,IMG,BR等

　　CSS盒模型用于描述為一個HTML元素形成的矩形盒子，盒模型還涉及元素的外邊距，內邊距，邊框和內容，具體來講最里面的內容是元素內容，直接包圍元素內容的是內邊距，包圍內邊距的是邊框，包圍邊框的是外邊距。內邊距，外邊距，邊框默認為0。

　　11，CSS引入的方式有哪些? link和@import的區別?

　　引入css的方式有下面四種

　　(1) 使用style屬性

　　(2) 使用style標簽

　　(3) 使用link標簽

　　(4) 使用@import引入

　　Link和@import區別：

　　(1) link屬于XHTML標簽，@import是CSS提供的一種方式。Link除了加載CSS外，還可以做很多事情，如定義RSS，rel連接屬性等;@import只能加載CSS

　　(2)加載順序不同，當頁面被加載的時候，link加載的CSS隨之加載，而@import引用的CSS會等到頁面完全下載完之后才會加載

　　(3)兼容性差別，由于@import是CSS2.1提出的，所以老的瀏覽器不支持，IE系列的瀏覽器IE5以上才能識別，而link沒有這個問題

　　使用DOM控制樣式的差別，使用JavaScript控制DOM去改變樣式的時候，只能操作link，@import不可以被DOM操作。

　　12，如何居中一個浮動元素?

　　一個浮動元素里面包含的元素可以水平居中，原理如下：

　　讓浮動元素left相對于父元素container右移50%，浮動元素left的子元素left-child相對于left左移50%就可以實現left-child相對于container水平居中

　　垂直居中類似，不過操作的不是left而是top

　　13，HTML5和CSS3的了解情況

　　有所了解

　　HTML5和CSS3分別是新推出的HTML和CSS規范，前世是XHTML2和CSS2，目前還在草案階段，不過得到了Apple，Opera，Mozilla，Google，Microsoft不同程度的支持，也開發出了不少基于他們的應用。

　　HTML5相對于原來的HTML規范有一些變化：

　　(1)DOCTYPE更簡潔

　　(2)新增了一些語義化標簽，如article,header,footer,dialog等

　　(3)新增了一些高級標簽，如,,

　　CSS3相對于CSS2也新增了不少功能

　　(1) 選擇器更加豐富

　　(2) 支持為元素設置陰影

　　(3) 無需圖片能提供圓角

　　14，你怎么來實現下面這個設計圖

　　(1) 切圖

　　(2) 布局，采用兩欄布局，分別左浮動

　　(3) 編寫css代碼

　　15，css 中id和class如何定義,哪個定義的優先級別高?

　　id：#***，***為HTML中定義的id屬性

　　class:.***，***為HTML中定義的class屬性

　　id比class的優先級高

　　16，用html實現如下表格(不如嵌套實用表格)

　　三行三列,其中第一行第一列和第二行第一列合并; 第二行第二列和第二行第三列合并(現場畫表)

　　運行結果如下：

　　17，web標準網站有那些優點

　　(1) Web標準網站結構和布局分離，使網站的訪問和維護更加容易

　　(2) Web標準網站結構，布局以及頁面訪問都標準化，使網站能在更多的web標準設備中訪問，兼容性更好

　　(3) Web標準網站語義化更好，語義化的XHTML不僅對用戶友好，對搜索引擎也友好。

【web前端筆試題(HTML/CSS篇)】相關文章：

谷歌HTML/CSS規范06-22

Web前端開發筆試題集錦11-21

web前端面試題201611-17

Html/Css新手入門攻略01-23

web前端實習報告09-06

web前端簡歷封面05-28

web前端簡歷模板05-29

web前端自我介紹06-28

如何面試Web前端開發10-10

web前端簡歷封面模板05-06