『壹』 麻煩告知這道web前端題怎麼做
這就是購物車的功能
<!DOCTYPEhtml>
<html>
<head>
<metacharset="UTF-8">
<title>購物車功能實現</title>
<styletype="text/css">
*{
padding:0;
margin:0;
box-sizing:border-box;
}
.fl{float:left;}
.fr{float:right;}
.clear{clear:both;}
.main{
width:1200px;
margin:0auto;
}
.quanxuan,.quanxuan1{margin-top:20px;}
.checkbox{
width:16px;
height:16px;
border:1pxsolid#e5e5e5;
}
.checked{
background:url(images/i.png)no-repeat;
background-size:100%;
}
.rece{
margin-left:20px;
cursor:pointer;
display:block;
text-align:center;
width:20px;
height:20px;
background-color:#C1E2B3;
}
.add{
cursor:pointer;
text-align:center;
width:20px;
height:20px;
background-color:#C1E2B3;
}
.number{
width:50px;
height:20px;
padding-left:10px;
border:1pxsolid#e5e5e5;
background-color:#fff;
}
.sum{margin-left:100px;}
</style>
</head>
<body>
<divclass="main">
<divclass="quanxuan">
<pclass="checkboxfl"></p>
<pclass="fl">全選</p>
<divclass="clear"></div>
</div>
<divclass="all">
<divclass="quanxuan1">
<pclass="checkboxfl"></p>
<divclass="fl">
<divclass="fl">
<spanclass="recefl">-</span>
<spanclass="flnumber">1</span>
<spanclass="addfl">+</span>
<divclass="clear"></div>
</div>
<spanclass="flsum">300</span>
<divclass="clear"></div>
</div>
<divclass="clear"></div>
</div>
<divclass="quanxuan1">
<pclass="checkboxfl"></p>
<divclass="fl">
<divclass="fl">
<spanclass="recefl">-</span>
<spanclass="flnumber">1</span>
<spanclass="addfl">+</span>
<divclass="clear"></div>
</div>
<spanclass="flsum">300</span>
<divclass="clear"></div>
</div>
<divclass="clear"></div>
</div>
<divclass="quanxuan1">
<pclass="checkboxfl"></p>
<divclass="fl">
<divclass="fl">
<spanclass="recefl">-</span>
<spanclass="flnumber">1</span>
<spanclass="addfl">+</span>
<divclass="clear"></div>
</div>
<spanclass="flsum">300</span>
<divclass="clear"></div>
</div>
<divclass="clear"></div>
</div>
<divclass="quanxuan1">
<pclass="checkboxfl"></p>
<divclass="fl">
<divclass="fl">
<spanclass="recefl">-</span>
<spanclass="flnumber">1</span>
<spanclass="addfl">+</span>
<divclass="clear"></div>
</div>
<spanclass="flsum">300</span>
<divclass="clear"></div>
</div>
<divclass="clear"></div>
</div>
</div>
<!--計算總價-->
<spanclass="zong">0</span>
</div>
<scriptsrc="js/jquery-2.2.1.min.js"type="text/javascript"charset="utf-8"></script>
<scripttype="text/javascript"src="js/shop.js"></script>
</body>
</html>
$(function(){
//單選
$(".quanxuan1.checkbox").click(function(){
if($(this).hasClass("checked")){
$(this).removeClass("checked");
$(".quanxuan").find(".checkbox").removeClass("checked");
$(this).siblings("div").find(".sum").removeClass("yong");
vararr1=[];
varlastMoney=0;
$(".yong").each(function(){
arr1.push(parseInt($(this).text()))
})
for(vari=0;i<arr1.length;i++){
lastMoney+=arr1[i]
}
$(".zong").text(lastMoney);
}else{
$(this).addClass("checked");
$(this).siblings("div").find(".sum").addClass("yong");
vararr1=[];
varlastMoney=0;
$(".yong").each(function(){
arr1.push(parseInt($(this).text()))
})
for(vari=0;i<arr1.length;i++){
lastMoney+=arr1[i]
}
$(".zong").text(lastMoney);
}
})
//全選功能
$(".quanxuan.checkbox").click(function(){
if($(this).hasClass("checked")){
$(this).removeClass("checked");
$(".sum").removeClass("yong");
$(".quanxuan.checkbox").removeClass("checked");
$(".quanxuan1.checkbox").removeClass("checked");
vararr1=[];
varlastMoney=0;
$(".yong").each(function(){
arr1.push(parseInt($(this).text()))
})
for(vari=0;i<arr1.length;i++){
lastMoney+=arr1[i]
}
$(".zong").text(lastMoney);
}else{
$(this).addClass("checked");
$(".sum").addClass("yong");
$(".quanxuan.checkbox").addClass("checked");
$(".quanxuan1.checkbox").addClass("checked");
vararr1=[];
varlastMoney=0;
$(".yong").each(function(){
arr1.push(parseInt($(this).text()))
})
for(vari=0;i<arr1.length;i++){
lastMoney+=arr1[i]
}
$(".zong").text(lastMoney);
}
})
//增加數量
$(".add").click(function(){
what=$(this);
varnumadd=parseInt(what.prev().text());
varsum1=parseInt(what.parents("div").siblings(".sum").text());
varnum=parseInt(numadd)+1;
what.prev().text(num);
varsumd=sum1/numadd;
varsum2=sumd*num;
vara=what.parents("div").siblings(".sum").text(sum2);
vararr1=[];
varlastMoney=0;
$(".yong").each(function(){
arr1.push(parseInt($(this).text()))
})
for(vari=0;i<arr1.length;i++){
lastMoney+=arr1[i]
}
$(".zong").text(lastMoney);
})
//減少數量
$(".rece").click(function(){
what=$(this);
varnumadd=parseInt(what.next().text());
varsum1=parseInt(what.parents("div").siblings(".sum").text());
if(what.next().text()==1){
returnfalse;
}else{
varnum=parseInt(numadd)-1;
what.next().text(num);
varsumd=sum1/numadd;
varsum2=sumd*num;
vara=what.parents("div").siblings(".sum").text(sum2);
vararr1=[];
varlastMoney=0;
$(".yong").each(function(){
arr1.push(parseInt($(this).text()))
})
for(vari=0;i<arr1.length;i++){
lastMoney+=arr1[i]
}
$(".zong").text(lastMoney);
}
})
})自己下載一個jQuery文件
『貳』 如何成功的面試WEB前端開發
近來幾個月，一直在努力尋找前端戰友，未果，一路的招聘經歷下來，心生不少感慨， 一直都很小心翼翼的，怕錯失了高人，又更加怕失誤把關不夠招到不合格的同學進來公司，對公司對項目造成某些影響。
面試前端工程師對我來說是一件非常有意思的事，因為面試過程很大程度上也是自我提升的過程。無論大公司還是小公司，之所以在如何招聘到真正有能力的 前端工程師方面會遇到同樣的問題，就是因為負責招聘的那些人不知道自己公司需要什麼樣的人，結果問問題時也問不到點子上。經過這幾年在行業里的摸索，我總 結出了自己的一套很有效的面試前端工程的方法。
有的應聘者說我不好對付，但留給他們這樣的印象也並非我所願。我覺得之所以他們說我不好對付，主要是因為我問他們問題時問得太細了。以前我曾專門寫過一些 東西，告訴應聘者怎麼才能通過我的面試（Surviving an interview with me）以及優秀的前面工程師應該具備什麼樣的素質（What makes a good front end engineer?），而我的面試可以說完全是按照那兩篇文章的標准進行的。我不會問一些特別偏門的問題，也不認為出幾道邏輯題就能考出人的真實水平。我 唯一的想法就是確定你能否勝任我們要招的這個職位。為此，我需要簡單地考察如下幾個方面。
基本知識
我們生活在互聯網時代，你想知道的任何事情幾乎都能在15分鍾內找到相關信息。可是，能找到信息並不等於你會使用它。我認為所有前端工程師至少都應 該掌握某些基本的知識，才能有效地完成自己的工作。如果一遇到問題，就停下工作上網四處搜索解決方案，怎麼可能保證按期完成工作呢？聽聽，還有誰在說「我 不知道，但我可以上網搜到。」請這些同學把手舉起來，讓大家認識一下（immediately raises a flag for me.）。下面我列出一些基本的知識點，這些都是我認為一名前端工程師（無論工作年頭長短）在沒有任何外來幫助的情況應該知道的。
DOM結構——兩個節點之間可能存在哪些關系以及如何在節點之間任意移動。
DOM操作——怎樣添加、移除、移動、復制、創建和查找節點。
事件——怎樣使用事件以及IE和DOM事件模型之間存在哪些主要差別。
XMLHttpRequest——這是什麼、怎樣完整地執行一次GET請求、怎樣檢測錯誤。
嚴格模式與混雜模式——如何觸發這兩種模式，區分它們有何意義。
盒模型——外邊距、內邊距和邊框之間的關系，IE 8以下版本的瀏覽器中的盒模型有什麼不同。
塊級元素與行內元素——怎麼用CSS控制它們、它們怎樣影響周圍的元素以及你覺得應該如何定義它們的樣式。
浮動元素——怎麼使用它們、它們有什麼問題以及怎麼解決這些問題。
HTML與XHTML——二者有什麼區別，你覺得應該使用哪一個並說出理由。
JSON——它是什麼、為什麼應該使用它、到底該怎麼使用它，說出實現細節來。
重申一下，上述這些知識點都應該是你應該「想都不用想」的東西。我一開始問的所有問題都是想摸清你對所有這些領域知識的掌握程度。雖然上面列出的這些知識點並沒有面面俱到，但我覺得你至少應該掌握這些，才有可能跟我坐到一間辦公室里來。
少量提問
我非常贊同面試者問的問題越少越好。反復問應聘者各種問題既不公平，也很無聊。我在任何一次面試中，通常只問三個大問題，但每個問題又會涉及我所能想到的多個方面。回答每個大問題一般要經過幾個步驟，這樣我就可以在每個步驟中穿插著問一些小問題。比如說：
現在有一個正顯示著Yahoo!股票價格的頁面。頁面上有一個按鈕，你可以單擊它來刷新價格，但不會重新載入頁面。請你描述一下實現這個功能的過程，假設伺服器會負責准備好正確的股票價格數據。
這個問題牽扯到一組我想要考察的基本知識點：DOM結構、DOM操作、事件處理、XHR和JSON。如果我要求你對換一種處理股票價格的方式，或者 讓你在頁面中顯示其他信息，就可以把更多的知識點包括進來。對於經驗比較豐富應聘者，我也可以自如地擴展要考察的知識范圍，最簡單像JOSN與XML的區 別、安全問題、容量問題，等等。
我還希望應聘者給出的任何解決方案中都不要使用庫。我想看到最原生態的代碼，你就當頁面中沒有包含任何庫。你說你對哪個庫了解多少多少，但我不能把 關於庫的知識作為評判能力的因素，因為庫是會隨時間變化的。我需要的是真正理解庫背後的機制，特別是能夠徒手寫出一個自己的庫的人。
解決問題
做為一名前端工程師，最值得高興的事莫過於解決同一個問題會有很多種不同的方法，而你要做的就是找出最合適的方法來。我在提問的時候，經常會在應聘 者解釋完一種方法後問他們還有沒有第二種方法。此時我會跟他們說，假設你的這個方法由於種種原因被否決了，那麼你還能不能給出另一種方法。這樣做可以達到 兩個目的。
首先，可以測試出他們是否在毫無意義地復述書本中的東西。不能不承認，某些人確實有過目不忘的天賦，聽他們在那裡滔滔不絕地講，你會覺得他們什麼都 明白。可是，只要一跟這些人談到怎麼查找方案無效的原因，以及能否拿出一個新方案來，他們往往就傻眼了。這時候，如果我聽到「我不明白這個方案為什麼不夠 好」之類的反問，心裡立刻就明白我的問題已經超出了他們的能力范圍，而他們只是想拿自己死記硬背的結論來矇混過關。
其次，可以測試出他們已經掌握的（還是那句話，「想都不用想」）瀏覽器技術知識。如果他們對瀏覽器平台的核心知識有較好的理解，想出解決同一問題的不同方案根本沒有那麼難。
對一名前端工程師來說，這絕對是最重要的能力。前端工程師在工作中遇到本該如此卻並未如此的難題（說你啦，IE6），應該說是一件很平常的事。一個方案無效就無計可施的人，做不了前端工程師。
考核應聘者解決問題能力的另一層原因，與我的個人喜好有關。在搞清楚應聘者知道什麼不知道什麼之後，我就會想著問一個他們知識領域之外的問題。這樣 做的目的，就是想看看他們怎樣運用已有的知識解決新問題。在解決問題的每一步，我也准備了一些提示，以防有人會卡殼打艮（在我面前15分鍾一言不發，對我 評價這個人毫無幫助）。我真正感興趣的，是他們能夠從上一步前進到下一步。我希望看到一個人就在我眼前學到新知識。
注意：所有問題都與瀏覽器技術相關。我不相信出幾道抽象的邏輯題，就能夠考出某人解決Web技術問題的能力。在我看來，這無異於讓素描大師畫肖像（或者讓劉翔跟博爾特同場競技），沒有意義，也得不到任何有價值的信息。
有激情
要成為一名優秀的前端工程師，最重要的莫過於對自己做的事要有激情。我們技能都不是從學校中或者從研討會上學來的，因此前端工程師必須具備自學能 力。瀏覽器技術的變化可謂日新月異，所以也只有不斷提升自己的技能才做得到與時俱進。我雖然不能強迫誰必須多看博客、不斷學習，但想應聘前端工程師的人恐 怕還是必須這么做的。
你怎麼知道誰對這種工作有沒有激情？實際上非常簡單。我只問一個簡單的問題：「目前你對什麼Web技術最感興趣？」這個問題永遠不會過期，而且也幾 乎不可能出錯……除非你答不上來。就眼下來說，我希望你對這個問題給出的技術中包括WebSocket、HTML、WebGL、客戶端資料庫，等等。只有 對Web開發充滿激情的人，才會堅持不懈地學習新知識、掌握新技能；這些人才是我真正想要的。當然，我會讓他們詳細解釋自己提到的技術，以保證他們不是隨 口說了幾個時髦的新詞彙。
最後一點
計算機科學或者Web設計方面的知識當然也有用，但那都是基本知識之外的東西。只要基本知識在那兒了，一切就都有了基礎，想擴充知識面也不難。可 是，如果等到正式上班以後，還得從頭學習基本技能，那種難度是不可同日而語的。另外，高級前端工程師與一般工程師相比，肯定需要掌握更多的技能。而面試幾 乎沒有經驗大學畢業生，同樣也會有一套完全不同的程序。我在這篇文章里列出來的都是一些最基本的東西。
對於那些還沒有多少面試經驗的人，我總是喜歡告訴他們，面試完了只要問自己一個問題就行：你想以後跟這個人在一起共事嗎？如果不管為什麼，回答是不，那就是不。
『叄』 求web前端面試題庫及答案
1.對WEB標准以及W3C的理解與認識
標簽閉合、標簽小寫、不亂嵌套、提高搜索機器人搜索幾率、使用外 鏈css和js腳本、結構行為表現的分離、文件下載與頁面速度更快、內容能被更多的用戶所訪問、內容能被更廣泛的設備所訪問、更少的代碼和組件，容易維 護、改版方便，不需要變動頁面內容、提供列印版本而不需要復制內容、提高網站易用性；
2.xhtml和html有什麼區別
HTML是一種基本的WEB網頁設計語言，XHTML是一個基於XML的置標語言
最主要的不同：
XHTML 元素必須被正確地嵌套。
XHTML 元素必須被關閉。
標簽名必須用小寫字母。
XHTML 文檔必須擁有根元素。
3.Doctype? 嚴格模式與混雜模式-如何觸發這兩種模式，區分它們有何意義?
用於聲明文檔使用那種規范（html/Xhtml）一般為 嚴格 過度 基於框架的html文檔
加入XMl聲明可觸發，解析方式更改為IE5.5 擁有IE5.5的bug
4.行內元素有哪些?塊級元素有哪些?CSS的盒模型?
塊級元素：div p h1 h2 h3 h4 form ul
行內元素: a b br i span input select
Css盒模型:內容，border ,margin，padding
5.CSS引入的方式有哪些? link和@import的區別是?
內聯 內嵌 外鏈 導入
區別 ：同時載入
前者無兼容性，後者CSS2.1以下瀏覽器不支持
Link 支持使用javascript改變樣式，後者不可
6.CSS選擇符有哪些?哪些屬性可以繼承?優先順序演算法如何計算?內聯和important哪個優先順序高?
標簽選擇符 類選擇符 id選擇符
繼承不如指定 Id>class>標簽選擇
後者優先順序高
7.前端頁面有哪三層構成，分別是什麼?作用是什麼?
結構層 Html 表示層 CSS 行為層 js
8.css的基本語句構成是?
選擇器{屬性1:值1;屬性2:值2;……}
9.你做的頁面在哪些流覽器測試過?這些瀏覽器的內核分別是什麼?
Ie(Ie內核) 火狐（Gecko） 谷歌（webkit） opear(Presto)
10.寫出幾種IE6 BUG的解決方法
1.雙邊距BUG float引起的 使用display
2.3像素問題 使用float引起的 使用dislpay:inline -3px
3.超鏈接hover 點擊後失效 使用正確的書寫順序 link visited hover active
4.Ie z-index問題 給父級添加position:relative
5.Png 透明 使用js代碼 改
6.Min-height 最小高度 ！Important 解決』
7.select 在ie6下遮蓋 使用iframe嵌套
8.為什麼沒有辦法定義1px左右的寬度容器（IE6默認的行高造成的，使用over:hidden,zoom:0.08 line-height:1px）
『肆』 求web前端開發筆試題
騰訊WEB前端開發三輪面試經歷及面試題
【一面】~=110分鍾 2013/04/24 11:20 星期三
進門靜坐30分鍾做題。
填空題+大題+問答題
>>填空題
何時接觸電腦 何時接觸前端
運算符 字元串處理 延時 display position XMLHttpRequest 正則
Jquery綁定事件 cookie
>>大題
BOM瀏覽器信息
瀏覽器兼容性舉例
閉包作用與舉例
新聞ul列表，插入3個，獲取index
全文單詞首字母大寫
ajax過程
>>邏輯題
任何時間分針和時針夾角
文章單詞（字母）頻率出現最高
30分鍾等到車概率是70%，那10分鍾呢？
一個班學舞蹈的有75%，學唱歌的有85%，問同時學習舞蹈和唱歌的最多多少，最少多少？
兩個很大數的加法運算
>>我的提問
為什麼不問我框架
你覺得我哪些方面還有欠缺，覺得我如何
如果有望進入二面，什麼時候可以得到通知
>>完了之後一起下樓時
我說其他幾家公司的問題和騰訊的有比較大的區別，
區別是XXXXXX
然後他問我家在哪裡
然後說深圳還是比較適合我
我說但願還能見到你
他笑了笑
【二面】~=40分鍾 2013/04/25 14:00 星期四
面試時間是兩點鍾，兩點過幾分進入了面試官所在的包間。
進去之前樓下簽到的hr要我把一摞草稿紙帶到621房間的面試官，進門給他之後，他說那把大椅子是壞的，
要我往後坐一點（防止向前傾倒）。
開始的時候他沒怎麼說話，埋頭看著我的簡歷，於是我主動開始扯了幾句關於自己的介紹。也不知他聽到沒
有，等我說完，馬上又說：好吧，你先自我介紹下。（一臉黑線...）
期間問了我為什麼不打算考研，為什麼選擇前端，我做的最自豪的事情是什麼。
嘰哩吧啦一陣子後，他要我說說我的人生規劃和職業規劃（頗為蛋疼，這些問題不是應該HR面才會問的么
），我順著他的來，也比較xx的說了一番。
反向代理
輸入網址到出現頁面的過程（IP解析，DNS解析等）
頁面流量
堆棧
接著，問了我-1在計算機中怎麼表示，如何判斷數組A是否為數組B的子集。
然後是一個概率問題，假設長江以北有80W人，長江以南有20W人，A向B打電話算一個電話，如果打了
10W個電話，那麼長江以北打向長江以南的電話有多少個？
沒問太多問題，都是些基礎的，最後他問我有什麼問題。
>>我問了問
為什麼不問我前端的問題
如果通過二面，什麼時候可以給我回復
對我有什麼學習上的建議
面試官留言：「一把刀有刀鋒和刀背，刀鋒要磨銳利，但是刀背的鍛煉也要加強。」
【HR面】~=30分鍾 2013/04/27 20:00 星期六
進去先看上幾位面試官對我的評價，安靜時刻我跟她扯淡了幾句，緩和了下尷尬的氣氛。
然後她瞄了瞄我的簡歷，接著就問我考不考研，很明顯我的答案是不。然後她又問為什麼~
接著讓我說說自己最滿意的一件事和最不滿意的一件事，自己最大的缺點和最大的優點
扯了半天之後（此處略去20分鍾扯淡），又開始看我的簡歷，問了我項目中遇到哪些困難，我說了一個還未
解決的bug，她反問為什麼不解決，然後嘰哩吧啦了一陣子。
最後問我有沒有什麼問題。按慣例，問了問最早什麼時候給通知，然後問了問期間如果有不明白問題可以通過
什麼方式聯系她之類的。
整個過程還算順利。
HR告訴我五一之後可以查詢錄取狀態，求人品吧~
順便把在搜狐和網易的面試筆試經歷也說說吧~
>>搜狐
搜狐的太久了，記不太清楚了
那次只為攢經驗，是俺平生第一次參加公司面試。不過收獲還是有的~
時間太久了，也記不清了，沒有提交筆試題，但是還是要我去面試了。
問他有幾輪面試，告訴我因時間匆忙，只給一輪技術面，如果滿意直接HR。
大概問題記不太清。
雖然感覺答的還不錯，但是最後還是被刷了。
【技術面】~=60分鍾
-問了下我在團隊學了些什麼。
-然後就是很多「你是怎麼理解XX」。。
-XX中有 閉包，原型鏈， 框架結構等
>>網易
今天4.27，好像是3.26參加的面試，時間太久，也記得不是很清楚了。
我沒有把任何面試官當做正經的面試官，男的就是我的學長，女的就是我的學姐，僅此而已，所以每次交流都是平和的心態。
學長們（每次面我的都是個男的）時不時露出笑意，現場氣氛沒有那麼緊張。
【一面】 ~=30分鍾
閉包
IE6趨勢
框架
【二面】 ~=90分鍾
框架比較 jQuery prototype YUI
框架特點
css兼容性 IE6 bug
seaJS AMD CMD kissy
JS原型鏈 閉包
JS基礎細節
不讓談網路框架
【HR面】~=25分鍾
自我介紹
身邊人的評價
最不滿意的一件事情
規劃
為什麼不想考研
有什麼困難
薪資待遇
何時通知
『伍』 web前端面試經常問到的面試題有哪些
1、 列舉web性能優化？
1)
減少http請求次數。合並文件、利用css sprite把零散的圖片整合到一張圖上。2)
減少DNS查找。3)
減少從定向。4)
響應時間。使用AJAX進行緩存，減少http請求。5)
延遲載入組件.6)
預載入組件。7)
減少節點的數量。8)
切分組件到多個域。9)
最小化iframe。10)
杜絕http404錯誤。2、 介紹一下XMLHttpRequest對象的常用方式和屬性?
open(「method」,」URL」) 建立對伺服器的調用，第一個參數是HTTP請求方式
可以為GET，POST或任何伺服器所支持的您想調用的方式。
第二個參數是請求頁面的URL。
send()方法，發送具體請求
abort()方法，停止當前請求
readyState屬性 請求的狀態 有5個可取值 0=未初始化 ，1=正在載入
2=以載入，3=交互中，4=完成
responseText 屬性 伺服器的響應，表示為一個串
reponseXML 屬性 伺服器的響應，表示為XML
status 伺服器的HTTP狀態碼，200對應ok 400對應not found
『陸』 誰有web前端的面試題給傳一份
HTML+CSS
1.對WEB標准以及W3C的理解與認識？
（1）web標准規范要求，書寫標簽必須閉合、標簽小寫、不亂嵌套，可提高搜索機器人對網頁內容的搜索幾率；
（2）建議使用外鏈css和js腳本，從而達到結構與行為、結構與表現的分離，提高頁面的渲染速度，能更快地顯示頁面的內容；
（3）樣式與標簽的分離，更合理的語義化標簽，使內容能被更多的用戶所訪問、內容能被更廣泛的設備所訪問、更少的代碼和組件， 從而降低維護成本、改版更方便；
（4）不需要變動頁面內容，便可提供列印版本而不需要復制內容，提高網站易用性；
遵循w3c制定的web標准，能夠使用戶瀏覽者更方便的閱讀，使網頁開發者之間更好的交流。
2.xhtml和html有什麼區別?
HTML是一種基本的WEB網頁設計語言，XHTML是一個基於XML的置標語言；
最主要的不同：
XHTML 元素必須被正確地嵌套。
XHTML 元素必須被關閉。
標簽名必須用小寫字母。
XHTML 文檔必須擁有根元素。
3.Doctype? 嚴格模式與混雜模式-如何觸發這兩種模式，區分它們有何意義?
用於聲明文檔使用那種規范（html/Xhtml）一般為 嚴格 過度 基於框架的html文檔
加入XMl聲明可觸發，解析方式更改為IE5.5 擁有IE5.5的bug
4.行內元素有哪些?塊級元素有哪些?CSS的盒模型?
塊級元素：div p h1 h2 h3 h4 form ul
行內元素: a b br i span input select
Css盒模型:內容，border ,margin，padding
『柒』 有哪些經典的 Web 前端或者 JavaScript 面試筆試題
、定項選擇題 （每題3共30）
1. 聲明象給加name屬性show顯示其name值代碼確（ D ）
A. var obj = [name:"zhangsan",show:function(){alert(name);}];
B. var obj = {name:zhangsan,show:alert(this.name)};
C. var obj = {name:zhangsan,show:function(){alert(name);}};
D. var obj = {name:zhangsan,show:function(){alert(this.name);}};
2. 關於Array數組象說確（ CD ）
A. 數組數據排序用sort函數排序效非預期給sort函數加排序函數參數
B. reverse用於數組數據倒序排列
C. 向數組位置加新元素用pop
D. unshift用於向數組刪除第元素
3. 要頁面狀態欄顯示已經選該文本框列JavaScript語句確（ A ）
A. window.status=已經選該文本框
B. document.status=已經選該文本框
C. window.screen=已經選該文本框
D. document.screen=已經選該文本框
4. 點擊頁面按鈕使打新窗口載入網頁JavaScript代碼行（ AD ）
A. button value=new
onclick=open(『new.html』, 『_blank』)/>
B. button value=new
onclick=window.location=』new.html』;/>
C. button value=new
onclick=location.assign(『new.html』);/>
D. _blankaction=new.html>
submit value=new/>
5. 使用JavaScript向網頁輸
hello
代碼行（ BD ）
A. text/javascript>
document.write(
hello
);
B. text/javascript>
document.write(
hello
);
C. text/javascript>
hello
D.
text/javascript>
document.write(hello);
6. 析面代碼：
text/javascript>
function writeIt (value) { document.myfm.first_text.value=value;}
#ffffff>
myfm>
text name=first_text>
text name=second_text>
說確（ CD ）
A. 頁面第二文本框輸入內容滑鼠離第二文本框第文本框內容變
B. 頁面第文本框輸入內容滑鼠離第文本框第二文本框復制第文本框內容
C. 頁面第二文本框輸入內容滑鼠離第二文本框第文本框復制第二文本框內容
D. 頁面第文本框輸入內容滑鼠離第文本框第二文本框內容變
7. 面JavaScript語句（ D ）實現檢索前頁面表單元素所文本框並全部清空
A. for(vari=0;i< form1.elements.length;i++) {
if(form1.elements.type==text)
form1.elements.value=";}
B. for(vari=0;i
if(forms[0].elements.type==text)
forms[0].elements.value=";
}
C. if(document.form.elements.type==text)
form.elements.value=";
D. for(vari=0;i
for(var j=0;j
if(document.forms.elements[j].type==text)
document.forms.elements[j].value=";
}
}
8. 表單(form1)文本框元素(fname)用於輸入電號碼格式：010-82668155要求前3位010緊接-面8位數字要求提交表單根據述條件驗證該文本框輸入內容效性列語句（ A ）能確實現功能
A. var str= form1.fname.value;
if(str.substr(0,4)!=010-|| str.substr(4).length!=8 ||
isNaN(parseFloat(str.substr(4))))
alert(效電號碼);
B. var str= form1.fname.value;
if(str.substr(0,4)!=010- && str.substr(4).length!=8 &&
isNaN(parseFloat(str.substr(4))))
alert(效電號碼);
C. var str= form1.fname.value;
if(str.substr(0,3)!=010-|| str.substr(3).length!=8 ||
isNaN(parseFloat(str.substr(3))))
alert(效電號碼);
D. var str= form1.fname.value;
if(str.substr(0,4)!=010-&& str.substr(4).length!=8 &&
!isNaN(parseFloat(str.substr(4))))
alert(效電號碼);
9. 關於則表達式聲明6位數字郵編代碼確（ C ）
A. var reg = /\d6/;
B. var reg = \d{6}\;
C. var reg = /\d{6}/;
D. var reg = new RegExp(\d{6});
10. 關於JavaScriptxml處理說明確（ BCD ）
A. Xml種擴展標記語言格式更規范作未html替代
B. Xml般用於傳輸存儲數據html補充兩者目同
C. JavaScript解析處理xml數據瀏覽器同其做同
D. IE瀏覽器處理xml首先需要創建ActiveXObject象
二、問答題
1. 列舉瀏覽器象模型BOM用至少4象並列舉window象用至少5 （10）
象：Window document location screen history navigator
：Alert() confirm() prompt() open() close()
2. 簡述列舉文檔象模型DOMdocument用查找訪問節點並做簡單說明 （10）
Document.getElementById 根據元素id查找元素
Document.getElementByName 根據元素name查找元素
Document.getElementTagName 根據指定元素名查找元素
三、程序題
1、補充按鈕事件函數確認用戶否退前頁面確認關閉窗口； （10）
text/javascript >
function closeWin(){
//處添加代碼
if(confirm(確定要退)){
window.close();
}
}
buttonvalue=關閉窗口onclick=closeWin()/>
2、寫簡單描述html標簽（帶屬性始標簽結束標簽）則表達式並字元串html標簽除掉（15）
var str = div
面段落
;
//
text/javascript>
varreg = /<\/?\w+\/?>/gi;
varstr = div
面段落
;
alert(str.replace(reg,"));
3、完foo()函數內容要求能夠彈框提示前選第幾單選框（10）
Content-Type content=text/html;charset=utf-8″ />
text/javascript >
function foo() {
//處添加代碼
var rdo =document.form1.radioGroup;
for(var i =0 ;i
if(rdo.checked){
alert(您選擇第+(i+1)+單選框);
}
}
}
form1″ >
radio name=radioGroup/>
radio name=radioGroup/>
radio name=radioGroup/>
radio name=radioGroup/>
submit/>
4、完函數showImg()要求能夠態根據拉列表選項變化更新圖片顯示 （15）
text/javascript >
function showImg (oSel) {
//處添加代碼
var str = oSel.value;
document.getElementById(pic).src= str+.jpg;
}
picsrc=img1.jpgwidth=200″ height=200″ />
sel>
img1>城市
img2>都市早報
img3>青山綠水
『捌』 參加Web前端面試一定看的Web前端面試題庫（一）
今天小編要跟大家分享的文章是關於參加Web前端面試一定看的Web前端面試題庫。正在學習web前端知識准備參加web前端面試的小夥伴們來和小編一起看一看吧。
HTML(5)和CSS3方面
01．前端與後端數據交互的格式有哪些，為什麼大部分現在都用json而不用xml？
答：XML：
JSON：{name:」知了堂」,age:3}
JSON書寫方便節省位元組，更輕量，前後台都有直接解析JSON的方法（JSON.stringfity/parse）使用方便。
02．Flex布局熟悉嗎，說幾個常用的屬性。
答：這個幾乎每天都在用，還是挺熟悉的。
__
display：flex
___align-items多個
__
align-content：單個
___justify-content
___justify-items
___flex-direction
__
flex-wrap：
__
flex-basic：初始盒子寬度_lex
_
_lex-grow：增長因子2004*40=1601,1,1,21/5*40_lex
___flex-shrink
:縮減因子20060*4=240
03.說一下CSS盒模型。
答：CSS的盒模型包含了以下幾個內容margin,padding,border,content。
在計算盒子寬高的時候，IE和Chrome會有一些區別，IE算到border，Chrome的寬度只包含content區域，因此CSS3提供了box-sizing這個屬性來修改。
04.CSS常用選擇器，選擇器權重問題。
答：*(has，not，target，root。。。。)通配符，ID，class，attr屬性，element，子代（>+~）,
___UI狀態偽類選擇器（hover,active,link,seceted..，checked），
___結構性偽類選擇器(nth-child,fist-child,last,nth-of-type...before,after....)
___!important
>style>id>class>elemnet>偽類和屬性
05.請用5種方式實現元素垂直居中。
答：
（1）flex
（2）Tranform
（3）定位+margin負值（知道子節點寬高）
（4）定位+margin:auto
（5）JS動態計算top、left值
06.什麼是BFC？垂直margin重疊是為什麼？怎麼解決這個問題？
答：
概念：BFC全稱BlockFormatting
Context，中文意思為塊級格式上下文。
通俗的來說：BFC是一個獨立的布局環境，我們可以理解為一個箱子（實際上是看不見摸不著的），箱子內部的元素無論如何翻江倒海，都不會影響到外部。轉換為BFC的理解則是：BFC中的元素的布局是不受外界的影響（我們往往利用這個特性來消除浮動元素對其非浮動的兄弟元素和其子元素帶來的影響。比如清除浮動）並且在一個BFC中，塊元素與行元素都會垂直的沿著其父元素的邊框排列。
如何觸發BFC
1.浮動元素，float除none以外的值
2.position的值不為static或者relative
3.display不為none
4.overflow除了visible以外的值
BFC的應用
1.解決浮動塌陷問題
2.自適應兩欄布局（我們還可以運用BFC可以阻止元素被浮動元素覆蓋的特性來實現自適應兩欄布局。方法：給沒有浮動的元素加overflow：hidden。）
3.解決設置margin值重疊問題。
總結：
BFC就是頁面上的一個隔離的獨立容器，容器裡面的子元素不會影響到外面的元素。
07.什麼是浮動，有什麼作用，有何副作用，以及如何清除浮動？
答：浮動是使用給節點添加float屬性，最初的設計是用來實現文字環繞的。
添加了float的節點脫離文檔流，同時觸發節點的BFC，讓節點往一個方向靠，並排成一行。
當一個父節點的子節點全部浮動，就會造成父節點高度塌陷，
解決的辦法首先是可以給父節點主動添加高度值，再者利用只要有一個子節點不浮動原理來添加一個不浮動的節點（通常使用偽元素before，after），再者還可以觸發父節點的bfc，常用的定位，或者overflow：hidden。
08.CSS裡面有哪些相對單位？都是相對什麼的？
答：REM,EM,VW,VH等
__
REM：相對於根節點html的font-size
__
EM：父節點的font-size
__W：視口的寬度為100VW，相對於把視口分為100份
__
VH：視口高度為100VH，同理
__隕系ノ歡伎梢栽諞貧俗鮃趁媸逝洌ǔJ褂_EM和VW
09.fixed是相對於誰定位的？如果加上transform會出現問題嗎？
答：fixed定位相對於瀏覽器視口來定位的。
添加上transform以後，fixed定位會失效。如果fixed元素的祖先有transform屬性,則fixed元素會相對與這個祖先計算,而不是視口。
10.為什麼不推薦用style內聯元素？內聯元素有什麼缺點？（css文件可以緩存）
答：首先是style是節點的屬性，不能被緩存；代碼的可讀性和可維護性相對弱一些，特別是多人協作開發的時候。但是如果一個頁面的style樣式足夠少的時候，可以使用style元素，因為一次請求最多攜帶14K的數據，如果足夠小，還可以節約一次請求。
11.簡單描述http與https協議，以及為什麼要三次握手？什麼是長鏈接？
答：http與https都是目前主流傳輸協議。
目前http協議已經發展到2.0階段，支持長鏈接，斷點續傳，cache緩存策略，多路復用，伺服器推送等。
https相對於http更安全，增加了證書SSL加密，埠是433。
客戶端SYN=1,Seq
=x，服務端接受到後，服務端就知道了，有一個客戶端要鏈接我，然後伺服器就會開啟一個TCPsocket的埠，然後返回數據給前端也是SYN=1,SEQ=Y,ACK=x+1，客戶端接受到後，在發一個seq，和ACK+1.主要是為了防止開啟無用的鏈接，或者網路延遲丟包，伺服器無法確定到底客戶端有沒有收到消息。
在使用長連接的情況下，當一個網頁打開完成後，客戶端和伺服器之間用於傳輸HTTP數據的TCP連接不會關閉，客戶端再次訪問這個伺服器時，會繼續使用這一條已經建立的連接。
Keep-Alive不會永久保持連接，它有一個保持時間，可以在不同的伺服器軟體（如Apache）中設定這個時間。實現長連接需要客戶端和服務端都支持長連接。
為何需要長鏈接?
長鏈接可以省去較多的TCP建立和關閉的操作，減少浪費，節約時間。
12.http常見狀態碼有哪些？301和302的區別是什麼？304是指什麼？
答：404：找不到資源；
500：伺服器內部錯誤；
200：請求成功，並返回數據；
301：永久重定向；
302：_偈幣貧墒褂迷_RI；
304：資源未修改，可使用緩存；
400：請求語法錯誤（一般為參數錯誤）；
403：沒有許可權訪問。。。等
13.瀏覽器頁面渲染的流程是什麼（輸入url後頁面發生什麼）？
答：首先dns解析IP，建立tcp鏈接下載資源，構建dom樹，當遇到link標簽，會下載並執行解析css（不會阻止dom樹的構建）當遇到script標簽的是，dom樹構建會暫停，下載並執行完js才會繼續（defer（下載延遲執行），async（非同步下載並執行））然後再布局和繪制（layout,paint）最後再render。
14.什麼是reflow與repain？哪些操作會觸發reflow，如何避免？
答：reflow：迴流，當元素的尺寸、結構或觸發某些屬性時，瀏覽器會重新渲染頁面，稱為迴流。
__repain：重繪，當元素的樣式（布局不發生）發生改變的時候。
以下常見操作都會觸發：
瀏覽器窗口大小改變
元素尺寸、位置、內容發生改變
元素字體大小變化
添加或者刪除可見的dom元素
激活CSS偽類（例如：:hover）等
盡量減少DOM操作。
15.HTML5常用的API有哪些？你用過哪些？
答：video、audio，獲取dom的方式（queryselector），websocket
Canvas，svg，requestAnimationFrame，Geolocation，stroage，notification，OrientationAPI用於檢測手機的擺放方向等
16.請列舉出幾個常見的瀏覽器兼容性問題？
答：現在市面上IE678基本已經停止使用了，所以盡量不要說這方面的兼容性。
1、不同瀏覽器的默認margin和padding不一致
2、圖片的默認間距不一致
3、獲取視口的寬高window.innerheight/width
4、CSS3的動畫，過渡，漸變，flex也有
5、Canvas，SVG
6、IE9以下不能的opacity，使用filter:alpha(opacity=50);
7、event.offsetX/Y
8、綁定事件IE9才支持
17.什麼是瀏覽器緩存（知道什麼是強緩存和協商緩存）？
答：當瀏覽器訪問過後的資源，會被瀏覽器緩存的本地，當下次在訪問頁面的時候，如果沒有過期，直接讀取緩存，加快瀏覽器的載入效率。
http緩存機制：
1、Expires：通過設置最大緩存時間，當時間超過了就去伺服器下載，
2、http1.1，cache-control：max-age=time，當time過期後，檢測etag帶上etag往伺服器發請求，如果etag沒變，直接告訴瀏覽器讀本地緩存，如果沒有etag就會檢測Last-Modified，判斷如果上一次更改的時候，距離本次訪問時間比較久，說明文件沒有發生改變，返回304。
強緩存就是當前訪問時間還在設置的最大時間范圍內。
協商緩存就是時間過了，通過檢查etag或者last-modifed來使用緩存的機制。
18.說一下瀏覽器垃圾回收機制
答：老：標記清除演算法，GC會檢測當前對象有沒有被變數所引用，如果沒有就回收。
新：Scavenge，把內存空間分為兩部分，分別為From空間和To空間。當一個空間滿了以後，會把空間中活動對象轉移到另外一個空間，這樣互換。
以上就是小編今天為大家分享的關於參加Web前端面試一定看的Web前端面試題庫的文章，希望本篇文章能夠對正准備參加web前端面試的小夥伴們有所幫助，想要了解web前端知識記得關注北大青鳥web培訓官網，最後祝願小夥伴們工作順利！
『玖』 web前端 基礎 操作題
<!DOCTYPEhtml>
<html>
<head>
<metacharset="UTF-8">
<title>第一題</title>
<style>
html,body{width:100%;height:100%;}
body{position:relative;margin:0;}
button{position:absolute;top:0;bottom:0;left:0;right:0;margin:auto;width:100px;height:40px;color:#FFF;font-size:16px;font-family:"微軟雅黑";border-radius:8px;background-color:#f49610;}
</style>
</head>
<body>
<formaction="">
<buttononclick="alert('你點我了~~')">點我</button>
</form>
</body>
</html>
第一題如上（保存文件為.html形式）
---------------------------------------------------------------------------
第二題如下（html部分保存文件為.html形式，JS部分保存為.js文件。兩個文件放在同一個文件夾下，因為我的src路徑是這樣寫的，你可以改）
<!DOCTYPEhtml>
<html>
<head>
<metacharset="UTF-8">
<title>第二題</title>
<scriptsrc="pulsate.js"></script>
<style>
html,body{width:100%;height:100%;}
body{position:relative;margin:0;}
button{position:absolute;top:0;bottom:0;left:0;right:0;margin:auto;width:100px;height:40px;color:#FFF;font-size:16px;font-family:"微軟雅黑";border-radius:8px;background-color:#f49610;}
</style>
</head>
<body>
<formaction="">
<button>點我</button>
</form>
</body>
</html>
下面是第二題的，JS部分：
window.onload=function(){
varbtn=document.getElementsByTagName("button")[0];
btn.onclick=function(){
alert("哎呀，你又點我了~");
}
}加油~