web前端測試題

Ⅰ web前端開發面試流程是怎樣的

首先投簡歷，等待hr通知面試，一般情況下先填資料，做測試題，接著開始第一面（一般問經你的個人情況，工作經歷等），資料已經交給技術，等一面通過之後接著二面，二面一般是技術面試，問你開發相關的技術問題（例如布局問題，js,框架之類的），有些公司還需要上機操作（寫一兩個頁面或者開發一個js方法等），有些公司是通過之後直接進行3面有些是改天再進行3面，3面一般就是項目經理或總經理問你一些各種各樣的問題（隨機應變就行，也有一些公司沒有這個環節），如果3面都過了，基本上就是面試成功了，接下來就是4面，也就是人事主管和你談工資待遇等問題了，這個談好之後就會告訴你什麼時候過來上班，要准備什麼東西，當然一般還會有正式的工作邀請函發到你的郵箱。如果沒有3面的公司，那人事這個環節就直接是3面了。
還有一些公司是一面之後等通知，通過的就通知你二面，然後再等通知，然後通過再三面（這樣的公司我一般不會等，太浪費時間）

Ⅱ Web前端企業面試題

答：

一、display和visibility的相同與不同點

1、相同點：display和visibility都有講元素隱藏的意思

2、不同點：display是元素隱藏，隱藏的元素不佔文檔流

而visibility隱藏的元素仍然占文檔流

二、display和visibility的屬性值

1、display

2、visibility

答：

在開發過程中經常需要循環遍歷數組或者對象，使用最多的方法 forEach、for…in 、 for…of ，整理一下他們的異同點

for循環

其實除了這三種方法以外還有一種最原始的遍歷，自Javascript誕生起就一直用的 就是for循環，它用來遍歷數組

for循環中可以使用return、break等來中斷循環

結果：

forEach

對數組的每一個元素執行一次提供的函數（不能使用return、break等中斷循環），不改變原數組，無返回值undefined。

輸出結果：

for…in

循環遍歷的值都是數據結構的鍵值

總結一句: for in也可以循環數組但是特別適合遍歷對象

結果：

for…of

它是ES6中新增加的語法，用來循環獲取一對鍵值對中的值

循環一個數組

循環一個普通對象（報錯）

答：

px：像素（Pixel）,相對長度單位。像素px是相對於顯示器屏幕解析度而言的 。--即解析度不同的機型當前對應的距離可能發生變化。(1Inches=xPx)。

所以相對於同一機型來說是一個絕對的長度單位。

em：是相對長度單位。相對於當前對象內文本的字體尺寸。如當前對行內文本的字體尺寸未被人為設置，則相對於瀏覽器的默認字體尺寸 。

以其父級元素為基準來變化長度。所以其演算法不是一個固定的值。

rem：是CSS3新增的一個相對單位（root em，根em） 。

那麼其好用在用可以直接設置HTML的font-size，然後在其子類都是以這個大小為基準變化的值。

在移動設備上，我們常常設置

此方式的目的是為了將當前屏幕(PC)解析度的px轉化成手機端的px，讓px在手機上能夠兼容此方式。

因此，此時看見的12px與PC端的12px無異。但是，如果不寫著個meta的話，那麼，瀏覽器會一直以PC的視圖來決定手機端的px的大小，讓視圖看起來變小了很多。

那麼，響應式頁面則經常配合媒體查詢media 來設置不同解析度下手機的各種不同的配置機構，然後根據父級來變化所有的相對長度。

基礎篇

1.shift

// 刪除原數組的第一項，並返回刪除元素的值，如果數組為空則返回undefined

2.unshift

// 將參數添加到原數組開頭，並返回數組的長度

//註：此方法在ie6.0下

// 測試的返回值始終為undefined，在firefox下測試的返回值為7，所以此方法不可靠

// 一般需要用返回值時可用splice代替

3.pop

// 刪除原數組的最後一項，並返回刪除元素的值；如果數組為空則返回undefined

4.push

// 將參數添加到原數組末尾，並返回數組的長度

5.concat

// 返回一個新數組，是將參數添加到原數組中構成的

6.splice

7.reverse

8.sort(orderfunction)

9.slice(start,end)

10.join(separator)

11.indexOf

12.lastIndexOf

13. Array.isArray()

14. Array.toString()

進階篇

1.forEach

是最為常用的情景，它至於遍歷，可以在獲取當前數據項的前提下，對數據進行修改。它沒有返回值。理解起來也是最容易的。

2.map

map的本意就是映射，也就是將一個值從一種形式映射到另一種形式，比如將key映射到value。它的每一次遍歷都會有一個返回值。這些返回值組合成最終的結果數組。事實就是如此

forEach和map對比

相同點

1）都是循環遍歷數組中的每一項；

2）forEach()和map()匿名函數的參數相同，參數分別是item（當前每一項）、index（索引值）、arr（原數組）；

