Microsoft Word 範例試卷編號：HT docx

Size: px

Start display at page:

Download "Microsoft Word 範例試卷編號：HT docx"

中代周
7 years ago
Views:

1 範例試卷編號 :HT 網頁程式設計 HTML5 範例試卷認證說明與注意事項一本項考試為測驗題, 所需總時間為 40 分鐘, 時間結束前需完成所有考試動作成績計算滿分為 100 分, 合格分數為 70 分二測驗題為單複選混合五十題, 每題 2 分三測驗題直接出現於電腦螢幕, 請依序作答計時終了, 所填入之答案將自動存檔, 且不得再作更改四試卷內 0 為阿拉伯數字,O 為英文字母, 作答時請先確認所有滑鼠左右鍵位之訂定, 以右手操作方式為準, 操作者請自行對應鍵位五有問題請舉手發問, 切勿私下交談範例試卷 :HT Page 1/16

2 壹測驗題 100% ( 為單複選混合題, 每題 2 分 ) 01. 相對於傳統的 Cookie,HTML5 結合 JavaScript 儲存功能的好處, 不包括下列哪一項? (A) 容量更大, 可以更彈性的儲存 (B) 將部分常用的網頁快取 (Cache) 起來 (C) 提供本地端 (Local)SQL 資料庫 (D) 運用鍵 - 值 (Key-Value) 來快速存取遠端資料庫 02. HTML5 提供下列哪些即時通訊支援?( 複選 ) (A) 即時的 WebSocket 連線 (B) 運用 JavaScript 來執行多執行緒 (Multi-Thread) 運算 (C) 通知服務的提示訊息 (Notifications), 以便於有新訊息在作業系統桌面即顯示訊息 (D) 提供即時通訊 (Instant Message) 功能 03. 如附圖所示程式碼, 關於其執行結果, 下列哪一項正確? <script type="text/javascript"> var x,x; x=1+2; X="3"+"4"; document.write(x+x); </script> (A) 1234 (B) 334 (C) 10 (D) 234 範例試卷 :HT Page 2/16

3 04. 關於 JavaScript 在網頁設計所能發揮的功能, 不包含下列哪一項? (A) 用於相關元素事件 (Event) 驅動 (B) 可以用來驗證且更正資料 (C) 偵測拜訪者 (Visitor) 之瀏覽器 (D) 建立會期 (Session) 與 Cookie 資訊 05. 相對於 HTML4 之前的版本, 下列哪一項不是 HTML5 的特色? (A) 所有的瀏覽器皆支援 HTML5 所有功能 (B) 畫布 <canvas> 標籤提供 2D 繪圖 (C) 支援新的表單元素 ( 諸如月曆 Url ) (D) 支援本機儲存 06. 下列哪些 MIME_type 可以放在 <script> 標籤裡面, 以指定撰寫 JavaScript 程式?( 複選 ) (A) type="text/ecmascript" (B) type="text/jscript" (C) type="text/vbscript" (D) type="text/javascript" 07. 用來執行的 JavaScript 程式碼不可以放置在下列哪一段區域中? (A) <html>... </html> (B) <body>... </body> (C) <head>... </head> (D) <code>... </code> 範例試卷 :HT Page 3/16

4 08. 下列哪一項為 HTML5 元素的正確表示方式? (A) <p><em>html5<strong> 是目前最主流的 </em> 網頁標準 </strong></p> (B) <p><em>html5</em> 是目前最主流的 <strong> 網頁標準 </strong></p> (C) <p><em>html5<strong> 是目前最主流的 </p> 網頁標準 </em></strong> (D) <p><strong>html5<em> 是目前最主流的 </strong> 網頁標準 </em></p> 09. 下列哪一種為 HTML5 用來隱藏元素的屬性? (A) hidden="true" (B) visibility="false" (C) display="none" (D) hide="true" 10. 當顯示的寬度不夠時, 可使用下列哪一項元素, 讓一個較長的英文字自動斷行? (A) p (B) nobr (C) wbr (D) br 11. 若要設定拖曳元素的拖放區域, 需使用下列哪一種屬性? (A) enabledrop (B) drop (C) dropable (D) dropzone 範例試卷 :HT Page 4/16

