1+x 證書 Web 前端開發初級理論考試（試卷8 ）

Web前端開發初級模擬測試卷（三）

共55道題 總分：200分 形考總分：0分

1、單選題共30題，60分

1.實現向右的紅色三角形，樣式實現正確的是（ ） A

<div class="icon"></div>

A.icon{width:0; height:0; overflow:hidden; border:5px solid transparent; border-left-color:#f00; }

B.icon{width:0; height:0; overflow:hidden; border:5px solid #f00; border-left-color:transparent;}

C.icon{width:0; height:0; overflow:hidden; border:5px solid transparent; border-right-color:#f00;}

D.icon{width:0; height:0; overflow:hidden; border:5px solid #f00; border-right-color:transparent;}

2.p下面除了span之外全部標籤，旋轉45度（ ）

- *A*p :not(span){transform:rotate(45deg)}
- *B*p :not(span){translate:rotate(45deg)}
- *C*p not(:span){transform:rotate(45deg)}
- *D*p:not(span){rotate(45deg)}

3.jquery中遍歷指定的對象和數組是哪一個方法（ ） A

• A$.each( object, callback )
• B$(selector).each(function())
• Cforeach()
• Dfor ...in

4.arguments是一個相似於數組的對象。對命名參數的引用能夠使用參數名也能夠使用（ ）的方式來進行引用：C

• Afunction argument[n]
• Barguments.n
• Carguments[n]
• Disfunction

5.下面代碼的打印結果是( ) C

var cars = ['bmw','qq','byd','glof']; cars.splice(2,0,'polo'); console.log(cars);

• A["bmw", "qq", "byd", "polo", "glof"]
• B["bmw", "qq", "polo", "glof"]
• C["bmw", "qq", "polo", "byd", "glof"]
• D以上都不對

6.下面是兄弟選擇器的選項是（ ） B

• A#ul2+p
• B#ul2~p
• C#ul2>p
• D#ul2 p

7.如下是畫布能夠畫圖像的是（ ） C

• Avideo
• Baudio
• Ccanvas
• Dheader

8.在jQuery中，不屬於鼠標事件的是（ ） C

• Amouseover
• Bmouseenter
• Ckeydown
• Dmousemove

9.input標籤的值是用哪一個屬性來描述的（ ） D

• Atype
• Bdisabled
• Cid
• Dvalue

10.如下哪一個的優先級最高（ ） C

• Aclass
• Bid
• C!important
• D行內

11.下面代碼的打印結果是( )D

for(var i=0;i<=30;i+=5){ if(i%3==0){ continue; } console.log(i); }

• A5,10,15,20,25,30
• B5,15
• C5,15,25
• D5,10,20,25

12.想要給個a標籤設置width和height，須要給a標籤添加哪一個樣式（ ） D

• Adisplay:inline;
• Boverflow:hidden;
• Cfont-size:0;
• Ddisplay:block;

13.設置主軸方向的彈性盒子元素的對齊方式能夠使用（ ）屬性實現 B

• Aalign-content
• Bjustify-content
• Calign-self
• Dalign-items

14.參數序號從1開始的是哪一個選擇器（ ） B

• Anth-of-type
• Bnth-child
• C:first
• D:eq

15.如下代碼執行結果正確的是( ) B

var a = 2; switch (a) { case 1: alert("1"); case 2: alert("2"); case 3: alert("3");

default: alert('4'); }

• A分別彈出1234
• B分別彈出 234
• C程序報錯
• D只彈出 2

16.flex-grow的做用是（ ） D

• A彈性盒子元素對齊方式
• B彈性盒子元素的排列方式
• C彈性盒子元素顯示次序
• D彈性盒子元素如何分配剩餘空間

17.如下哪一個方法是對數組進行排序（ ） A

• Asort
• Breverse
• Cpop
• Dslice

18.如下哪些不是塊標籤的是（ ） A

• Aspan
• Bp
• Cdiv
• Dul

19.如下能生效的樣式選項是（ ） C

<style> p{ color:yellow; } .classB{ color:red; } .classA{ color:blue; } </style> <p class='classB classA'> 123 </p>

• Ayellow
• Bred
• Cblue
• Dblack

20.meta標籤中name屬性值是關鍵字的是（ ） C

• Adescription
• Bauthor
• Ckeyword
• Dgenerator

21.javascript怎樣將一個checkbox設爲無效，假設該checkbox的id爲checkAll ( ) B

• Adocument.getElementById("checkAll").enabled = false;
• Bdocument.getElementById("checkAll").disabled = true;
• Cdocument.getElementById("checkAll").enabled = true;
• Ddocument.getElementById("checkAll").disabled = "disabled";

22.如下這段代碼的做用是（ ） A

@media screen and (min-width:960px) and (max-width:1200px){ body{ background:yellow; } }

• A是當寬度大於960px小於1200px的時候body的背景色爲yellow
• B是當寬度大於960px的時候body的背景色爲yellow
• C以上寫法都不正確
• D是當寬度小於1200px的時候body的背景色爲yellow

23.實現點擊文本也能控制複選框，如下設置正確的是（ ） B

• - *A*<input type="checkbox" name="music" /><label for="music">音樂</label>
  - *B*<input type="checkbox" id="music" /><label for="music">音樂</label>
  - *C*<input type="checkbox" name="music" /><label id="music">音樂</label>
  - *D*<input type="checkbox" id="music" /><label name="music">音樂</label>

24.若是按下的是回車鍵：js中正確的判斷方式是（ ） C

• Aif(event.keyCode == 39)
• Bif(event.keyCode == 38)
• Cif(event.keyCode == 32)
• Dif(event.keyCode == 31)

25.哪個標記用於使HTML文檔中表格里的單元格在同行進行合併（ ） C

• Acellspacing
• Bcellpadding
• Crowspan
• Dcolspan

26.如何清除ul的浮動（ ） B

• Aul li:last-child{clear:both}
• Bul:after{content:"";clear:both;display:block}
• Cul{clear:both}
• Dul:before{content:"";clear:both;display:block}

27.var v; 該語句定義了一個變量v，它的值是？正確答案是（ ） B

• A1
• Bundefined
• C0
• Dnull

28.placeholder的做用是（ ） A

• A爲文本框設置默認提示文字
• B爲文本框設置對齊樣式
• C爲文本框設置默認值
• D以上說法都不正確

29.正確答案是（ ） A

var size="true";console.log(typeof size);

• Astring
• Bnumber
• Cundefined
• Dboolean

30.在當前頁面index.html中插入與index.html處於同一級的img文件夾下的logo.jpg，正確的導入寫法是（ ）A

• - *A*<img src="img/logo.jpg">
  - *B*<img href="img/logo.jpg">
  - *C*<img src="../img/logo.jpg">
  - *D*<img href="../img/logo.jpg">

  2、多選題共15題，30分

  1.div span{margin-left:10px;}經過如下哪些語句能夠將第一個span元素的margin取消( ) AC

  • Aiv span:first-child{margin:0}
  • Bdiv span:nth-child(0){margin:0;}
  • Cdiv span:nth-child(1){margin:0}
  • Ddiv span{margin:0}

2.如下語句語法正確的有（ ） AC

• - *A*document.getElementsByTagName("body")[0].innerHTML = "HELLO"
  - *B*document.getElementById("box").style.border-top="1px solid #f00"
  - *C*document.getElementsByTagName("div")[0].innerHTML = '<b>hello</b>';
  - *D*document.getElementsByTagName("body").style.paddingTop = "10px";

3.如下哪些屬性屬於彈性盒子的（ ） AB

• Aflex-shrink
• Bflex-grow
• Cborder
• Dmargin

4.如下是單獨能夠不用閉合的標籤是（ ） ABCD

• - *A*<br />
  - *B*<hr />
  - *C*<input />
  - *D*<img />

5.#wrap{width:600px;height:200px;background:#ccc;position:absolute;}實現wrap在瀏覽器中水平和垂直都居中，須要設置的樣式有( ) BC

• Amargin-left:-300px;margin-top:-100px;
• Bleft:300px;top:100px;
• Cleft:50%;top:50%;
• Dmargin-left:-300px;margin-top:100px;

6.背景background屬性包括（ ） ABD

• Abackground-size
• Bbackground-origin
• Ctext-align
• Dbackground-clip

7.假設btn是獲取到的按鈕，點擊按鈕調用checkCity這樣一個函數，如下寫法正確的有哪些（ ） BC

• Abtn.onclick = function(){checkCity;}
• Bbtn.onclick = function(){checkCity();}
• Cbtn.onclick = checkCity;
• Dbtn.onclick = checkCity()

8.HTML5新增的標籤有哪些（ ） ABCD

• Aheader
• Bnav
• Cfooter
• Dsection

9.如下哪些語句能夠打印1-100之間全部的奇數（ ） AD

• Afor(var i=1;i<=100;i++){if(i%2==1){console.log(i);}}
• Bfor(var i=1;i<=100;i+=1){console.log(i);}
• Cfor(var i=1;i<=100;i++){if(i%2==0){console.log(i);}}
• Dfor(var i=1;i<=100;i+=2){console.log(i);}

10.img標籤有文字提示特性的屬性（ ） AC

• Atitle
• Btite
• Calt
• Dheight

11.如下哪些元素屬於塊元素( ) BCD

• Aa
• Bnav
• Cheader
• Dul

12.下面選項中 jquery焦點事件的有（ ） AC

• Ablur()
• Bselect()
• Cfocus()
• Donfocus()

13.在jQuery中，經過jQuery對象.css( )可實現樣式控制，如下說法正確的是（ ） AB

• Acss( )方法會去除原有樣式而設置新樣式
• B正確語法：css(「屬性」,」值」)
• Ccss( )方法不會去除原有樣式
• D正確語法：css(「屬性」)

14.如下哪些樣式能夠隱藏元素( ) ACD

• Avisibility:hidden;
• Bdisplay:show;
• Cdisplay:none;
• Dopacity:0;

15.哪些是動畫效果( ) AB

• Atransition
• Banimation
• Cstatic
• Drelative

3、判斷題共5題，10分

1.此句能夠實現當文本框得到焦點時添加盒陰影效果。（ ） 對

input[type="text"]:focus{box-shadow:2px 2px 2px blue;}

• A對
• B錯

2.var a=b=6; b=3 console.log(a)的值爲3嗎（ ） 錯

• A對
• B錯

3.在jquery中指定的元素後面追加內容是after嗎（ ） 對

• A對
• B錯

4.margin-top與padding-top對行內元素都起做用（ ） 錯

• A對
• B錯

5.CSS中transition是用來控制元素變形樣式的（ ） 錯

• A對
• B錯

答案解析

1.	2.	3.	4.	5.
6.	7.	8.	9.	10.
11.	12.	13.	14.	15.
16.	17.	18.	19.	20.
21.	22.	23.	24.	25.
26.	27.	28.	29.	30.
31.	32.	33.	34.	35.
36.	37.	38.	39.	40.
41.	42.	43.	44.	45.
46.	47.	48.	49.	50.