『壹』 前端頁面由哪些頁面構成，作用是什麼
前端頁面構成：
結構（HTML）、樣式（CSS）、邏輯（JavaScript）
『貳』 前端的認識和理解
WEB前端是由網頁設計與製作發展而來的，隨著工作的細化，需要有人完成美工圖到網頁的製作，從而出現了WEB前端開發這個詞。WEB前端開發主要是使用HTML、CSS、JavaScript技術，將美工提供的美工圖轉化為網頁。同時，需要顧及SEO以及後台的數據。WEB前端，相當於是一個連接美工、後台以及用戶的中間平台。
想入門web前端的夥伴都不太清楚關於web前端開發是什麼意思，Web前端開發工程師，主要職責是利用(X)HTML/CSS/JavaScript/Flash等各種Web技術進行客戶端產品的開發。完成客戶端程序（也就是瀏覽器端）的開發，開發JavaScript以及Flash模塊，同時結合後台開發技術模擬整體效果，進行豐富互聯網的Web開發，致力於通過技術改善用戶體驗。WEB前端開發主要是使用HTML、CSS、JavaScript技術，將美工提供的美工圖轉化為網頁。
我覺得前端開發就是給企業搭建門戶類的網站，以後可以往設計或者更高級的開發師發展，也可以往技術類的管理發展，那麼對於未來兩年的計劃你可以在邊上班的時候利用空閑時間還可以多往更高層次的技術方面延伸，每天多學一點，因為技術是不斷的更新。
『叄』 HTML5面試中常會被問到的面試題有哪些
1.XHTML和HTML有什麼區別
HTML是一種網頁設計語言，XHTML是一個置標語言。兩者最大的不同是：XHTML元素必須被正確嵌套;XHTML元素必須被關閉;標簽名必須用小寫字母;XHTML文檔必須擁有根元素。
2.前端頁面有哪三層構成，分別是什麼?作用是什麼?
結構層HTML，表示層 CSS ，行為層 js。
3.什麼是語義化的HTML?
HTML語義化就是讓頁面的內容結構化，便於對搜索引擎解析;在沒有樣式的情況下也以一種文檔格式顯示，並且是容易閱讀的。搜索引擎的爬蟲依賴於標記來確定上下文和各個關鍵字的權重。這樣使閱讀源代碼的人對網站更容易將網站分塊，便於閱讀維護理解。
4.Doctype作用?標准模式與兼容模式各有什麼區別?
DOCTYPE作用是告知瀏覽器的解析器用什麼文檔標准解析這個文檔。如果DOCTYPE不存在或者是格式上的不正確可以回會導致文檔以兼容模式來呈現。標准模式和JS運作模式都是以該瀏覽器支持的最高標准運行。在兼容模式中，頁面以向後兼容的方式顯示,模擬瀏覽器的行為以防止站點無法工作。
5. cookies，sessionStorage 和 localStorage 三者有何區別?
Cookie是在瀏覽器和伺服器間來回傳遞的。sessionStorage和localStorage的存儲空間比cookies會更大些;而且sessionStorage和localStorage相比cookies有更多的豐富易用的介面;另外，sessionStorage和localStorage都有它們各自獨立的存儲空間。
6.如何實現瀏覽器內多個標簽頁之間的通信?
調用localstorge、cookies等的本地存儲方式可以實現瀏覽器內多個標簽頁之間的通信。
更多資訊，請及時關注本平台，小編會為您做詳細的整理和總結。
『肆』 前端頁面由哪三層構成，分別是什麼作用是什麼
網頁分成三個層次，即：結構層、表示層、行為層。結構層（structurallayer）由HTML或XHTML之類的標記語言負責創建。標簽，也就是那些出現在尖括弧里的單詞，對網頁內容的語義含義做出了描述，但這些標簽不包含任何關於如何顯示有關內容的信息。例如，P標簽表達了這樣一種語義：「這是一個文本段。」表示層（presentationlayer）由CSS負責創建。CSS對「如何顯示有關內容」的問題做出了回答。行為層（behaviorlayer）負責回答「內容應該如何對事件做出反應」這一問題。這是Javascript語言和DOM主宰的領域。
『伍』 前端頁面有哪三層構成，分別是什麼作用是什麼
最准確的網頁設計思路是把網頁分成三個層次，即：結構層、樣式層、行為層。
HTML：結構層
網頁的結構或內容層是該頁面的基礎HTML代碼。正如房屋的框架為房屋的其他部分構建了一個堅實
的基礎，HTML的堅實基礎創建了一個可以在其上創建網站的平台。
結構層用於存儲客戶想要閱讀或查看的所有內容。HTML結構可以包含文本和圖像，它包括訪問者用
於瀏覽網站的超鏈接。這是在符合標準的HTML5中編碼的，可以包括文本，圖像和多媒體（視頻，音頻等）。
網站內容的每個方面都應該在結構層中表示。這允許關閉JavaScript的客戶或無法查看整個網站的
CSS訪問許可權的客戶（如果不是所有功能）。
CSS：樣式層
該層指示結構化HTML文檔如何看待網站的訪問者，並由CSS（層疊樣式表）定義。這些文件包含有
關如何在Web瀏覽器中顯示文檔的樣式說明。樣式層通常包括基於屏幕大小和設備更改站點顯示的
媒體查詢。
網站的所有視覺樣式都應位於外部樣式表中。您可以使用多個樣式表，但請記住，每個CSS文件都需
要HTTP請求才能獲取它，從而影響站點性能。
JavaScript：行為層
行為層使網站具有交互性，允許頁面響應用戶操作或基於一組條件進行更改。JavaScript是行為層最
常用的語言，但CGI和PHP也經常被使用。
當開發人員引用行為層時，大多數都是指在Web瀏覽器中直接激活的層。您可以使用此圖層直接與
DOM（文檔對象模型）進行交互。在內容層中編寫有效的HTML對於行為層中的DOM交互非常重
要。在構建行為層時，應該像使用CSS一樣使用外部腳本文件來優化速度和性能。
(5)前端頁面有哪三層構成擴展閱讀：
分層的一些好處是：
共享資源：當您編寫外部CSS或JavaScript文件時，站點上的任何頁面都可以使用該文件。如果
您需要對該文件進行更改，也許更新網站上的某些排版樣式，則使用該樣式表的每個頁面都會得到
更改。沒有必要單獨編輯網站的每個頁面，這對於大型網站來說可能是一項艱苦的任務。
下載速度更快：首次由客戶下載腳本或樣式表後，Web瀏覽器會對其進行緩存。由於這些共享
資源現在包含在瀏覽器的緩存中，因此瀏覽器中請求的其他頁面載入速度更快，從而提高了整體頁
面速度和性能。
多人團隊：如果您有多個人同時在網站上工作，您可以使用允許文件簽入和簽出的系統，以確
保每個人都使用最新版本。如果樣式和行為與結構文檔交織在一起，那就更難了。
搜索引擎優化：一個明確分離風格和結構的網站可能會對搜索引擎有更好的表現，因為它們可以更有效地抓取內容並理解頁面而不會陷入視覺風格和行為信息。
輔助功能：外部樣式表和腳本文件更易於人們和瀏覽器訪問。屏幕閱讀器等軟體可以更輕松地
處理結構層中的內容，而無需處理無論如何都無法使用的樣式。
向後兼容性：使用單獨的開發層設計的站點更可能向後兼容，因為無法使用某些CSS樣式或禁
用了JavaScript的瀏覽器和設備仍然可以查看HTML。然後，您可以使用支持它們的瀏覽器的功能逐
步增強您的網站。
『陸』 web前端面試經常問到的面試題有哪些
Web前端經常被問到的面試題及答案
一、HTML+CSS
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)
二、Javascript
1.javascript的typeof返回哪些數據類型
Object number function boolean underfind
2.例舉3種強制類型轉換和2種隱式類型轉換?
強制(parseInt,parseFloat,number)
隱式(== – ===)
3.split() join() 的區別
前者是切割成數組的形式，後者是將數組轉換成字元串
4.數組方法pop() push() unshift() shift()
Push()尾部添加 pop()尾部刪除
Unshift()頭部添加 shift()頭部刪除
5.事件綁定和普通事件有什麼區別
6.IE和DOM事件流的區別
1.執行順序不一樣、
2.參數不一樣
3.事件加不加on
4.this指向問題
7.IE和標准下有哪些兼容性的寫法
Var ev = ev || window.event
document.documentElement.clientWidth || document.body.clientWidth
Var target = ev.srcElement||ev.target
8.ajax請求的時候get 和post方式的區別
一個在url後面 一個放在虛擬載體裡面
有大小限制
安全問題
應用不同 一個是論壇等只需要請求的，一個是類似修改密碼的
9.call和apply的區別
Object.call(this,obj1,obj2,obj3)
Object.apply(this,arguments)
10.ajax請求時，如何解釋json數據
使用eval parse 鑒於安全性考慮 使用parse更靠譜
11.b繼承a的方法
12.寫一個獲取非行間樣式的函數
function getStyle(obj,attr,value)
{
if(!value)
{
if(obj.currentStyle)
{
return obj.currentStyle(attr)
}
else
{
obj.getComputedStyle(attr,false)
}
}
else
{
obj.style[attr]=value
}
}
『柒』 誰能給我出一兩道 web前端筆試題 上機題啥的，呵呵，比較常考的
[面試題] 某企業前端開發面試題
【HTML & CSS】
1. Doctype? 嚴格模式與混雜模式-如何觸發這兩種模式，區分它們有何意義?
2. 行內元素有哪些？塊級元素有哪些？CSS的盒模型？
3. CSS引入的方式有哪些? link和@import的區別是?
4. CSS選擇符有哪些？哪些屬性可以繼承？優先順序演算法如何計算？內聯和important哪個優先順序高？
5. 前端頁面有哪三層構成，分別是什麼？作用是什麼？
6. css的基本語句構成是？
7. 你做的頁面在哪些流覽器測試過？這些瀏覽器的內核分別是什麼?經常遇到的瀏覽器的兼容性有哪些？怎麼會出現？解決方法是什麼？
8. 如何居中一個浮動元素?
9. 有沒有關注HTML5和CSS3?如有請簡單說一些您對它們的了解情況！
10. 你怎麼來實現下面這個設計圖,主要講述思路 （效果圖省略）
11. 如果讓你來製作一個訪問量很高的大型網站，你會如何來管理所有CSS文件、JS與圖片？
12. 你對前端界面工程師這個職位是怎麼樣理解的？它的前景會怎麼樣？
【Javascript】
1. js是什麼，js和html 的開發如何結合？
2. 怎樣添加、移除、移動、復制、創建和查找節點
3. 怎樣使用事件以及IE和DOM事件模型之間存在哪些主要差別
4. 面向對象編程:b怎麼繼承a
5. 看看下面alert的結果是什麼
view sourceprint?1.function b(x, y, a) {
.arguments[2] = 10;
.alert(a);
}
b(1, 2, 3);
如果函數體改成下面，結果又會是什麼？
a = 10;
alert(arguments[2] );
6. 請編寫一個JavaScript函數 parseQueryString，它的用途是把URL參數解析為一個對象
var obj = parseQueryString(url);
alert(obj.key0) // 輸出0
7. ajax是什麼? ajax的交互模型? 同步和非同步的區別? 如何解決跨域問題?
8. 什麼是閉包？下面這個ul，如何點擊每一列的時候alert其index?
<ul id=」test」>
<li>這是第一條</li><li>這是第二條</li><li>這是第三條</li>
</ul>
9. 最近看的一篇Javascript的文章是？
10. 常使用的庫有哪些？常用的前端開發工具？開發過什麼應用或組件？
11.說說YSlow(可以詳細一點)
答案在參考資料裡面可以找到，答案在參考資料裡面可以找到，答案在參考資料裡面可以找到
『捌』 web前端頁面有哪三層構成，分別是什麼作用是什麼
最准確的網頁設計思路是把網頁分成三個層次，即：結構層、樣式層、行為層。
HTML：結構層
網頁的結構或內容層是該頁面的基礎HTML代碼。
CSS：樣式層
該層指示結構化HTML文檔如何看待網站的訪問者，並由CSS（層疊樣式表）定義。
JavaScript：行為層
行為層使網站具有交互性，允許頁面響應用戶操作或基於一組條件進行更改
『玖』 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）
11.標簽上title與alt屬性的區別是什麼?
Alt 當圖片不顯示是 用文字代表。
Title 為該屬性提供信息
12.描述css reset的作用和用途。
Reset重置瀏覽器的css默認屬性 瀏覽器的品種不同，樣式不同，然後重置，讓他們統一
13.解釋css sprites，如何使用。
Css 精靈 把一堆小的圖片整合到一張大的圖片上，減輕伺服器對圖片的請求數量
14.瀏覽器標准模式和怪異模式之間的區別是什麼?
盒子模型 渲染模式的不同
使用 window.top.document.compatMode 可顯示為什麼模式
15.你如何對網站的文件和資源進行優化?期待的解決方案包括：
文件合並
文件最小化/文件壓縮
使用CDN託管
緩存的使用
16.什麼是語義化的HTML?
直觀的認識標簽 對於搜索引擎的抓取有好處
17.清除浮動的幾種方式，各自的優缺點
1.使用空標簽清除浮動 clear:both（理論上能清楚任何標簽，，，增加無意義的標簽）
2.使用overflow:auto（空標簽元素清除浮動而不得不增加無意代碼的弊端,,使用zoom:1用於兼容IE）
3.是用afert偽元素清除浮動(用於非IE瀏覽器)
Javascript
1.javascript的typeof返回哪些數據類型
Object number function boolean underfind
2.例舉3種強制類型轉換和2種隱式類型轉換?
強制（parseInt,parseFloat,number）
隱式（== – ===）
3.split() join() 的區別
前者是切割成數組的形式，後者是將數組轉換成字元串
4.數組方法pop() push() unshift() shift()
Push()尾部添加 pop()尾部刪除
Unshift()頭部添加 shift()頭部刪除
5.事件綁定和普通事件有什麼區別
6.IE和DOM事件流的區別
1.執行順序不一樣、
2.參數不一樣
3.事件加不加on
4.this指向問題
7.IE和標准下有哪些兼容性的寫法
Var ev = ev || window.event
document.documentElement.clientWidth || document.body.clientWidth
Var target = ev.srcElement||ev.target
8.ajax請求的時候get 和post方式的區別
一個在url後面 一個放在虛擬載體裡面
有大小限制
安全問題
應用不同 一個是論壇等只需要請求的，一個是類似修改密碼的
9.call和apply的區別
Object.call(this,obj1,obj2,obj3)
Object.apply(this,arguments)
10.ajax請求時，如何解釋json數據
使用eval parse 鑒於安全性考慮 使用parse更靠譜
11.b繼承a的方法
12.寫一個獲取非行間樣式的函數
function getStyle(obj,attr,value)
{
if(!value)
{
if(obj.currentStyle)
{
return obj.currentStyle(attr)
}
else
{
obj.getComputedStyle(attr,false)
}
}
else
{
obj.style[attr]=value
}
}
13.事件委託是什麼
讓利用事件冒泡的原理，讓自己的所觸發的事件，讓他的父元素代替執行！
14.閉包是什麼，有什麼特性，對頁面有什麼影響
閉包就是能夠讀取其他函數內部變數的函數。
15.如何阻止事件冒泡和默認事件
canceBubble return false
16.添加 刪除 替換 插入到某個接點的方法
obj.appendChidl()
obj.innersetBefore
obj.replaceChild
obj.removeChild
17.解釋jsonp的原理，以及為什麼不是真正的ajax
動態創建script標簽，回調函數
Ajax是頁面無刷新請求數據操作
『拾』 前端框架有哪些
1. Twitter BootStrap （Apache v2.0；響應式）
時髦、直觀並且強大的前端框架，讓Web開發變得更加容易。
2. Foundation （MIT；響應式）
最先進的響應式前端框架。
3. 960gs（GPL&MIT；響應式）
960gs提供了一個簡單的網格系統，適合快速開發。
4. Skeleton（MIT；響應式）
非常漂亮的Web模板，適合響應式、移動友好的開發。
5. 99lime HTML KickStart（Free）
適合網站快速開發的極簡HTML構建模塊。
6. Kube（Free；響應式）
面向專業人員的CSS框架。
7. Less Framework（MIT；響應式）
自適應的CSS網格系統。
8. Flameinwork（Free）
適合懶人開發者的前端微框架。
9. G5 Framework（Free）
(x)HTML5、CSS、PHP前端開發框架。
10. Easy Framework（Free）
Easy Framework是一個一體化前端解決方案，分structural、 presentational、interactive三層。
11. Blueprint（Free）
一個旨在減少開發時間的前端框架。
12. YAML（Creative Commons）
(x)HTML+CSS框架，適合開發現代化浮動布局。
13. BlueTrip（Free）
一個功能全面、並且美麗的CSS框架，適合於Blueprint搭配使用。
14. YUI3:Grids CSS（BSD）
YUI Grids CSS是最著名的CSS框架之一，是由Yahoo開發小組開發而成。 YUI Grids CSS為開發者提供了預先設置的四種不同頁面寬度，六種不同的模板。
15. 52framework（Creative Commons）
對HTML5支持非常好，簡單易用。
16. elastiCSS（MIT）
一個基於Web介面和印刷布局的簡單CSS框架。
17. Emastic（Free）
一個與眾不同的CSS框架。
18. Fluid 960 Gride System（GPL/MIT）
Fluid 960 Grid System的模版是根據Nathan Smith之前的作品而創建的。即960 Grid System：傳承了MooTools和jQuery JavaScript libraries的效果。
19. xCSS（MIT）
一個面向對象的CSS框架，能讓你的工作流更加簡潔。xCSS基於CSS，可以在開發復雜樣式時，提供面向對象的工作流。
20. EM CSS Framework（MIT/GPL）
EM CSS Framework提供了一個960px寬 + 12 列網格系統 + CSS的通用樣式。