5 12. 當使用者按下鍵盤的 Tab 鍵時, 會跳至下列哪一項文字輸入方塊? (A) <input type="text" tabindex="-1"> (B) <input type="text" tabindex="2" hidden> (C) <input type="text" tabindex="1" disabled> (D) <input type="text" tabindex="3"> 13. 要讓 div 元素中的內容可以編輯, 需使用下列哪一種屬性? (A) designable (B) editable (C) contenteditable (D) contentmode 14. 在 Windows 作業系統中, 下列哪一種組合鍵, 可以協助使用者, 連結到 <a href=" accesskey="g">html5</a> 所指定的位置? (A) Alt+g (B) Ctrl+g (C) Shift+g (D) Ctrl+Shift+g 15. 下列哪一種不是 HTML5 標準新增的 Input 屬性? (A) (A) range (B) color (C) image 16. 關於 Button 的屬性說明, 下列哪一種是設定表單資料的傳送類型? (A) formatmethod (B) formatctype (C) formataction (D) formatdata 範例試卷 :HT Page 5/16

6 17. 關於 Input 的屬性, 下列敘述哪一項錯誤? (A) date 為日期年月日輸入欄位 (B) time 為時間輸入欄位 (C) month 為月份輸入欄位 (D) week 為星期幾的輸入欄位 18. 下列哪一種語法錯誤? (A) <datalist title="html5">html5</datalist> (B) <option value="html5">html5</option> (C) <label="html5">html5</label> (D) <optgroup label="html5">html5</optgroup> 19. 如附圖所示, 為下列哪一種語法所產生? (A) <input type="number"/> (B) <input type="range"/> (C) <input type="tel"/> (D) <input type="color"/> 20. 下列哪些語法一定會產生整數的結果?( 複選 ) (A) <input type="number"/> (B) <input type="range"/> (C) <input type="tel"/> (D) <input type="color"/> 21. 下列哪一種屬性不是 <input type="range"> 的可用屬性? (A) readonly (B) maxlength (C) autofocus (D) autocomplete 範例試卷 :HT Page 6/16

7 22. 關於 preload 的寫法, 下列敘述哪一項錯誤? (A) <video preload="auto">...</video> (B) <video preload="metadata">...</video> (C) <video preload="media">...</video> (D) <video preload="none">...</video> 23. 關於 loop 的寫法, 下列敘述哪一項錯誤? (A) <video loop>...</video> (B) <video loop="loop">...</video> (C) <video loop="true">...</video> (D) <video loop="">...</video> 24. 如附圖所示程式碼, 關於不支援 HTML5 的瀏覽器, 畫面將顯示下列哪一種結果? <video width="300" height="200"> <source src="movie.ogg" type="video/ogg"> <source src="movie.mp4" type="video/mp4"> oops </video> (A) 路徑為 movie.ogg 的影像 (B) 路徑為 movie.mp4 的影像 (C) oops (D) 無任何反應 25. 下列哪一項不屬於媒體元素 (Media Element)? (A) canvas (B) audio (C) source (D) video 範例試卷 :HT Page 7/16

8 26. 下列哪些屬於 HTML5 新增的標籤?( 複選 ) (A) form (B) media (C) audio (D) svg 27. 下列哪一項為 <canvas> 標籤的用途? (A) Connect Remote Server (B) Local Database (C) Draw Images (D) Web SQL 28. 如附圖所示程式碼, 關於 media 的寫法, 下列敘述哪一項錯誤? <video> <source media="value"> </video> (A) media="screen and (max-height:700px)" (B) media="screen or (max-height:700px)" (C) media="not screen and (max-height:700px)" (D) media="screen,(max-height:700px)" 29. 下列哪一項是定義類別選擇器 (Class Selector) 的語法? (A).myClass{color:red;} (B) #myclass{color:red;} (D) *myclass{color:red;} 30. 下列敘述哪一項是 ID 選擇器 (ID selector) 和類別選擇器 (Class Selector) 最大的差別? (A) 一個網頁只能有一個類別屬性值 (B) 一個網頁只能有一個 ID 屬性值 (C) ID 選擇器是 CSS2 的語法,CSS3 改採類別選擇器 (D) 只是語法上不同範例試卷 :HT Page 8/16

