前端開發高級技術題怎麼搜

paragraph

㈣ hr如何面試web前端工程師，該問哪些技術問題

hr如何面試web前端工程師，該問哪些技術問題

一、基本知識
我們生活在網際網路時代，你想知道的任何事情幾乎都能在15分鍾內找到相關資訊。可是，能找到資訊並不等於你會使用它。我認為所有前端工程師至少都應 該掌握某些基本的知識，才能有效地完成自己的工作。如果一遇到問題，就停下工作上網四處搜尋解決方案，怎麼可能保證按期完成工作呢？聽聽，還有誰在說「我 不知道，但我可以上網搜到。」請這些同學把手舉起來，讓大家認識一下（immediately raises a flag for me.）。下面我列出一些基本的知識點，這些都是我認為一名前端工程師（無論工作年頭長短）在沒有任何外來幫助的情況應該知道的。
[list][*]
DOM結構——兩個節點之間可能存在哪些關系以及如何在節點之間任意移動。
[*]
DOM操作——怎樣新增、移除、移動、復制、建立和查詢節點。
[*]
事件——怎樣使用事件以及IE和DOM事件模型之間存在哪些主要差別。
[*]
XMLHttpRequest——這是什麼、怎樣完整地執行一次GET請求、怎樣檢測錯誤。
[*]
嚴格模式與混雜模式——如何觸發這兩種模式，區分它們有何意義。
[*]
盒模型——外邊距、內邊距和邊框之間的關系，IE 8以下版本的瀏覽器中的盒模型有什麼不同。
[*]
塊級元素與行內元素——怎麼用CSS控制它們、它們怎樣影響周圍的元素以及你覺得應該如何定義它們的樣式。
[*]
浮動元素——怎麼使用它們、它們有什麼問題以及怎麼解決這些問題。
[*]
HTML與XHTML——二者有什麼區別，你覺得應該使用哪一個並說出理由。
[*]
JSON——它是什麼、為什麼應該使用它、到底該怎麼使用它，說出實現細節來。
[/list]
重申一下，上述這些知識點都應該是你應該「想都不用想」的東西。我一開始問的所有問題都是想摸清你對所有這些領域知識的掌握程度。雖然上面列出的這些知識點並沒有面面俱到，但我覺得你至少應該掌握這些，才有可能跟我坐到一間辦公室里來。
二、少量提問
我非常贊同面試者問的問題越少越好。反復問應聘者各種問題既不公平，也很無聊。我在任何一次面試中，通常只問三個大問題，但每個問題又會涉及我所能想到的多個方面。回答每個大問題一般要經過幾個步驟，這樣我就可以在每個步驟中穿插著問一些小問題。比如說：