3）this都是指向調用方法的數組；

4) 只能遍歷數組；

不相同點

1）map()創建了新數組，不改變原數組；forEach()可以改變原數組。

2）遇到空缺的時候map()雖然會跳過，但保留空缺；forEach()遍歷時跳過空缺，不保留空缺。

3）map()按照原始數組元素順序依次處理元素；forEach()遍歷數組的每個元素，將元素傳給回調函數。

3.filter

它致力於從已有的數組中篩選出符合一定條件的數據項，最後的返回值是所有符合條件的數據項構成的數組。它不會修改原來的數組。記住，它的立足點就是篩選。也僅僅是篩選。還有一點需要注意：每一次遍歷都會有一個返回值，它的類型是布爾類型。返回值只有是true，當前遍歷項才會被篩選中。不要試圖在filter中去修改原始數組。

理解: 就是在一堆數據裡面去篩選你需要的數據 或者 剔除你不需要的數據

4.find()

返回通過測試的數組的第一個元素的值,

理解:假如你去一個一群人的地方去找人 你說我找xxb 他要是在那裡就找到 不在那裡就是undefined

在第一次調用 callback 函數時會確定元素的索引范圍，因此在 find 方法開始執行之後添加到數組的新元素將不會被 callback 函數訪問到。如果數組中一個尚未被callback函數訪問到的元素的值被callback函數所改變，那麼當callback函數訪問到它時，它的值是將是根據它在數組中的索引所訪問到的當前值。被刪除的元素仍舊會被訪問到。

語法

array.find(function(value, index, arr),thisValue)

value:必須，代表當前元素，其他四個參數都是可選，index代表當前索引值，arr代表當前的數組，thisValue代表傳遞給函數的值，一般用this值，如果這個參數為空，undefined會傳遞給this值

返回值：返回符合測試條件的第一個數組元素的值，如果沒有符合條件的則返回undefined。

擴展: findIndex()方法的用法與find()方法非常類似，返回第一個符合條件的數組成員的位置，如果所有成員都不符合條件，則返回-1。自己try吧

5.every

理解: 這個就像 上課了 老師說 昨天布置的作業 只要有一個人沒有寫完 今天就不講課 然後挨個檢查 當檢查到有一個沒有寫完的時候 就不檢查了 返回 不講課了(false)

6.some

理解: 相當於在一個數組裡面找你想要的那個數 找到了 就返回true 找不到就返回false

7.rece

它這個方法是接收一個函數作為累加器,將數組中的值(從左向右)開始合並,最總為一個值 然後返回出來,callback

他可以傳四個參數:

1,previousValue:上一次調用回調返回的值,或者是提供的初始值(initialValue)

2,currentValue:數組中當前被處理的元素

3,index:不啰嗦,自己顧名思義去吧

4,array:返回調用rece的數組

彩蛋: 這里附上前幾天某某人比較喜歡的切割字元串的方法

substring() 和 substr()

相同點： 如果只是寫一個參數，兩者的作用都一樣：都是是截取字元串從當前下標以後直到字元串最後的字元串片段。

不同點： 第二個參數

substr(startIndex, lenth) // 第二個參數是截取字元串的長度（從起始點截取某個長度的字元串）；

substring(startIndex, endIndex) // 第二個參數是截取字元串最終的下標 （截取2個位置之間的字元串,『含頭不含尾'）。

1：在使用vue框架的過程中，我們經常需要給一些數據做一些初始化處理，這時候我們常用的就是在created與mounted選項中作出處理。

首先來看下官方解釋，官方解釋說created是在實例創建完成後唄立即調用。在這一步，實例已完成以下配置：數據觀測 (data observer)，屬性和方法的運算，watch/event 事件回調。然而，掛載階段還沒開始，$el 屬性目前不可見。

這話的意思我覺得重點在於說掛架階段還沒開始，什麼叫還沒開始掛載，也就是說，模板還沒有被渲染成html，也就是這時候通過id什麼的去查找頁面元素是找不到的。下面看下實例來證明。

所以，一般creadted鉤子函數主要是用來初始化數據。

2：mounted鉤子函數一般是用來向後端發起請求拿到數據以後做一些業務處理。官方解釋如下：

el 被新創建的 vm.$el 替換，並掛載到實例上去之後調用該鉤子。如果 root 實例掛載了一個文檔內元素，當 mounted 被調用時 vm.$el 也在文檔內。

這意思是該鉤子函數是在掛在完成以後也就是模板渲染完成以後才會被調用。下面看實例

下面是結果

nihao

取到了值，這說明這時候vue模板已經渲染完畢。因此，Dom操作一般是在mounted鉤子函數中進行的

