當前位置:首頁 » 網頁前端 » web前端初級試題1實操考試答案
擴展閱讀
webinf下怎麼引入js 2023-08-31 21:54:13
堡壘機怎麼打開web 2023-08-31 21:54:11

web前端初級試題1實操考試答案

發布時間: 2023-01-21 04:19:51

A. 騰訊WEB前端筆試題和面試題答案

如下分享是一份完整的騰訊WEB前端筆試題,大家有空可以練一練!
一、耐心填一填!(每空4分,共24分)

1. 為span設置類a與b,應編寫HTML代碼_

_

_________。

2. 設置CSS屬性clear的值為_both___________時可清除左右兩邊浮動。

3. ____li________標簽必須直接嵌套於ul、ol中。

4. CSS屬性_____margin_______可為元素設置外補丁。

5. 設置CSS屬性float的值為___none_________時可取消元素的浮動。

6. 文字居中的CSS代碼是____text-align:center________。

二、精心選一選!(每題4分,共16分)

1. 下列哪個樣式定義後,內聯(非塊狀)元素可以定義寬度和高度( C )

A. display:inline B. display:none C. display:block D. display:inheric

2. 選出你認為最合理的定義標題的方法( C )

A. 文章標題

B.

文章標題

C.

文章標題

D. 文章標題

3. br標簽在XHTML中語義為( A )

A.換行 B.強調 C.段落 D.標題

4. 不換行必須設置( AC )

A.word-break B.letter-spacing C.white-space D.word-spacing

5. 在使用table表現數據時,有時候表現出來的會比自己實際設置的寬度要寬,為此需要設置下面哪些

屬性值( AD )

A. cellpadding=”0″ B. padding:0 C. margin:0 D. cellspacing=”0″

三、判斷對或錯!(每題4分,共24分)

1. CSS屬性font-style 用於設置字體的粗細。 ( × )

2. CSS屬性overflow用於設置元素超過寬度時是否隱藏或顯示滾動條。 ( √ )

3. 在不涉及樣式情況下,頁面元素的優先顯示與結構擺放順序無關。 ( × )

4. 在不涉及樣式情況下,頁面元素的優先顯示與標簽選用無關。 ( √ )

5. display:inline兼容所有的瀏覽器。 ( √ )

6. input屬於窗體元素,層級顯示比flash、其它元素都高。 ( × ) 1 2

B. 誰能給我出一兩道 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(可以詳細一點)

答案在參考資料裡面可以找到,答案在參考資料裡面可以找到,答案在參考資料裡面可以找到

C. 《web前端開發基礎》作業考核試題有答案

1
請為元素①⑤選擇右例最合適的使用場景,將配對好的a-cô寫到括弧中
收集用戶捅入的文字信息

D. 求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)

E. 常見的web前端面試題及答案分享

1、 說下行內元素和塊級元素的區別?行內塊元素的兼容性使用?(IE8 以下)


答:行內元素:會在水平方向排列,不能包含塊級元素,設置width無效,height無效(可以設置line-height),margin上下無效,padding上下無效。塊級元素:各占據一行,垂直方向排列。從新行開始結束接著一個斷行。兼容性:display:inline-block;*display:inline;*zoom:1。



2、box-sizing常用的屬性有哪些?分別有什麼作用?


答:box-sizing: content-box|border-box|inherit。content-box:寬度和高度分別應用到元素的內容框。在寬度和高度之外繪制元素的內邊距和邊框(元素默認效果)。


border-box:元素指定的任何內邊距和邊框都將在已設定的寬度和高度內進行繪制。通過從已設定的寬度和高度分別減去邊框和內邊距才能得到內容的寬度和高度。


3、Doctype作用?標准模式與兼容模式各有什麼區別?


答:告知瀏覽器的解析器用什麼文檔標准解析這個文檔。DOCTYPE不存在或格式不正確會導致文檔以兼容模式呈現。


標准模式的排版和JS運作模式都是以該瀏覽器支持的最高標准運行。在兼容模式中,頁面以寬松的向後兼容的方式顯示,模擬老式瀏覽器的行為以防止站點無法工作。


4、html5有哪些新特性?如何處理HTML5新標簽的瀏覽器兼容問題?如何區分 HTML 和 HTML5?


答:HTML5 現在已經不是 SGML 的子集,主要是關於圖像,位置,存儲,多任務等功能的增加。


(1)繪畫 canvas;


(2)用於媒介回放的 video 和 audio 元素;


(3)本地離線存儲 localStorage 長期存儲數據,瀏覽器關閉後數據不丟失;


(4)sessionStorage 的數據在瀏覽器關閉後自動刪除;


(5)語意化更好的內容元素,比如 article、footer、header、nav、section;


(6)表單控制項,calendar、date、time、email、url、search;


(7)新的技術webworker, websocket, Geolocation;


IE8/IE7/IE6支持通過document.createElement方法產生的標簽,可以利用這一特性讓這些瀏覽器支持HTML5新標簽,瀏覽器支持新標簽後,還需要添加標簽默認的樣式。當然也可以直接使用成熟的框架、比如html5shim。


以上就是環球青藤小編關於web前端面試題的相關分享,希望對大家有所幫助,想要了解更多相關內容,請及時關注本平台並進行查看!

F. 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("哎呀,你又點我了~");
}
}

加油~

G. web前端筆試題

1. 設置元素浮動後,該元素的 display 值是多少( A )

    A.block B. 不變 C. inline D. inline-block

2. 以下不是 canvas 的⽅方法是( D )

    A.getContext() B. fill() C. stroke() D.controller

3. 不是 input 在 html5 新的類型的是( B )

    A.datetime B. file C. color D. range

4. 對權重排序正確的是( C )

a)  .list .box p

b)  #list .box div span