9 31. 如果希望整個網頁都套用某些設定, 應該採用下列哪一種選擇器語法? (A).{color:red} (B) #{color:red} (D) *{color:red} 32. 下列哪一項不是 CSS 選擇器的語法? (A) h1,h2,p b {color:red;} (B) p+b{color:red;} (C) p-b{color:red} (D) p>b{color:red} 33. 如附圖所示程式碼, 假設有以下的 CSS 後代選擇器 (Descendant Selectors) 設定, 所產生的網頁內容文字顏色應為下列哪一種? <style type="text/css"> h1{color:red} em{color:blue} h1 em{color:black} *{color:green} </style> <h1> 這是我的 <em> 網頁內容 </em></h1> (A) 紅色 (Red) (B) 綠色 (Green) (C) 藍色 (Blue) (D) 黑色 (Black) 範例試卷 :HT Page 9/16

10 34. 如附圖所示程式碼, 兩段程式片段的效果, 主要包括下列哪些不同點? ( 複選 ) 程式一 : -moz-column-rule:3px dotted #ff0000; -webkit-column-rule:3px dotted #ff0000; column-rule:3px dotted #ff0000; 程式二 : column-rule-color: red column-rule-style: dotted column-rule-width: 3em (A) 瀏覽器支援性不同 (B) 產生的顏色不同 (C) 產生線條的大小位置不同 (D) 產生線條的樣式不同範例試卷 :HT Page 10/16

11 35. 如附圖所示程式碼, 關於 CSS3 撰寫, 下列哪一項為此程式碼的語法錯誤個數? <html> <head> <style type="text/css"> div.boxa{ box-sizing:border-box; width:40%; border:solid red;} div.boxb{ box-sizing:padding-box width:40%; border:solid black;} </style> </head> <body> <div class="boxa">box.</div> <div class="boxb">box.</div> </div></body></html> (A) 一個 (B) 兩個 (C) 三個 (D) 四個 36. SVG 是漸變 (Gradient) 圖形處理的關鍵技術, 下列哪一項是它的全名? (A) Support Vector Graph (B) Scalable Vector Graph (C) System Value Graph (D) Support Value Graph 範例試卷 :HT Page 11/16

12 37. 由於 CSS3 是新的技術, 目前瀏覽器的支援程度還不是很完整, 如果設計者想要產生漸變 (Gradient) 效果, 在考慮支援性的情形下, 下列哪一種瀏覽器應採用 SVG 技術, 而非 CSS3 的漸變 (Gradient) 功能? (A) Firefox (B) IE 9 (C) Chrome (D) Safari 如附圖所示, 該漸變 (Gradient) 效果可以用下列哪一段程式碼達成? (A) linear-gradient(middle,black,white); (B) linear-gradient(center,black,white); (C) linear-gradient(white,black,white); (D) linear-gradient(black,white,black); 範例試卷 :HT Page 12/16

39. 如附圖所示程式碼, 會產生下列哪一種效果? <svg xmlns="http://www.w3.org/2000/svg" version="1.

offset="100%" style="stop-color:rgb(0,0,0);stop-opacity:1" /> </radialgradient> </defs> <ellipse cx="200" cy="200" rx="50" ry="50" fill="url(#grad)"/> </svg> (A) 甲