computed:{} 計算屬性，什麼是計算屬性呢，我個人理解就是對數據進行一定的操作，可以包含邏輯處理操作，對計算屬性中的數據進行監控。計算屬性是基於它的以來進行更新的，只有在相關依賴發生改變時側能更新變化，以函數的形式返回結果。然後可以像綁定普通屬性一樣在模板中綁定計算屬性。

總結：
通常created使用的次數多，而mounted通常是在一些插件的使用或者組件的使用中進行操作，比如插件chart.js的使用: var ctx = document.getElementById(ID);通常會有這一步，而如果你寫入組件中，你會發現在created中無法對chart進行一些初始化配置，一定要等這個html渲染完後才可以進行，那麼mounted就是不二之選。
methods:{}中的方法都需要主動去觸發，比如點擊click之類的
而created(){}、mounted(){}、裡面的代碼都是自動去執行的，即vue生命周期到了哪一步就直接去執行對應鉤子函數裡面的代碼了，無需手動去執行
created中主要放初始化獲取數據之類，mounted()中掛載到具體的DOM節點

computed:{} 計算屬性，什麼是計算屬性呢，我個人理解就是對數據進行一定的操作，可以包含邏輯處理操作，對計算屬性中的數據進行監控。計算屬性是基於它的以來進行更新的，只有在相關依賴發生改變時側能更新變化，以函數的形式返回結果。然後可以像綁定普通屬性一樣在模板中綁定計算屬性。

mounted 是生命周期鉤子，vue的生命周期中一個實例的mounted只會運行一次。mounted在vue的渲染模板掛載到$el元素上才會調用，很顯然你export的時候el都么有自然不會運行mounted鉤子函數了。
所有的方法都應該在methods里定義，然後在created或者mounted里 使用this調用方法，用這種方式實現初始化

6、Vue中組件之間的傳參方式有哪些方式？

Vue 組件傳參的八種方式總結

Vue 組件的使用不管是在平常工作還是在面試面試中，都是頻繁出現的。因此系統的梳理一下組件之間的傳參還是非常有必要的

一、props 傳參

子組件定義 props 有三種方式:

// 第一種數組方式

// 第二種對象方式

// 第三種對象嵌套對象方式

第三種對象默認支持 4 種屬性，並且都是非必填的。可以隨意使用

父組件傳參的倆種方式

第一種靜態屬性傳參

注意：

1、在不定義 props 類型的情況下 props 接受到的均為 String。

2、當 props 屬性指定為 Boolean 時，並且只有屬性 key 沒有值 value 時接受到的是 true

第二種動態屬性傳參

注意：

1、需要區分非簡寫形式傳入的值是對象，則會對應 props 中多個值

2、會保留傳入值的類型

3、如果是表達式則獲取到的是表達式的計算結果

二、attrs 和listeners

$attrs

$attrs 會獲取到 props 中未定義的屬性（class 和 style 屬性除外）,支持響應式。常用的場景有倆種：

組件嵌套組件時可以使用 $attrs 來支持過多的屬性支持。比如 elementUI 的 table 組件。支持的屬性十幾個，而平常封裝的時候用的最多的也就一倆個。

屬性默認是添加在父組件上的，有時候想把多餘的屬性添加在子組件上（可以結合 inheritAttrs: false 屬性，讓父屬性不接受多餘的屬性）

$listeners 定義的事件都在子組件的根元素上，有時候想加到其他元素上。就可以使用 $listerners。它包含了父組件中的事件監聽器(除了帶有 .native 修飾符的監聽器)

三、$emit 通知

這里有一道考題: for 循環的時候如何拿到子組件的傳值和 for 中循環的值

答案有倆種，一是 $event, 二是 閉包。只是需要注意 $event 只能獲取到第一個值

四、v-model

這個其實是一種通過 emit，on 的組合方式。優點再於同步值方便,寫法優雅。下面三種寫法其實是一個意思

五、插槽

六、$refs, $root, $parent, $children

$root 獲取根組件

$parent 獲取父組件

$children 獲取子組件(所有的子組件，不保證順序)

$refs 組件獲取組件實例，元素獲取元素

七、project / inject

注意：注入的值是非響應的

八、Vuex

這個相當於單獨維護的一組數據，就不過多的說了。

watch，computed和methods的關系

1.watch和computed都是以Vue的依賴追蹤機制為基礎的 ，它們都試圖處理這樣一件事情：當某一個數據（稱它為依賴數據）發生變化的時候，所有依賴這個數據的「相關」數據「自動」發生變化，也就是自動調用相關的函數去實現數據的變動。

2.對methods:methods裡面是用來定義函數的，很顯然，它需要手動調用才能執行。而不像watch和computed那樣，「自動執行」預先定義的函數

watch和computed各自處理的數據關系場景不同

1. watch 擅長處理的場景： 一個數據影響多個數據

2. computed 擅長處理的場景： 一個數據受多個數據影響

watch用法 監聽下記haiZeiTuan_Name的值，會改變其他所有的值