現在有一個正顯示著Yahoo!股票價格的頁面。頁面上有一個按鈕，你可以單擊它來重新整理價格，但不會重新載入頁面。請你描述一下實現這個功能的過程，假設伺服器會負責准備好正確的股票價格資料。
這個問題牽扯到一組我想要考察的基本知識點：DOM結構、DOM操作、事件處理、XHR和JSON。如果我要求你對換一種處理股票價格的方式，或者 讓你在頁面中顯示其他資訊，就可以把更多的知識點包括進來。對於經驗比較豐富應聘者，我也可以自如地擴充套件要考察的知識范圍，最簡單像JOSN與XML的區 別、安全問題、容量問題，等等。
我還希望應聘者給出的任何解決方案中都不要使用庫。我想看到最原生態的程式碼，你就當頁面中沒有包含任何庫。你說你對哪個庫了解多少多少，但我不能把 關於庫的知識作為評判能力的因素，因為庫是會隨時間變化的。我需要的是真正理解庫背後的機制，特別是能夠徒手寫出一個自己的庫的人。
三、解決問題
做為一名前端工程師，最值得高興的事莫過於解決同一個問題會有很多種不同的方法，而你要做的就是找出最合適的方法來。我在提問的時候，經常會在應聘 者解釋完一種方法後問他們還有沒有第二種方法。此時我會跟他們說，假設你的這個方法由於種種原因被否決了，那麼你還能不能給出另一種方法。這樣做可以達到 兩個目的。
首先，可以測試出他們是否在毫無意義地復述書本中的東西。不能不承認，某些人確實有過目不忘的天賦，聽他們在那裡滔滔不絕地講，你會覺得他們什麼都 明白。可是，只要一跟這些人談到怎麼查詢方案無效的原因，以及能否拿出一個新方案來，他們往往就傻眼了。這時候，如果我聽到「我不明白這個方案為什麼不夠 好」之類的反問，心裡立刻就明白我的問題已經超出了他們的能力范圍，而他們只是想拿自己死記硬背的結論來矇混過關。
其次，可以測試出他們已經掌握的（還是那句話，「想都不用想」）瀏覽器技術知識。如果他們對瀏覽器平台的核心知識有較好的理解，想出解決同一問題的不同方案根本沒有那麼難。
對一名前端工程師來說，這絕對是最重要的能力。前端工程師在工作中遇到本該如此卻並未如此的難題（說你啦，IE6），應該說是一件很平常的事。一個方案無效就無計可施的人，做不了前端工程師。
考核應聘者解決問題能力的另一層原因，與我的個人喜好有關。在搞清楚應聘者知道什麼不知道什麼之後，我就會想著問一個他們知識領域之外的問題。這樣 做的目的，就是想看看他們怎樣運用已有的知識解決新問題。在解決問題的每一步，我也准備了一些提示，以防有人會卡殼打艮（在我面前15分鍾一言不發，對我 評價這個人毫無幫助）。我真正感興趣的，是他們能夠從上一步前進到下一步。我希望看到一個人就在我眼前學到新知識。
注意：所有問題都與瀏覽器技術相關。我不相信出幾道抽象的邏輯題，就能夠考出某人解決Web技術問題的能力。在我看來，這無異於讓素描大師畫肖像（或者讓劉翔跟博爾特同場競技），沒有意義，也得不到任何有價值的資訊。

HR一般不會面試太深的問題，主要是了解一下你之前的工作經歷，更多的是你自己描述，中間可能會問一些初級的問題，比如，你為什麼從上一家單位離職等類似問題。

一道web前端工程師面試題，求解答。

這樣的布局用絕對定位實現最合適，ABC的外層用相對定位，里邊各列用絕對定位就可以。至於CBA且B寬度自適應，還是用絕對定位，但只定位C,A分部到兩側，中間的列margin設成左右列的寬度就可以。

web前端工程師如何才能硬氣的跳槽？

web前端開發工程師想要硬氣的跳槽，起碼應該達到以下幾點：
1.掌握扎實的技術基礎，
需要掌握技術包括：HTML、CSS、JavaScript;
HTML是Web程式設計的基礎，HTML也是一種規范，一種標准，它通過標記符號來標記要顯示的網頁中的各個部分。網頁檔案本身是一種文字檔案，通過在文字檔案中新增標記符，可以告訴瀏覽器如何顯示其中的內容。
維護大型的CSS程式碼庫並非易事，特別是那些隨意散漫未經組織的CSS程式碼極易變成一團亂麻，所以，應該掌握CSS命名規范，來幫助開發者編寫優質的程式碼。
2.深入理解前端工程化和元件開發;
需要熟悉web前端框架—— React、Vue.js等，
React為我們提供了直接易用的，以狀態為核心的前端應用開發方式，前端工程師應該會分析React內部工作原理，討論React中簡單元件、類元件等渲染流程。
Vue.js單元測試是應用開發中不可或缺的部分，日常開發中會用到的Vue.js單元測試的例子，所以應該掌握。
3.熟練掌握Web開發相關知識
至少熟悉一門後端語言，例如Node.js、Java、Go等;
Node.js內部原理視非常重要的，應該明白Node.js的主程序是如何啟動的、如何載入內建模組、os包如何實現等等。
4.對技術有熱情，有一定前端架構能力或者技術深度;具備團隊合作意識強，能夠多團隊協作開發;具備企業級大型前端應用開發經驗更佳。