13 39. 如附圖所示程式碼, 會產生下列哪一種效果? <svg xmlns=" version="1.1"> <defs> <radialgradient id="grad" cx="20%" cy="20%" r="30%" fx="50%" fy="50%"> <stop offset="0%" style="stop-color:rgb(255,255,255);stop-opacity:0"/> <stop offset="100%" style="stop-color:rgb(0,0,0);stop-opacity:1" /> </radialgradient> </defs> <ellipse cx="200" cy="200" rx="50" ry="50" fill="url(#grad)"/> </svg> (A) 甲 (B) 乙 (C) 丙 (D) 丁 40. 如附圖所示程式碼, 會造成下列哪一種 CSS3 程式效果?( 複選 ) background-image:-webkit-gradient(linear, right top, right bottom,from(#000000),to(#ffffff)); (A) 背景為漸變 (Gradient) 圖型 (B) 會對 Firefox 瀏覽器產生效果 (C) 背景的右上角會是黑色 (D) 背景的左下角會是白色範例試卷 :HT Page 13/16

14 41. 關於 CSS 漸變 (Gradient) 屬性 linear-gradient(xxx,yyy,zzz), 下列敘述哪些正確?( 複選 ) (A) xxx 允許的值包括 123deg (B) xxx 為漸變 (Gradient) 產生起點 (C) yyy 為漸變 (Gradient) 產生終點 (D) zzz 為漸變 (Gradient) 終點顏色 42. 若要產生一個右上角是黑色, 左下角是白色的漸變 (Gradient) 效果, 下列哪些程式碼可以達成?( 複選 ) (A) linear-gradient(45deg,white,black); (B) linear-gradient(left top,white,black); (C) linear-gradient(-333deg,white,black); (D) linear-gradient(white,black); 43. 下列哪一項是 HTML5 支援的 Web 儲存 (Web Storage) 功能? (A) globalstorage (B) applicationstorage (C) localstorage (D) tempstorage 44. HTML5 建議每個網站可使用的 Web 儲存 (Web Storage) 大小, 應為下列哪一項? (A) 4 megabytes (B) 5 megabytes (C) 6 megabytes (D) 7 megabytes 範例試卷 :HT Page 14/16

15 45. 如附圖所示程式碼, 如果使用者不願意提供所在位置資訊, 在程式碼的 err 變數 ( 方框處 ), 將取得下列哪一種錯誤代號? <script> Navigator.geolocation.getCurrentPosition(successCallback,errorCallback); function errorcallback(error){ var err=error.code;} </script> (A) 3 (B) 2 (C) 1 (D) 要使用 Offline Web Application, 在網站伺服器上要設定下列哪一種 MIME type? (A) text/cache-manifest (B) text/cache (C) application/cache-manifest (D) multipart/cache 47. 下列哪一種是在 Manifest 檔案中的註解方式? (A) // 這是註解 (B)  (C) # 這是註解 (D) /* 這是註解 */ 範例試卷 :HT Page 15/16

16 48. 如附圖所示程式碼,Manifest 檔案中, 放在 NETWORK 項目下的 comm.cgi, 所代表的意思應為下列哪一項? CACHE MANIFEST clock.html clock.css clocl.js NETWORK: comm.cgi (A) 網路不通的時候, 使用暫存在瀏覽器中的檔案 ; 網路通的時候, 由網站伺服器取得此檔案 (B) 告訴瀏覽器, 要暫存此檔案 (C) 使用時需由網站伺服器取得此檔案 (D) 網路出現問題時, 執行此檔案 49. 使用 Offline Web Application 時, 下列哪一種方法可以讓瀏覽器重新下載被儲存的檔案? (A) Mainfest 的檔案被修改時 (B) 使用者在瀏覽器上, 按下重新整理時 (C) 使用者關掉瀏覽器, 並重新開啟瀏覽器時 (D) 儲存的檔案過期時 50. 在 Geolocation 的 API 中, 透過下列哪一種方法取得使用者目前的地理位置資訊? (A) findcurrentlocation() (B) getlocation() (C) getposition() (D) getcurrentposition() 範例試卷 :HT Page 16/16

chapter 2 HTML5 目錄iii HTML HTML HTML HTML HTML canvas

chapter 2 HTML5 目錄iii HTML HTML HTML HTML HTML canvas Contents 目錄 chapter 1 1-1... 1-2 1-2... 1-3 HTML5... 1-3... 1-5 1-3... 1-9 Web Storage... 1-9... 1-10 1-4 HTML5... 1-14... 1-14... 1-15 HTML5... 1-15... 1-15... 1-16 1-5... 1-18 Apps... 1-18 HTML5 Cache