結果：this.suoLong會變為 '橡膠海賊團索隆',以此類推

computed用法 監聽下記firstName，secName，thirdName的值，會改變luFei_Name的值

methods和computed的區別例子

注意兩次點擊computed返回的時間是相同的！！

1.兩次點擊methods返回的時間是不同的

2.注意兩次點擊computed返回的時間是相同的

【注意】為什麼兩次點擊computed返回的時間是相同的呢？new Date()不是依賴型數據 （不是放在data等對象下的實例數據） ，所以computed只提供了緩存的值，而沒有重新計算

只有符合：1.存在依賴型數據 2.依賴型數據發生改變這兩個條件 ,computed才會重新計算。

參考：http://www.cnblogs.com/penghuwan/p/7194133.html

答：https://codecat.blog.csdn.net/article/details/100031285

1、Promise

Promise 是非同步編程的一種解決方案，比傳統的解決方案——回調函數和事件——更合理和更強大，簡單地說，Promise好比容器，裡面存放著一些未來才會執行完畢（非同步）的事件的結果，而這些結果一旦生成是無法改變的

2、async await

async await也是非同步編程的一種解決方案，他遵循的是Generator 函數的語法糖，他擁有內置執行器，不需要額外的調用直接會自動執行並輸出結果，它返回的是一個Promise對象。

兩者的主要用法、語法就不贅述了，感興趣的同學可以自行查閱 es6中文文檔

兩者的區別

1、Promise的出現解決了傳統callback函數導致的「地域回調」問題，但它的語法導致了它向縱向發展行成了一個回調鏈，遇到復雜的業務場景，這樣的語法顯然也是不美觀的。而async await代碼看起來會簡潔些，使得非同步代碼看起來像同步代碼，await的本質是可以提供等同於」同步效果「的等待非同步返回能力的語法糖，只有這一句代碼執行完，才會執行下一句。

2、async await與Promise一樣，是非阻塞的。

3、async await是基於Promise實現的，可以說是改良版的Promise，它不能用於普通的回調函數。

簡單來看，這兩者除了語法糖不一樣外，他們解決的問題、達到的效果是大同小異的，我們可以在不同的應用場景，根據自己的喜好來選擇使用。

Ⅲ 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前端考事業單位難嗎

不難。事業編制招考中，計算機專業是比較熱門的專業，針對計算機專業的崗位設置非常多，這也意味著計算機專業的選擇機會更多，但能不能考上事業編，主要還是靠自身的努力，以及報考崗位的競爭比情況，本質上都要好好復習考高分。任何行業都可以選擇考事業編制。事業編制職位與專業的相關度一般不是很大，而是與個人的發展前景有關，事業編制是一個眾所周知的鐵飯碗，可以了解該之後再考慮。對症下葯，建議去了解事業單位的招聘流程及考試內容，然後有針對得准備。【點擊測試我適不適合學設計】
如果您想要學習IT知識，來千鋒教育。作為擁有IT基因和數字技術能力的教育機構，千鋒十分注重聯手高校和企業協同培養數字化人才，建立數字技能人才培育機制和行業標准，引領新時代職業教育實現高質量發展。展望未來，千鋒將在高校、企業、學員和各方合作夥伴支持下，努力成為一個有情懷、有良心、有品質的一流教育機構，為國家培養更多高質量數字技能人才，助力職業教育提質培優，助推國家數字經濟蓬勃發展。

Ⅳ 誰能給我出一兩道 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前端開發筆試題

Web前端開發筆試題集錦

Web前端開發筆試題集錦：

1，截取字元串abcdefg的efg

var str = "abcdefg";

if (/efg/.test(str)) {

var efg = str.substr(str.indexOf("efg"), 3);

alert(efg);

}

2, 判斷字元串是否是這樣組成的，第一個必須是字母，後面可以是字母、數字、下劃線，總長度為5-20

var reg = /^[a-zA-Z][a-zA-Z_0-9]{4,19}$/;

reg.test("a1a__a1a__a1a__a1a__");

3，判斷一個字元串中出現次數最多的字元，統計這個次數

//將字元串的`字元保存在一個hash table中，key是字元，value是這個字元出現的次數

var str = "abcdefgaddda";

var obj = {};

for (var i = 0, l = str.length; i < l; i++) {

var key = str[i];

if (!obj[key]) {

obj[key] = 1;

} else {

obj[key]++;

}

}

/*遍歷這個hash table，獲取value最大的key和value*/

var max = -1;

var max_key = "";

var key;

for (key in obj) {

if (max < obj[key]) {

max = obj[key];

max_key = key;

}

}

alert("max:"+max+" max_key:"+max_key);

4，IE與FF腳本兼容性 問題

(1) window.event：

表示當前的事件對象，IE有這個對象，FF沒有，FF通過給事件處理函數傳遞事件對象