如何識別一個人是web前端工程師

前端工程師需要懂得設計類程式碼和js，有需要了解一些後台語言，例如PHP等。

如何實現成為web前端工程師的夢想

1.入門階段：能夠解決一些問題的水平。有一定的基礎(比如最常見的HTML標簽及其屬性、事件、方法;最常見的CSS屬性;基礎的JavaScript程式設計能力)，能夠完成一些簡單的Web前端研發需求。
2.進階階段：將JavaScript、HTML、CSS之類的編碼幫助手冊里的每個方法/屬性都通讀幾遍!只有將基礎打好，以後的路才能走的順暢。
3.入室：最強程式碼，知道所有能夠解決需求的各種方案，能夠選擇使用最優秀的方案滿足需求。這個級別基本上產品開發程式設計中的程式碼主力。程式設計師應該能夠肯定的回答：對於這個需求而言，我的程式碼就是最優秀的程式碼。
4.注重細節，注意那些當前需求里沒有明文給出的細節：程式碼效能的差異、執行平台(瀏覽器)的差異、需求的隱性擴充套件、程式碼的向後相容等等。

如何了解web前端工程師和UI設計師

web前端工程師是不參與任何的設計，直接將網站美工製作的網站效果圖使用ps按照效果圖進行切片並使用、css、js等程式碼進行網頁的製作，最終編寫出符合w3c標準的相容各個主流瀏覽器的靜態頁面，同時還需要按照後台開發人員的要求留下一些後台資料的介面。所以說網站前端工程師更多的是程式設計而不是設計。
UI設計師一般是學美術或者設計出身，精通photoshop、AI、AE等平面設計工具，其在網站開發過程的中的職責就是按照客戶或者公司的需求設計出符合客戶需求和介面或者顏色符合大眾視覺的網站效果，如根據不同行業的需求設計顏色、設計介面風格等，其工作的最後成果就是網站的效果圖。

web前端工程師進階學習路線如何走

less和sass什麼時候學都行，1,2天就能學會。這個不著急，沒有什麼承上啟下的作用，可以單獨拿出來學。
bootstrap就是一個框架，把最主要的柵格系統看看就好。其他的大概了解能幹啥就行，很多公司，是不讓用bootstrap的，而是用原始碼自己寫。這個用一天的時間沒啥問題。
node.js和angular比較重要，如果學會，算是上了一個台階了。所以重點說說這個。
angular屬於mvvm框架，一開始覺得angular挺復雜的，所以想學一個簡單的，輕量級的，所以決定先學vue。但是在了解的過程中發現，很多的專業名詞，沒聽過，或者理解不透。所以又開始從頭學習node.js。在學習node.js的過程中又開始迷茫，發現了很多JS不懂的地方。
所以，又開始深入研究js的dom，函式，ajax，陣列等。總之用了很長的時間，浪費了很長時間。
最後總結一下啊。其實，沒必要鑽那麼多牛角尖。
先做著vue的例子，不懂的地方，直接略過，很多時候，不理解的不懂的東西，用著用著，突然就能明白。照貓畫虎先把VUE的例子跟著做一遍之後，同時梳理一下涉及到的JS知識點。能自己用vue做出幾個小成品的時候，開始結合js研究node.js。之後再去涉及angular。
angular差不多有個大概了解的時候，反過頭接著學vue，你會發現，又會發現很多新東西。
web前端這個東西特別有意思，當你達到一個高度，返回來再看以前的技術，會發現，哎呀，竟然又能發現新大陸。

廈門web前端工程師培訓哪家好

培訓學校很多，沒有具體的衡量標準的。但是可以從幾方面去選擇：
1 有很多優秀導師的
2 培養出很多優秀學員的
3 只做培訓的，沒有做其他的
4 做的比較久的。