c)  .list span

d)  #list #box

e)  p:last-child

f)  style

A.f>d>b>a>c>e

C. f>d>b>a>c=e

B. f>d>b>a>e>c

D. f>b>d>a>c=e

5.對 document load 和 document ready 描述正確的是( B )

    A.$(document).ready()是當頁⾯所有資源全部載入完成後,執

    ⾏⼀個函數

    B.如果圖⽚資源較多載入時間較長,onload 後等待執⾏的函數

    需要等待較長時間,所以⼀些效果可能受到影響

    C.onload 是當 DOM ⽂檔樹載入完成後執⾏⼀個函數

    D.⼀般來說 load 會比$(document).ready()較快執⾏

6.["1", "2", "3"].map(parseInt) 答案是多少( A )

    A.[1, NaN, NaN]            B. [1, 2, NaN]

    C.[NaN, NaN, NaN]      D. [1, NaN]

7.以下對 Ajax 描述不正確的是( A )

    A.readyState 屬性請求的狀態,當值為 3 時是正在載入

    B.使用 XML 和 XSLT 進⾏行數據交換及相關操作

    C.總共有 8 種 callback

    D.abort()⽅法,停⽌當前請求

8.var temp=null,alert(typeof temp)彈出的結果是( B )

    A.Null     B. Object     C. Undefined     D. String

1. 對XMLHttpRequest對象的open⽅方法描述錯誤的是(BCD)

    A.在 IE 上使⽤的是 XMLHttpRequest 對象是 ActiveXObject

    B.在 Firefox 上使用的是 XMLHttpRequest 對象是ActiveXObject

    C.XMLHttpRequest 對象只能發送 get 請求

    D.XMLHttpRequest 對象只能發送 post 請求

2. 以下哪些是 javascript 的全局函數(ABC)

    A.parseFloat     B. eval     C. setTimeout     D. alert

3. 對 http 相關內容描述正確的是(BCD)

    A.301 狀態碼是臨時重定向

    B.get ⽅方式只能⽀支持 ASCII 字元

    C.get 在從伺服器上獲取資源,post 重點在向伺服器發送數據

    D.HTTPS 就是 HTTP 加上加密處理理

4. 以下結果正確的是(CD)

    A.typeof undefined= undefined 和 typeof null=null

    B.typeof 「hello」==string typeof 0==Boolean

    C.typeof [1,2,3]=object typeof NaN=undefined

    D.typeof {name:「李華」,age:「23」}=object

5. 以下結果正確的是(AB)

    A.zepto.js 適合移動端的開發,jQuery 適合 PC 端的開發

    B.zepto.js 不支持 ie 瀏覽器器

    C.vue 屬於 mvc 框架

    D.v-bind 實現雙向綁定

6. 對 sass 描述錯誤的是(BD)

    A.sass 和 scss 其實是同⼀一種東⻄,都稱之為 Sass

    B.sass 可以聲明變量符號為&

    C.sass 最終都將轉換成 css ⽂件才被引⽤

    D. sass 不可以擴展和繼承

1. ⽗級⾼寬固定,子級⽔平垂直居中怎麼實現(請用 2 種 flex ⽅

法實現)?

2. 寫出⼀個簡單的$.ajax()的請求方式?

3. 假如移動端設備的尺寸是320px要實現每1rem=16px怎麼實

現?

4.使用 Javascript 列印出 1-10000 之間的所有對稱數(例如 121

1331 等)

5. angular 框架之間的通信⽅式是什麼,⾄少列出三種?

6. vue 的⽣命周期有⼏個階段,簡單說說它們的作用?

H. 騰訊WEB前端筆試題和面試題答案

騰訊WEB前端筆試題和面試題答案

能進入騰訊工作是多少人的夢想,下面我為大家搜集的一篇“騰訊WEB前端筆試題和面試題答案”,供大家參考借鑒,希望可以幫助到有需要的朋友!

一、 耐心填一填!(每空4分,共24分)

1. 為span設置類a與b,應編寫HTML代碼_________。

2. 設置CSS屬性clear的值為_both___________時可清除左右兩邊浮動。

3. ____li________標簽必須直接嵌套於ul、ol中。

4. CSS屬性_____margin_______可為元素設置外補丁。

5. 設置CSS屬性float的值為___none_________時可取消元素的浮動。

6. 文字居中的CSS代碼是____text-align:center________。

二、 精心選一選!(每題4分,共16分)

1. 下列哪個樣式定義後,內聯(非塊狀)元素可以定義寬度和高度( C )

A. display:inline B. display:none C. display:block D. display:inheric

2. 選出你認為最合理的定義標題的方法( C )

A. 文章標題

B.

文章標題

C.

文章標題

D. 文章標題

3. br標簽在XHTML中語義為( A )

A.換行 B.強調 C.段落 D.標題

4. 不換行必須設置( AC )

A.word-break B.letter-spacing C.white-space D.word-spacing

5. 在使用table表現數據時,有時候表現出來的'會比自己實際設置的寬度要寬,為此需要設置下面哪些屬性值( AD )

A. cellpadding=”0″ B. padding:0 C. margin:0 D. cellspacing=”0″

三、判斷對或錯!(每題4分,共24分)

1. CSS屬性font-style 用於設置字體的粗細。 ( × )

2. CSS屬性overflow用於設置元素超過寬度時是否隱藏或顯示滾動條。 ( √ )

3. 在不涉及樣式情況下,頁面元素的優先顯示與結構擺放順序無關。 ( × )

4. 在不涉及樣式情況下,頁面元素的優先顯示與標簽選用無關。 ( √ )

5. display:inline兼容所有的瀏覽器。 ( √ )

6. input屬於窗體元素,層級顯示比flash、其它元素都高。 ( × )

;