(2) 獲取事件源

IE用srcElement獲取事件源，而FF用target獲取事件源

(3) 添加，去除事件

IE：element.attachEvent(onclick, function) element.detachEvent(onclick, function)

FF：element.addEventListener(click, function, true) element.removeEventListener(click, function, true)

(4) 獲取標簽的自定義屬性

IE：div1.value或div1[value]

FF：可用div1.getAttribute(value)

(5) document.getElementByName()和document.all[name]

IE;document.getElementByName()和document.all[name]均不能獲取div元素

FF：可以

(6) input.type的屬性

IE：input.type只讀

FF：input.type可讀寫

(7) 是否可用id代替HTML元素

IE：可以用id來代替HTML元素

FF：不可以

(8) innerText textContent outerHTML

IE：支持innerText, outerHTML

FF：支持textContent

;

Ⅶ Web前端崗位面試題有哪些

前端面試題匯總，基本上會有四大類問題，具體如下：
一、HTML

1、Doctype作用？嚴格模式與混雜模式如何區分？它們有何意義?

2、HTML5 為什麼只需要寫 <!DOCTYPE HTML>？
3、行內元素有哪些？塊級元素有哪些？ 空(void)元素有那些？
4、頁面導入樣式時，使用link和@import有什麼區別？
5、介紹一下你對瀏覽器內核的理解？
6、常見的瀏覽器內核有哪些？
7、html5有哪些新特性、移除了那些元素？如何處理HTML5新標簽的瀏覽器兼容問題？如何區分 HTML 和 HTML5？
8、簡述一下你對HTML語義化的理解？
9、HTML5的離線儲存怎麼使用，工作原理能不能解釋一下？
10、瀏覽器是怎麼對HTML5的離線儲存資源進行管理和載入的呢？
11、請描述一下 cookies，sessionStorage 和 localStorage 的區別？
12、iframe有那些缺點？
13、Label的作用是什麼？是怎麼用的？（加 for 或 包裹）
14、HTML5的form如何關閉自動完成功能？
15、如何實現瀏覽器內多個標簽頁之間的通信? (阿里)
16、webSocket如何兼容低瀏覽器？(阿里)
17、頁面可見性（Page Visibility）API 可以有哪些用途？
18、如何在頁面上實現一個圓形的可點擊區域？
19、實現不使用 border 畫出1px高的線，在不同瀏覽器的Quirksmode和CSSCompat模式下都能保持同一效果。
20、網頁驗證碼是幹嘛的，是為了解決什麼安全問題？
21、tite與h1的區別、b與strong的區別、i與em的區別？

二、css

1、介紹一下標準的CSS的盒子模型？與低版本IE的盒子模型有什麼不同的？

2、CSS選擇符有哪些？哪些屬性可以繼承？
3、CSS優先順序演算法如何計算？
4、CSS3新增偽類有那些？
5、如何居中div？如何居中一個浮動元素？如何讓絕對定位的div居中？
6、display有哪些值？說明他們的作用。
7、position的值relative和absolute定位原點是？
8、CSS3有哪些新特性？
9、請解釋一下CSS3的Flexbox（彈性盒布局模型）,以及適用場景？
10、用純CSS創建一個三角形的原理是什麼？

11、一個滿屏 品 字布局 如何設計?

三、常見兼容性問題？

