Ⅰ 前端做不出筆試
基礎知識一點要過關,打鐵還需自身硬,多刷一些演算法題,看一些大廠的筆試面試題目,自己做一做,練練手,其他都是平時的積累,想進大廠就早做積累,把自己的項目經歷回憶清楚,以便在面試中對答如流。比如可以按照每段經歷遇到的問題,解決方法,思考與體會等等來准備,同時在簡歷中突出自己最有價值的地方,這里一定要提前了解目標前端公司的需求,平時要多累計項目經驗和自己提前學習一些前端的知識,多做做小項目之類的,有機會也可以去大廠實習,增加自己的實習經驗與閱歷
Ⅱ 前端面個試咋這么奇葩,筆試題根本沒啥用
前端面試不一定都需要筆試。
因為像一些比較技術比較牛的前端開發工程師,它是很難接受筆試,面試的,因為筆試的內容一般都是一些基礎方面的內容但是這些內容在實際應用過程中是很少用到的,所以一般筆試是很不容易通過的,但是他的技術能力是非常牛的,所以他是不會接受筆試的,有些公司也不一定需要筆試。
Ⅲ web前端筆試題(HTML/CSS篇)
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前端面試筆試的時候可以百度嗎
您好:
通常來說,是不限制使用手機查詢的。
如果是您需要查詢某些不常用的關鍵字或英語單詞,這一般不會有問題。
如果您是尋找大段的代碼實現,這樣就不太好了。。。
Ⅳ web前端好學嗎
隨著互聯網的發展,各種小程序、APP以及很多互聯網+創業公司的興起,對現在前端開發工程師的要求也越來越高,如何適應目前IT行業時代的發展趨勢,一個優秀的前端開發工程師要掌握哪些技能呢?
三、Node開發
這一部分主要ES6的基本用法、兼容性和核心語法,能使用ES6實現前端的模塊開發,學習Node開發,並能用Node.js操作MongoDB資料庫。
四、前端框架
這一部分主要是學習Vue、React、Angular這些前端主流框架,在實際開發中做到熟練運用,提高開發效率。
五、小程序與APP開發
掌握小程序和APP的開發,學習第三方AI平台的使用,並學習React Native混合開發框架,實現快速開發。
通過以上的介紹,相信大家都了解了成都Web前端開發需要學習的內容,現在隨著行業的發展,對這塊的求要求越來越高,對高端人才的需求也越來越多,只有大家掌握的知識越多,掌握的技能越全面,越好,之後的選擇才更多,發展前景更好。
Ⅵ web前端開發容易學會嗎難不難
web前端不算難,只要你想學,都可以掌握,但是你是自己看書學習,還是去培訓班還是有區別的。看書也能學會,但老師會給你解惑答疑,帶領你真正進行項目實戰,幫助挺大的。具體來說,你在學習之前要清楚自己需要學啥:
言語根底:HTML、CSS、JavaScript
HTML: 是構成頁面展示的根底,是一種很簡單可視化的標識言語,說白了即是 一是一,你寫二就出二。網上一切的頁面網站,不管多麼牛逼最終都會轉化成html,被瀏覽器渲染出來,用作展示。
CSS: 又稱作樣式表,簡單點說即是html的外衣,將html包裝的鮮艷動聽。
JavaScript:是一種直譯式腳本言語,十分靈敏,能夠在任何瀏覽器上開發與調試的一種動態類型、弱類型、根據原型的言語。
簡言之
HTML是一些網頁控制項,css是美化這些控制項的代碼(層疊樣式表),JS(JavaScript)是一種增強表現力的腳本語言,可以做出很多動態及交互性較強的效果。
學完能幹什麼?
前端開發工程師的主要職責是與交互設計師、 視覺設計師協作,根據設計圖用HTML和CSS完成頁面製作(也可能是一個人完成所有)。同時,在此基礎之上,對完成的頁面進行維護和對網站前端性能做相應的優化。另外,一名合格的前端開發工程師,應該具有一定的審美能力和基礎的美工操作能力,能很好的與交互及視覺協作。
祝福你早日成功。
Ⅶ 經典的 Web 前端或者 JavaScript 面試筆試題有哪些
一、不定項選擇題(每題3分,共30分)x0dx0a1.聲明一個對象,給它加上name屬性和show方法顯示其name值,以下代碼中正確的是(D)x0dx0aA.varobj=[name:"zhangsan",show:function(){alert(name);}];x0dx0aB.varobj={name:」zhangsan」,show:」alert(this.name)」};x0dx0aC.varobj={name:」zhangsan」,show:function(){alert(name);}};x0dx0aD.varobj={name:」zhangsan」,show:function(){alert(this.name);}};x0dx0a2.以下關於Array數組對象的說法不正確的是(CD)x0dx0aA.對數組里數據的排序可以用sort函數,如果排序效果非預期,可以給sort函數加一個排序函數的參數x0dx0aB.reverse用於對數組數據的倒序排列x0dx0aC.向數組的最後位置加一個新元素,可以用pop方法x0dx0aD.unshift方法用於向數組刪除第一個元素x0dx0a3.要將頁面的狀態欄中顯示「已經選中該文本框」,下列JavaScript語句正確的是(A)x0dx0aA.window.status=」已經選中該文本框」x0dx0aB.document.status=」已經選中該文本框」x0dx0aC.window.screen=」已經選中該文本框」x0dx0aD.document.screen=」已經選中該文本框」x0dx0a4.點擊頁面的按鈕,使之打開一個新窗口,載入一個網頁,以下JavaScript代碼中可行的是(AD)x0dx0aA.