北京WEB前端工程師培訓哪個好

建議找全程面授課程的地方學習，課程體系很重要，現在企業在用人方面講究全棧的前端工程師人才，所在在課程選擇上要慎重，學習內容要基於HTML5，要包含pc端+移動端+後端。這要才能學的系統，就業上才會有所保障。

㈤ 有哪些經典的 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. <input type=」button」 value=」new」
onclick=」open(『new.html』, 『_blank』)」/>
B. <input type=」button」 value=」new」
onclick=」window.location=』new.html』;」/>
C. <input type=」button」 value=」new」
onclick=」location.assign(『new.html』);」/>
D. <form target=」_blank」action=」new.html」>
<inputtype=」submit」 value=」new」/>
</form>
5. 使用JavaScript向網頁中輸出<h1>hello</h1>，以下代碼中可行的是（ BD ）
A. <scripttype=」text/javascript」>
document.write(<h1>hello</h1>);
</script>
B. <scripttype=」text/javascript」>
document.write(「<h1>hello</h1>」);
</script>
C. <scripttype=」text/javascript」>
<h1>hello</h1>
</script>
D. <h1>
<scripttype=」text/javascript」>
document.write(「hello」);
</script>
</h1>
6. 分析下面的代碼：
<html>
<head>
<script type=」text/javascript」>
function writeIt (value) { document.myfm.first_text.value=value;}
</script>
</head>
<body bgcolor=」#ffffff」>
<form name=」myfm」>
<input type=」text」 name=」first_text」>
<input type=」text」 name=」second_text」>
</form>
</body>
</html>
以下說法中正確的是（ 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<document.forms.length;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<document.forms.length; i++){
for(var j=0;j<document.forms.elements.length; 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. 關於JavaScript里的xml處理，以下說明正確的是（ 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. 簡述列舉文檔對象模型DOM里document的常用的查找訪問節點的方法並做簡單說明 （10分）
Document.getElementById 根據元素id查找元素
Document.getElementByName 根據元素name查找元素
Document.getElementTagName 根據指定的元素名查找元素
三、程序題
1、補充按鈕事件的函數，確認用戶是否退出當前頁面，確認之後關閉窗口； （10分）
<html>
<head>
<script type=」text/javascript」 >
function closeWin(){
//在此處添加代碼
if(confirm(「確定要退出嗎？」)){
window.close();
}
}
</script>
</head>
<body>
<input type=」button」value=」關閉窗口」onclick=」closeWin()」/>
</body>
</html>
2、寫出簡單描述html標簽（不帶屬性的開始標簽和結束標簽）的正則表達式，並將以下字元串中的html標簽去除掉（15分）
var str = 「<div>這里是div<p>裡面的段落</p></div>」;
//
<scripttype=」text/javascript」>
varreg = /<\/?\w+\/?>/gi;
varstr = 「<div>這里是div<p>裡面的段落</p></div>」;
alert(str.replace(reg,」"));
</script>
3、完成foo()函數的內容，要求能夠彈出對話框提示當前選中的是第幾個單選框。（10分）
<html>
<head>
<metahttp-equiv=」Content-Type」 content=」text/html;charset=utf-8″ />
</head>
<body>
<script type=」text/javascript」 >
function foo() {
//在此處添加代碼
var rdo =document.form1.radioGroup;
for(var i =0 ;i<rdo.length;i++){
if(rdo.checked){
alert(「您選擇的是第」+(i+1)+」個單選框」);
}
}
}
</script>
<body>
<form name=」form1″ >
<input type=」radio」 name=」radioGroup」/>
<input type=」radio」 name=」radioGroup」/>
<input type=」radio」 name=」radioGroup」/>
<input type=」radio」 name=」radioGroup」/>
<input type=」submit」/>
</form>
</body>
</html>
4、完成函數showImg()，要求能夠動態根據下拉列表的選項變化，更新圖片的顯示 （15分）
<body>
<script type=」text/javascript」 >
function showImg (oSel) {
//在此處添加代碼
var str = oSel.value;
document.getElementById(「pic」).src= str+」.jpg」;
}
</script>
<img id=」pic」src=」img1.jpg」width=」200″ height=」200″ />
<br />
<select id=」sel」>
<option value=」img1「>城市生活</option>
<option value=」img2「>都市早報</option>
<option value=」img3「>青山綠水</option>
</select></body>

㈥ 搜索Web前端開發的答案有啥軟體嗎

CSDN。
CSDN（世紀樂知）是一個專注為IT專業人士及IT企業提供集成化信息傳播與服務平台的公司，於1999年12月在北京成立。
CSDN提供IT項目外包、IT人才招聘信息、IT技術等服務。2005年獲「創新互聯網企業」稱號[1]；2008年收購時光獵人咨詢有限公司，用來發展專業IT人才業務；2010年收購JavaEye程序員深度交流社區。

㈦ web前端開發 搜索功能怎麼寫

搜索功能指的是搜索演算法的實現嗎？

如果是搜索演算法，涉及到基本的順序搜索，二分法等。

如果不是指演算法，而是網頁的搜索框：

1. html：一個textbox,一個button，

2. 在button onclick事件中，執行js搜索演算法

問題可以描述詳細點，才能更好回答你哦。

希望對你有幫助！

㈧ 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不僅對用戶友好，對搜索引擎也友好。

;

㈨ 前端開發具體用到哪些技術

1、學會HTML

HTML是網頁內容的載體內容就是網頁製作者放在頁面上想要讓用戶瀏覽的信息，可以包含文字、圖片、視頻等。要熟練掌握div、table、ul li 、p、span等這些標簽,這些都是最常用的。

2、學習CSS（Cascading Style Sheets）—樣式。

一般看到web前端開發工程師的要求裡面,有一個會使用css+html 或者 css+div 來進行界面布局,所以css是用於輔助html來布局和展示的,

稱之為「css樣式」,CSS要熟練掌握float、position、width、height，以及對於的最大最小、會使用百分百、overflow、margin、padding,標題字體、顏色變化，或為標題加入背景圖片、邊框等等,這些都是跟布局有關系的樣式,必須要掌握的。

3、JS（java）—— 行為

java是用來實現網頁上的特效效果。如：滑鼠滑過彈出下拉菜單。或滑鼠滑過表格的背景顏色改變。還有焦點新聞（新聞圖片）的輪換。可以這么理解，有動畫的，有交互的一般都是用Java來實現的。

4、學習jquery

jquery是相當於把js封裝了一套的一個js插件,目的就是操作起來更方便,代碼寫的更少,jquery入門也很簡單,那些是入門需要學的和js一樣,只是換成了jq的代碼.其他的一樣網路就夠了。

5、最好會點後台語言,比如java、php,因為前台界面的數據都是從後台來的,如果會點後台代碼,就知道怎麼跟後台交互數據是最好的, 這樣節約時間,也可以讓前端代碼更規范.不然可能因為你的寫法和後端給來的數據不能結合上,那麼前端代碼又得重新寫,那就更麻煩了。

㈩ hr如何面試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設計方面的知識當然也有用，但那都是基本知識之外的東西。只要基本知識在那兒了，一切就都有了基礎，想擴充知識面也不難。可 是，如果等到正式上班以後，還得從頭學習基本技能，那種難度是不可同日而語的。另外，高級前端工程師與一般工程師相比，肯定需要掌握更多的技能。而面試幾 乎沒有經驗大學畢業生，同樣也會有一套完全不同的程序。我在這篇文章里列出來的都是一些最基本的東西。
對於那些還沒有多少面試經驗的人，我總是喜歡告訴他們，面試完了只要問自己一個問題就行：你想以後跟這個人在一起共事嗎？如果不管為什麼，回答是不，那就是不。