1. 
   1、li與li之間有看不見的空白間隔是什麼原因引起的？有什麼解決辦法？
   2、經常遇到的瀏覽器的兼容性有哪些？原因，解決方法是什麼，常用hack的技巧 ？
   3、為什麼要初始化CSS樣式。
   4、absolute的containing block計算方式跟正常流有什麼不同？
   5、CSS里的visibility屬性有個collapse屬性值是幹嘛用的？在不同瀏覽器下以後什麼區別？
   6、position跟display、margin collapse、overflow、float這些特性相互疊加後會怎麼樣？
   7、對BFC規范(塊級格式化上下文：block formatting context)的理解？
   8、CSS權重優先順序是如何計算的？
   9、請解釋一下為什麼會出現浮動和什麼時候需要清除浮動？清除浮動的方式
   10、移動端的布局用過媒體查詢嗎？
   11、使用 CSS 預處理器嗎？喜歡那個？
   12、CSS優化、提高性能的方法有哪些？
   13、瀏覽器是怎樣解析CSS選擇器的？
   14、在網頁中的應該使用奇數還是偶數的字體？為什麼呢？
   15、margin和padding分別適合什麼場景使用？
   16、抽離樣式模塊怎麼寫，說出思路，有無實踐經驗？[阿里航旅的面試題]
   17、元素豎向的百分比設定是相對於容器的高度嗎？
   18、全屏滾動的原理是什麼？用到了CSS的那些屬性？
   19、什麼是響應式設計？響應式設計的基本原理是什麼？如何兼容低版本的IE？
   20、視差滾動效果，如何給每頁做不同的動畫？（回到頂部，向下滑動要再次出現，和只出現一次分別怎麼做？）
   21、::before 和 :after中雙冒號和單冒號 有什麼區別？解釋一下這2個偽元素的作用。
   22、如何修改chrome記住密碼後自動填充表單的黃色背景 ？
   23、你對line-height是如何理解的？
   24、設置元素浮動後，該元素的display值是多少？（自動變成display:block）
   25、怎麼讓Chrome支持小於12px 的文字？
   26、讓頁面里的字體變清晰，變細用CSS怎麼做？（-webkit-font-smoothing: antialiased;）
   27、font-style屬性可以讓它賦值為「oblique」 oblique是什麼意思？
   28、position:fixed;在android下無效怎麼處理？
   29、如果需要手動寫動畫，你認為最小時間間隔是多久，為什麼？（阿里）
   30、display:inline-block 什麼時候會顯示間隙？(攜程)
   31、overflow: scroll時不能平滑滾動的問題怎麼處理？
   32、有一個高度自適應的div，裡面有兩個div，一個高度100px，希望另一個填滿剩下的高度。
   33、png、jpg、gif 這些圖片格式解釋一下，分別什麼時候用。有沒有了解過webp？
   34、什麼是Cookie 隔離？（或者說：請求資源的時候不要讓它帶cookie怎麼做）
   35、style標簽寫在body後與body前有什麼區別？
   
   四、JavaScript
   
   1、介紹JavaScript的基本數據類型。
   2、說說寫JavaScript的基本規范？
   3、JavaScript原型，原型鏈 ? 有什麼特點？
   4、JavaScript有幾種類型的值？（堆：原始數據類型和 棧：引用數據類型），你能畫一下他們的內存圖嗎？
   5、Javascript如何實現繼承？
   6、Javascript創建對象的幾種方式？
   7、Javascript作用鏈域?
   8、談談This對象的理解。
   9、eval是做什麼的？
   10、什麼是window對象? 什麼是document對象?
   11、null，undefined的區別？
   12、寫一個通用的事件偵聽器函數(機試題)。
   13、[「1」, 「2」, 「3」].map(parseInt) 答案是多少？
   14、關於事件，IE與火狐的事件機制有什麼區別？ 如何阻止冒泡？
   15、什麼是閉包（closure），為什麼要用它？
   16、javascript 代碼中的」use strict」;是什麼意思 ? 使用它區別是什麼？
   17、如何判斷一個對象是否屬於某個類？
   18、new操作符具體幹了什麼呢?
   19、用原生JavaScript的實現過什麼功能嗎？
   20、Javascript中，有一個函數，執行時對象查找時，永遠不會去查找原型，這個函數是？
   21、對JSON的了解？
   22、[].forEach.call($$("*"),function(a){ a.style.outline="1px solid #"+(~~(Math.random()*(1<<24))).toString(16) }) 能解釋一下這段代碼的意思嗎？
   23、js延遲載入的方式有哪些？
   24、Ajax 是什麼? 如何創建一個Ajax？
   25、同步和非同步的區別?
   26、如何解決跨域問題?
   27、頁面編碼和被請求的資源編碼如果不一致如何處理？
   28、模塊化開發怎麼做？
   29、AMD（Moles/Asynchronous-Definition）、CMD（Common Mole

   Definition）規范區別？
   30、requireJS的核心原理是什麼？（如何動態載入的？如何避免多次載入的？如何 緩存的？）
   31、讓你自己設計實現一個requireJS，你會怎麼做？
   32、談一談你對ECMAScript6的了解？
   33、ECMAScript6 怎麼寫class么，為什麼會出現class這種東西?
   34、非同步載入的方式有哪些？
   35、documen.write和 innerHTML的區別?
   36、DOM操作——怎樣添加、移除、移動、復制、創建和查找節點?
   37、.call() 和 .apply() 的含義和區別？
   38、數組和對象有哪些原生方法，列舉一下？
   39、JS 怎麼實現一個類。怎麼實例化這個類
   40、JavaScript中的作用域與變數聲明提升？
   41、如何編寫高性能的Javascript？
   42、那些操作會造成內存泄漏？
   43、JQuery的源碼看過嗎？能不能簡單概況一下它的實現原理？
   44、jQuery.fn的init方法返回的this指的是什麼對象？為什麼要返回this？
   45、jquery中如何將數組轉化為json字元串，然後再轉化回來？
   46、jQuery 的屬性拷貝(extend)的實現原理是什麼，如何實現深拷貝？
   47、jquery.extend 與 jquery.fn.extend的區別？
   48、jQuery 的隊列是如何實現的？隊列可以用在哪些地方？
   49、談一下Jquery中的bind(),live(),delegate(),on()的區別？
   50、JQuery一個對象可以同時綁定多個事件，這是如何實現的？
   51、是否知道自定義事件。jQuery里的fire函數是什麼意思，什麼時候用？
   52、jQuery 是通過哪個方法和 Sizzle 選擇器結合的？（jQuery.fn.find()進入Sizzle）
   53、針對 jQuery性能的優化方法？
   54、Jquery與jQuery UI有啥區別？
   55、JQuery的源碼看過嗎？能不能簡單說一下它的實現原理？
   56、jquery 中如何將數組轉化為json字元串，然後再轉化回來？
   57、jQuery和Zepto的區別？各自的使用場景？
   58、針對 jQuery 的優化方法？
   59、Zepto的點透問題如何解決？
   60、jQueryUI如何自定義組件?
   61、需求：實現一個頁面操作不會整頁刷新的網站，並且能在瀏覽器前進、後退時正確響應。給出你的技術實現方案？
   62、如何判斷當前腳本運行在瀏覽器還是node環境中？（阿里）
   63、移動端最小觸控區域是多大？
   64、jQuery 的 slideUp動畫 ，如果目標元素是被外部事件驅動, 當滑鼠快速地連續觸發外部元素事件, 動畫會滯後的反復執行，該如何處理呢?
   65、把 Script 標簽 放在頁面的最底部的body封閉之前 和封閉之後有什麼區別？瀏覽器會如何解析它們？
   66、移動端的點擊事件的有延遲，時間是多久，為什麼會有？ 怎麼解決這個延時？（click 有 300ms 延遲,為了實現safari的雙擊事件的設計，瀏覽器要知道你是不是要雙擊操作。）
   67、知道各種JS框架(Angular, Backbone, Ember, React, Meteor, Knockout…)么? 能講出他們各自的優點和缺點么?
   68、Underscore 對哪些 JS 原生對象進行了擴展以及提供了哪些好用的函數方法？
   69、解釋JavaScript中的作用域與變數聲明提升？
   70、那些操作會造成內存泄漏？
   71、JQuery一個對象可以同時綁定多個事件，這是如何實現的？
   72、Node.js的適用場景？
   (如果會用node)知道route, middleware, cluster, nodemon, pm2, server-side rendering么?
   73、解釋一下 Backbone 的 MVC 實現方式？
   74、什麼是「前端路由」?什麼時候適合使用「前端路由」? 「前端路由」有哪些優點和缺點?
   75、知道什麼是webkit么? 知道怎麼用瀏覽器的各種工具來調試和debug代碼么?
   76、如何測試前端代碼么? 知道BDD, TDD, Unit Test么? 知道怎麼測試你的前端工程么(mocha, sinon, jasmin, qUnit..)?
   77、前端templating(Mustache, underscore, handlebars)是幹嘛的, 怎麼用?
   78、簡述一下 Handlebars 的基本用法？
   79、簡述一下 Handlerbars 的對模板的基本處理流程， 如何編譯的？如何緩存的？
   80、用js實現千位分隔符?(來源：前端農民工，提示：正則+replace)
   檢測瀏覽器版本版本有哪些方式？
   81、我們給一個dom同時綁定兩個點擊事件，一個用捕獲，一個用冒泡，你來說下會執行幾次事件，然後會先執行冒泡還是捕獲
   

Ⅷ Web 前端面試

博客園整理了一下，有好的面試題歡迎大家發在評論區喲
1. 閉包
2. 數組去重
3. 原型和原型鏈
4. call,apply,bind三者的區別？
5. 請介紹常見的 HTTP 狀態碼(至少五個)
6. 深淺拷貝
7. 實現(5).add(3).minus(2)輸出6
8. null和undefined區別
9. MVC和MVVC?
10. Vue生命周期
11. Vue數據雙向綁定原理
12. Vue組件傳參
13. 說說各瀏覽器存在的兼容問題
14. router和route
15. active-class屬於Vue哪一個moles,有什麼作用
16. v-if和v-show
17. computed和watch有什麼區別
18.Vue 組件中 data 為什麼必須是函數
19. vue中子組件調用父組件的方法
20. vue中 keep-alive 組件的作用
21. vue中如何編寫可復用的組件？
22. Vue 如何去除url中的 #
23. Vue 中 key 的作用
24. Vue 中怎麼自定義指令
25. Vue 中怎麼自定義過濾器
26. NextTick 是做什麼的
27. Vue 組件 data 為什麼必須是函數
28. 計算屬性computed 和事件 methods 有什麼區別
29. scoped（死夠撲的）
30. vue如何獲取dom?
31. promise
32. vue常用指令有哪些
33.vue-loader是什麼?使用和用途？
34.css樣式局部化，如何讓css只在當前組件起作用?scss和stytus樣式穿透

閉包指有權訪問另一個函數中變數的函數，
MDN: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Closures
B站視頻： https://www.bilibili.com/video/BV1YJ411R7ap?from=search&seid=18157596230752413126

https://www.jianshu.com/p/9c3547450a52

https://search.bilibili.com/all?keyword=%E5%8E%9F%E5%9E%8B%E9%93%BE%20%E9%BB%91%E9%A9%AC

都是用來改變this指向的

call和apply都是function原型上的方法，每一個函數作為function的實例都可以調用這兩個方法，而這兩個方法都是用來改變this指向的

一般情況下this指向其調用者（）

fun.call(thisArg,arg1,ary2,...)
主要作用可以實現繼承
調用函數，改變this指向

繼承

fun.apply(thisArg,[argsArray])

作用：調用函數，改變函數內部this指向
參數必須是數組
apply主要應用於藉助數學對象等

bind()方法不會調用函數，但可以改變函數內部this指向
fun.bind(thisArg,arg1,arg2,...)
thisArg:在fun函數運行時指定的this值
arg1，arg2:傳遞的其他參數
返回由指定的this值和初始化參數改造的原函數拷貝

call的性能要比apply好一些，尤其當傳遞參數超過3個，後期開發可多用call

時間測試

狀態碼是由 3 位數組成，第一個數字定義了響應的類別，且有五種可能取值:

1xx：指示信息–表示請求已接收，繼續處理。

2xx：成功–表示請求已被成功接收、理解、接受。

3xx：重定向–要完成請求必須進行更進一步的操作。

4xx：客戶端錯誤–請求有語法錯誤或請求無法實現。

5xx：伺服器端錯誤–伺服器未能實現合法的請求。

阮一峰： http://www.ruanyifeng.com/blog/2014/03/undefined-vs-null.html

MVC 是後端中的概念

MVVC中 是前端概念

最終實現V和M數據的同步，因此開發者只需關注業務邏輯，不需要手動操作Dom，mvvm是vue的核心

這兩個不同的結構可以看出兩者的區別，他們的一些屬性是不同的。

active-class 屬於vue-router的樣式方法
當routerlink標簽被點擊時將會應用這個樣式

使用有兩種方法
routerLink標簽內使用

在使用時會有一個Bug
首頁的active會一直被應用
解決辦法
為了解決上面的問題，還需加入一個屬性exact,類似也有兩種方式：
在router-link中寫入exact

在路由js文件,配置active-class

還可以不用exact這種方法去解決，例如

首頁
路由中加入重定向

computed

computed是計算屬性，也就是計算值，它更多用於計算值的場景
computed具有緩存性，computed的值在getter執行後是會緩存的，只有在它依賴的屬性值改變之後，下一次獲取computed的值時重新調用對應的getter來計算
computed適用於計算比較消耗性能的計算場景
watch

watch更多的是[觀察]的作用，類似於某些數據的監聽回調，用於觀察props $emit或者本組件的值，當數據變化時來執行回調進行後續操作
無緩存性，頁面重新渲染時值不變化也會執行
小結

當我們要進行數值計算，而且依賴於其他數據，那麼把這個數據設計為computed
如果你需要在某個數據變化時做一些事情，使用watch來觀察這個數據變化。

去這里看一下​blog.csdn.net

vue-router 默認使用 hash 模式，所以在路由載入的時候，項目中的 url 會自帶 #。如果不想使用 #， 可以使用 vue-router 的另一種模式 history

new Router({
mode: 'history',
routes: [ ]
})

需要注意的是，當我們啟用 history 模式的時候，由於我們的項目是一個單頁面應用，所以在路由跳轉的時候，就會出現訪問不到靜態資源而出現 404 的情況，這時候就需要服務端增加一個覆蓋所有情況的候選資源：如果 URL 匹配不到任何靜態資源，則應該返回同一個 index.html 頁面

具體參考 官方API

參考 官方文檔-自定義指令

過濾器也同樣接受全局注冊和局部注冊

具體可參考官方文檔 深入響應式原理

我們可以將同一函數定義為一個 method 或者一個計算屬性。對於最終的結果，兩種方式是相同的

不同點：

讓css只在當前組件中起作用

Ⅸ 求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前端站點有哪些功能測試的方法

有些測試方法的界限比較模糊，比如功能測試的同時會穿插一些兼容性和安全性的測試，以下列出簡單的一些點，可以參考下：
1、該頁所提供的功能邏輯方面有無問題；
2、各輸入項的合法性測試、輸入順序；(是否只做了前端的js驗證)
3、該頁許可權，既無訪問許可權的用戶能否直接訪問該頁；
4、不同瀏覽器下該頁的顯示；
5、該頁鏈接的參數是否可以修改，對功能的影響；
7、多個頁面打開該頁，進行操作，是否有不合法的影響；
8、網路環境異常情況下系統的處理；
9、頁面鏈接是否正確；
10、cookies測試；