# HTML 入門完全指南 - 額外題目庫 (140題)

**說明**：本題庫包含 140 題選擇題，僅提供題目與正確答案，適合快速測驗。題目不與主習題重複。

---

**1. CSS 中 `box-sizing: border-box` 的主要作用是？**
- A) 增加邊框厚度
- B) 讓 Padding 和 Border 包含在設定的 Width 內
- C) 讓 Margin 包含在 Width 內
- D) 取消邊框樣式

**答案: B**

**2. 在 Flexbox 中，若要將排列方向改為「由上而下」，應設定？**
- A) `flex-direction: column`
- B) `flex-direction: row`
- C) `align-items: center`
- D) `display: grid`

**答案: A**

**3. `background-size: cover` 的效果是？**
- A) 圖片自動縮小以完整顯示
- B) 圖片重複排列填滿背景
- C) 圖片等比例放大填滿容器，超出的部分會被裁切
- D) 圖片置中但不調整大小

**答案: C**

**4. 關於 `rem` 單位的描述，何者正確？**
- A) 相對於父元素的大小
- B) 相對於根元素 (`html`) 的字體大小
- C) 固定像素值，不會變動
- D) 相對於視窗寬度

**答案: B**

**5. 當滑鼠移過按鈕時，希望游標變成「手指」形狀，應設定？**
- A) `cursor: pointer`
- B) `cursor: hand`
- C) `cursor: finger`
- D) `cursor: click`

**答案: A**

**6. 下列哪個 CSS 屬性是用來設定「外距」？**
- A) `padding`
- B) `border`
- C) `margin`
- D) `spacing`

**答案: C**

**7. 想要讓行內元素 (如 `<span>`) 可以設定寬高，應將 `display` 設定為？**
- A) `block`
- B) `inline-block`
- C) `flex`
- D) `grid`

**答案: B**

**8. 在新世代 Javascript 中，宣告一個「變數」且預期後續會修改它，應使用？**
- A) `const`
- B) `let`
- C) `var`
- D) `final`

**答案: B**

**9. `document.querySelector('.btn')` 會選取到什麼？**
- A) 網頁中所有 class 為 btn 的元素
- B) 網頁中第一個 class 為 btn 的元素
- C) id 為 btn 的元素
- D) 標籤名稱為 btn 的元素

**答案: B**

**10. 若要移除元素上的一個 class，應使用？**
- A) `element.classList.delete('active')`
- B) `element.classList.remove('active')`
- C) `element.style.class = ''`
- D) `element.removeClass('active')`

**答案: B**

**11. `input.value.trim()` 的 `trim()` 函式用途是？**
- A) 將文字轉為大寫
- B) 移除文字前後的空白
- C) 移除文字中的所有空白
- D) 驗證文字格式

**答案: B**

**12. 使用 `document.createElement('div')` 後，還需要哪個步驟元素才會出現在畫面上？**
- A) 不需要，建立後會自動出現
- B) 使用 `document.showElement()`
- C) 使用 `appendChild()` 或 `append()` 將其加入 DOM 樹
- D) 設定 `display: block`

**答案: C**

**13. 在 CSS 中，`*` 選擇器代表什麼意思？**
- A) 選取所有 `div`
- B) 選取根元素
- C) 全域選擇器，選取網頁上所有元素
- D) 選取重要元素

**答案: C**

**14. 若要讓 Flex 容器內的項目「換行」，應設定？**
- A) `flex-wrap: wrap`
- B) `flex-direction: column`
- C) `white-space: normal`
- D) `overflow: hidden`

**答案: A**

**15. 在 HTML 中引入外部 CSS 檔案，應使用哪個標籤？**
- A) `<style src="style.css">`
- B) `<css link="style.css">`
- C) `<link rel="stylesheet" href="style.css">`
- D) `<script src="style.css">`

**答案: C**

**16. CSS 屬性 `line-height` 通常用來設定什麼？**
- A) 字體粗細
- B) 行高（文字行與行之間的距離）
- C) 底線高度
- D) 邊框高度

**答案: B**

**17. 想要水平置中一個 `div` (有設定寬度)，最常見的 CSS 寫法是？**
- A) `margin: 0 auto;`
- B) `text-align: center;`
- C) `padding: 50%;`
- D) `float: center;`

**答案: A**

**18. JavaScript 中，`console.log()` 的主要功能是？**
- A) 在網頁上顯示訊息
- B) 彈出警告視窗
- C) 在瀏覽器的開發者工具控制台輸出訊息
- D) 記錄使用者行為

**答案: C**

**19. 下列哪一個不是合法的 CSS 顏色表示法？**
- A) `red`
- B) `#FF0000`
- C) `rgb(255, 0, 0)`
- D) `color: 255`

**答案: D**

**20. `opacity: 0` 和 `visibility: hidden` 的共同點是？**
- A) 元素都會從 DOM 中移除
- B) 元素都看不見，但仍佔據空間
- C) 元素都會完全消失且不佔空間
- D) 都不支援動畫

**答案: B**

**21. 若要讓背景圖片不會重複顯示，應設定？**
- A) `background-repeat: no-repeat`
- B) `background-size: cover`
- C) `background: none`
- D) `background-image: single`

**答案: A**

**22. CSS 優先權 (Specificity) 中，ID 選擇器和 Class 選擇器誰的權重較高？**
- A) Class 選擇器
- B) ID 選擇器
- C) 一樣高，看誰寫在後面
- D) 看標籤名稱決定

**答案: B**

**23. 在 HTML 連結中，`mailto:` 是用來做什麼的？**
- A) 寄送表單資料
- B) 建立電子郵件連結
- C) 連結到郵件伺服器
- D) 下載郵件

**答案: B**

**24. 如何在 JavaScript 中取得目前的網址？**
- A) `window.location.href`
- B) `document.url`
- C) `navigator.path`
- D) `window.link`

**答案: A**

**25. CSS 中 `position: absolute` 是相對於誰進行定位？**
- A) 永遠相對於瀏覽器視窗
- B) 相對於最近一個非 `static` 定位的父元素
- C) 相對於 `body`
- D) 相對於自己的原始位置

**答案: B**

**26. `<textarea>` 標籤的主要用途是？**
- A) 顯示單行文字
- B) 輸入多行文字
- C) 顯示程式碼片段
- D) 建立文字編輯器軟體

**答案: B**

**27. 若要禁止使用者縮放網頁 (Zoom)，通常在 viewport meta 設定中加入？**
- A) `user-scalable=no`
- B) `zoom=false`
- C) `scale=locked`
- D) `no-zoom`

**答案: A**

**28. CSS 屬性 `z-index` 的作用是？**
- A) 設定字體大小
- B) 設定元素的堆疊順序 (前後層級)
- C) 設定透明度
- D) 設定縮放比例

**答案: B**

**29. 哪一個事件代表「表單提交」？**
- A) `click`
- B) `change`
- C) `submit`
- D) `done`

**答案: C**

**30. `localStorage` 與 `sessionStorage` 的主要差異是？**
- A) 儲存容量不同
- B) `localStorage` 關閉瀏覽器後資料仍存在，`sessionStorage` 則會消失
- C) `localStorage` 只能存文字，`sessionStorage` 可以存物件
- D) 沒有差異

**答案: B**

**31. 下列哪個標籤不屬於「區塊元素 (Block Element)」？**
- A) `<div>`
- B) `<p>`
- C) `<span>`
- D) `<h1>`

**答案: C**

**32. `JSON.stringify()` 的用途是？**
- A) 將 JSON 字串轉為物件
- B) 將物件轉為 JSON 字串
- C) 格式化程式碼
- D) 加密資料

**答案: B**

**33. 在 HTML5 中，`REQUIRED` 屬性用在 `INPUT` 標籤上的作用是？**
- A) 設為唯讀
- B) 設為必填欄位
- C) 自動完成
- D) 隱藏欄位

**答案: B**

**34. 下列哪種圖片格式支援透明背景？**
- A) JPG
- B) PNG
- C) BMP
- D) TXT

**答案: B**

**35. CSS 中 `vh` 單位代表什麼？**
- A) 視窗寬度的百分比
- B) 視窗高度的百分比 (Viewport Height)
- C) 垂直高度像素
- D) 虛擬高度

**答案: B**

**36. JavaScript 中 `NaN` 代表什麼？**
- A) Not a Number (非數值)
- B) Null and None
- C) New and New
- D) No Any Name

**答案: A**

**37. 若要選取「所有」符合條件的元素，應使用？**
- A) `getElementById`
- B) `querySelector`
- C) `querySelectorAll`
- D) `getElementsByTagName`

**答案: C**

**38. `<link rel="icon">` 通常用來設定什麼？**
- A) CSS 樣式表
- B) 網頁圖示 (Favicon)
- C) 字體檔案
- D) JavaScript 檔案

**答案: B**

**39. 想要去除 `<ul>` 清單前面的預設圓點，應設定？**
- A) `text-decoration: none`
- B) `list-style: none`
- C) `list-type: hidden`
- D) `bullet: none`

**答案: B**

**40. 在 Grid 排版中，`grid-template-columns: 1fr 1fr;` 代表？**
- A) 只有一個欄位
- B) 兩個欄位，各佔 50% 寬度
- C) 兩個欄位，寬度固定 100px
- D) 無法判斷

**答案: B**

**41. 希望使用者能用拉動的方式輸入數值 (例如音量調整)，應使用哪個 input type？**
- A) `type="number"`
- B) `type="range"`
- C) `type="scroll"`
- D) `type="slider"`

**答案: B**

**42. 若要讓使用者方便選擇顏色，應使用？**
- A) `type="text"`
- B) `type="picker"`
- C) `type="color"`
- D) `type="palette"`

**答案: C**

**43. `<datalist>` 標籤的主要用途是？**
- A) 建立下拉選單，但不允許使用者自行輸入
- B) 為 `<input>` 欄位提供預設建議清單，使用者仍可自行輸入
- C) 顯示資料庫內容
- D) 建立表格資料

**答案: B**

**44. 在 `<select>` 下拉選單中，若要將選項分組顯示（如水果類、蔬菜類），應使用哪個標籤？**
- A) `<group>`
- B) `<optgroup>`
- C) `<category>`
- D) `<fieldset>`

**答案: B**

**45. `<fieldset>` 標籤通常會搭配哪個標籤來設定該區塊的標題？**
- A) `<caption>`
- B) `<header>`
- C) `<legend>`
- D) `<title>`

**答案: C**

**46. 若希望 `<input type="file">` 能夠一次選擇多個檔案，需要加上哪個屬性？**
- A) `multiple`
- B) `many`
- C) `select-all`
- D) `multi`

**答案: A**

**47. 若要限制上傳檔案只能是圖片檔，應設定？**
- A) `only="image/*"`
- B) `accept="image/*"`
- C) `type="image"`
- D) `allow="images"`

**答案: B**

**48. 若要為表格 (`<table>`) 加上整體標題，應使用哪個標籤？**
- A) `<title>`
- B) `<caption>`
- C) `<th>`
- D) `<header>`

**答案: B**

**49. 在 `<th>` 中使用 `scope="col"` 的目的是？**
- A) 用於合併欄位
- B) 清楚告知螢幕閱讀器該標題是對應哪一「列」或哪一「行」，提升無障礙體驗
- C) 設定欄位寬度
- D) 設定背景顏色

**答案: B**

**50. 若要對表格中的特定「幾行」統一設定樣式 (例如前兩行背景變色)，最適合使用？**
- A) 逐一在 `<td>` 加 class
- B) `<colgroup>` 和 `<col>`
- C) `<thead>`
- D) `<tr>`

**答案: B**

**51. `iframe` 的 `sandbox` 屬性主要用於？**
- A) 提升載入速度
- B) 啟用所有功能
- C) 限制嵌入內容的權限 (如禁止執行腳本、表單提交)，提升安全性
- D) 讓背景變成沙色

**答案: C**

**52. 在 `<video>` 標籤中放置多個 `<source>` 的原因是？**
- A) 同時播放多個影片
- B) 提供不同格式 (如 mp4, webm) 讓瀏覽器選擇支援的格式播放
- C) 備份影片
- D) 增加畫質

**答案: B**

**53. 若要在影片中加入字幕，應使用哪個標籤？**
- A) `<subtitle>`
- B) `<text>`
- C) `<track>`
- D) `<caption >`

**答案: C**

**54. SVG 圖片的最大優勢是？**
- A) 檔案最小
- B) 點陣圖，色彩豐富
- C) 向量圖，無論放大多少倍都不會失真 (模糊)
- D) 瀏覽器預設不支援，需外掛

**答案: C**

**55. `<canvas>` 標籤通常搭配什麼語言來進行繪圖？**
- A) CSS
- B) Python
- C) JavaScript
- D) PHP

**答案: C**

**56. 若要標示一段「被螢光筆畫記」的重點文字，應使用哪個語意標籤？**
- A) `<b>`
- B) `<em>`
- C) `<mark>`
- D) `<span>`

**答案: C**

**57. 為了表示文件中的修訂紀錄，刪除的文字用 `<del>`，新增的文字應用？**
- A) `<add>`
- B) `<new>`
- C) `<ins>`
- D) `<plus>`

**答案: C**

**58. 若引用了一段長篇文字 (區塊引用)，應使用？**
- A) `<q>`
- B) `<blockquote>`
- C) `<cite>`
- D) `<quote>`

**答案: B**

**59. 化學式 H₂O 中的「2」應該使用哪個標籤？**
- A) `<sup>`
- B) `<sub>`
- C) `<small>`
- D) `<bottom>`

**答案: B**

**60. `<address>` 標籤的主要用途是？**
- A) 顯示任何地址
- B) 專指該份文件或文章「作者/聯絡人」的聯絡資訊
- C) 顯示地圖
- D) 顯示 IP 位址

**答案: B**

**61. `<time>` 標籤中的 `datetime` 屬性用途是？**
- A) 設定鬧鐘
- B) 顯示給使用者看
- C) 提供機器可讀的標準時間格式 (如 `2023-10-01`)
- D) 自動更新時間

**答案: C**

**62. 自訂屬性 `data-*` (如 `data-id`) 的命名規則中，哪個是錯誤的？**
- A) 必須以 `data-` 開頭
- B) 只能包含小寫字母、數字、連字號
- C) 可以包含大寫字母
- D) 屬性值可以是任何字串

**答案: C**

**63. 設定 `tabindex="-1"` 的效果是？**
- A) 該元素成為 Tab 鍵順序的第一個
- B) 該元素永遠無法被聚焦
- C) 該元素可以透過 JS `focus()` 聚焦，但不會被 Tab 鍵選中
- D) 該元素自動隱藏

**答案: C**

**64. 若希望超連結點擊後直接下載檔案，而非在瀏覽器開啟，應使用？**
- A) `download` 屬性
- B) `save` 屬性
- C) `export` 屬性
- D) `file` 屬性

**答案: A**

**65. `<base>` 標籤的作用是？**
- A) 設定網頁基底顏色
- B) 為頁面上所有相對路徑的連結設定預設 URL 根目錄
- C) 設定字體大小基準
- D) 設定資料庫連線

**答案: B**

**66. 關於 `target="_self"`，下列敘述何者正確？**
- A) 在新視窗開啟
- B) 在父框架開啟
- C) 這是預設值，在當前視窗/框架開啟連結
- D) 在整個視窗開啟

**答案: C**

**67. 若要製作「影像地圖」(Image Map)，圖片不同區域連結到不同地方，需搭配 `<map>` 與哪個標籤？**
- A) `<locate>`
- B) `<point>`
- C) `<area>`
- D) `<zone>`

**答案: C**

**68. `<meter>` 標籤與 `<progress>` 的主要差異是？**
- A) `<progress>` 用於已知進度的任務（如載入中）；`<meter>` 用於已知範圍的數值（如磁碟空間、評分）
- B) 兩者完全通用
- C) `<meter>` 是舊標籤
- D) `<progress>` 不能設定最大值

**答案: A**

**69. 表單欄位屬性 `autofocus` 會造成什麼效果？**
- A) 頁面載入後自動清除欄位
- B) 頁面載入後，游標自動聚焦在該欄位
- C) 自動填入預設值
- D) 自動提交表單

**答案: B**

**70. 全域屬性 `title` (如 `<div title="...">`) 通常會呈現什麼視覺效果？**
- A) 變成標題字體
- B) 當滑鼠游标懸停時，顯示工具提示 (Tooltip) 文字
- C) 顯示在瀏覽器頁籤上
- D) 增加陰影

**答案: B**

**71. 在 HTML 中引入 JavaScript 檔案的最佳位置通常是？**
- A) `<head>` 標籤內
- B) `<body>` 的最上方
- C) `<body>` 的結束標籤 `</body>` 之前
- D) `<html>` 標籤之外

**答案: C**

**72. 下列哪一個屬性可以用來「防止」使用者點擊按鈕 (設為停用狀態)？**
- A) `hidden`
- B) `block`
- C) `disabled`
- D) `stop`

**答案: C**

**73. 關於 `id` 與 `class` 的區別，下列何者正確？**
- A) `id` 可以重複使用，`class` 只能用一次
- B) `id` 是唯一的，`class` 可以重複使用且一個元素可有多個 class
- C) `id` 用於 CSS，`class` 用於 JavaScript
- D) 兩者完全沒有差別

**答案: B**

**74. 若要在 JavaScript 中取得 `<input>` 欄位目前輸入的文字，應讀取哪個屬性？**
- A) `input.text`
- B) `input.content`
- C) `input.value`
- D) `input.data`

**答案: C**

**75. 小明想要用 JavaScript 隱藏一個元素，他應該操作哪個 CSS 屬性？**
- A) `element.style.display = 'none'`
- B) `element.style.visibility = 'gone'`
- C) `element.style.opacity = 'hide'`
- D) `element.hidden = 'true'`

**答案: A**

**76. 下列哪一段程式碼可以正確地「建立」一個新的 `div` 元素？**
- A) `document.add('div')`
- B) `document.newElement('div')`
- C) `document.createElement('div')`
- D) `document.make('div')`

**答案: C**

**77. 承上題，建立元素後，若要將它「加入」到 `body` 的最後面，應使用？**
- A) `document.body.push(newDiv)`
- B) `document.body.appendElement(newDiv)`
- C) `document.body.appendChild(newDiv)`
- D) `document.body.insert(newDiv)`

**答案: C**

**78. 若要判斷一個變數 `count` 是否大於 10，應使用哪種語法？**
- A) `if (count > 10) { ... }`
- B) `check (count > 10) { ... }`
- C) `when (count > 10) { ... }`
- D) `for (count > 10) { ... }`

**答案: A**

**79. 在 Flexbox 排版中，若想讓導覽列的 Logo 靠左、選單靠右 (左右推開)，最適合設定主軸對齊為？**
- A) `justify-content: center`
- B) `justify-content: flex-start`
- C) `justify-content: space-between`
- D) `justify-content: space-around`

**答案: C**

**80. CSS 的 `padding: 20px` 代表什麼意思？**
- A) 上下左右內距皆為 20px
- B) 只有上方內距為 20px
- C) 只有左右內距為 20px
- D) 字體大小增加 20px

**答案: A**

**81. 若要選取所有 class 為 `card` 的元素，JavaScript 應使用？**
- A) `document.getElementById('card')`
- B) `document.querySelector('.card')` (只選第一個) 或 `querySelectorAll`
- C) `document.select('card')`
- D) `document.getClass('card')`

**答案: B**

**82. 關於 `rem` 單位，它是相對於哪個元素的字體大小？**
- A) 父元素
- B) 自己的寬度
- C) 根元素 `<html>`
- D) 瀏覽器視窗高度

**答案: C**

**83. 下列哪個 CSS 設定可以讓按鈕在滑鼠滑過時顯示「手指」游標？**
- A) `cursor: hand`
- B) `cursor: click`
- C) `cursor: pointer`
- D) `mouse: finger`

**答案: C**

**84. 在 JavaScript 中，`console.log()` 通常用於什麼情境？**
- A) 在網頁上顯示給使用者看
- B) 開發階段除錯，將訊息印在開發者工具的控制台
- C) 彈出視窗警告
- D) 傳送資料給伺服器

**答案: B**

**85. 若希望一個區塊元素 (`div`) 能夠與其他元素並排顯示，且仍能設定寬高，應設定 `display` 為？**
- A) `block`
- B) `inline`
- C) `inline-block`
- D) `none`

**答案: C**

**86. JavaScript 函式 `trim()` 的作用是什麼？**
- A) 將字串切成陣列
- B) 移除字串前後的空白字元
- C) 將字串轉為全大寫
- D) 計算字串長度

**答案: B**

**87. 在 To-Do List 範例中，我們使用什麼事件來偵測使用者按下「Enter」鍵？**
- A) `click`
- B) `keypress` (並檢查 `e.key === 'Enter'`)
- C) `submit`
- D) `change`

**答案: B**

**88. 下列哪個標籤是用來定義 CSS 的「內部樣式表」？**
- A) `<script>`
- B) `<link>`
- C) `<style>`
- D) `<css>`

**答案: C**

**89. 關於 `box-sizing: border-box`，下列敘述何者正確？**
- A) 元素的總寬度會包含 padding 與 border，不會因這兩者而額外變大
- B) 元素的 padding 會往外長，導致總寬度增加
- C) 會取消元素的 border 樣式
- D) 只能用於圖片

**答案: A**

**90. 若要透過 JavaScript 切換一個元素的 class (例如 `active`)，最方便的方法是？**
- A) `element.className += ' active'`
- B) `element.classList.toggle('active')`
- C) `element.style.class = 'active'`
- D) `element.setClass('active')`

**答案: B**

**91. 下列哪一個是「區塊元素 (Block Element)」的預設特徵？**
- A) 預設會獨佔一行
- B) 預設寬度為內容寬度
- C) 無法設定上下的 margin
- D) 可以與其他行內元素並排

**答案: A**

**92. 在 CSS 中，`#menu` 代表選取什麼？**
- A) class 為 menu 的元素
- B) 標籤為 menu 的元素
- C) id 為 menu 的元素
- D) name 為 menu 的元素

**答案: C**

**93. 下列哪個 JavaScript 關鍵字用於宣告一個「常數」 (後續不能重新賦值)？**
- A) `var`
- B) `let`
- C) `const`
- D) `static`

**答案: C**

**94. 關於變數宣告，現代 JavaScript 開發建議優先使用？**
- A) 全部用 `var`
- B) `let` 與 `const`
- C) 全部用全域變數
- D) 不需要宣告

**答案: B**

**95. 若要移除一個已經存在的 DOM 元素，應使用哪個方法？**
- A) `element.delete()`
- B) `element.remove()`
- C) `element.clear()`
- D) `element.hide()`

**答案: B**

**96. CSS 的 `border-radius: 50%` 通常用於製作什麼形狀？**
- A) 圓角矩形
- B) 正圓形 (若寬高相等)
- C) 三角形
- D) 梯形

**答案: B**

**97. 下列哪個屬性可以設定文字的粗細？**
- A) `font-size`
- B) `font-style`
- C) `font-weight`
- D) `text-decoration`

**答案: C**

**98. 若要將文字水平置中，應設定？**
- A) `vertical-align: middle`
- B) `text-align: center`
- C) `justify-content: center`
- D) `align-items: center`

**答案: B**

**99. 若要刪除字串前後的空白，可以用 JS 的哪一個方法？**
- A) `split()`
- B) `slice()`
- C) `trim()`
- D) `replace()`

**答案: C**

**100. 在 Flexbox 中，`align-items: center` 是用來控制哪個方向的對齊？**
- A) 主軸 (Main Axis)
- B) 交錯軸 (Cross Axis)
- C) Z 軸
- D) 對角線

**答案: B**

**101. 下列 CSS 選擇器中，哪一個優先權 (權重) 最高？**
- A) `div` (標籤選擇器)
- B) `.box` (類別選擇器)
- C) `#main` (ID 選擇器)
- D) `*` (全域選擇器)

**答案: C**

**102. `background-size: cover` 的主要用途是？**
- A) 讓背景圖完整顯示，可能會留白
- B) 讓背景圖等比例放大填滿容器，多餘部分會被裁切
- C) 讓背景圖重複排列
- D) 讓背景圖變成固定大小

**答案: B**

**103. JavaScript 中，若要判斷兩者「相等」 (包含數值與型別)，應使用？**
- A) `=`
- B) `==`
- C) `===`
- D) `equals()`

**答案: C**

**104. `alert("Hello")` 執行的效果是？**
- A) 在控制台印出 Hello
- B) 在網頁上新增一行 Hello
- C) 瀏覽器彈出一個警告視窗顯示 Hello
- D) 導向到 Hello 頁面

**答案: C**

**105. 若想要為網頁加上背景顏色 `/f0f0f0`，CSS 應如何寫？**
- A) `background-color: #f0f0f0;`
- B) `color: #f0f0f0;`
- C) `bg: #f0f0f0;`
- D) `back: #f0f0f0;`

**答案: A**

**106. 下列哪種方式可以在 CSS 中選取 `type="text"` 的 input？**
- A) `input.text`
- B) `input[type="text"]`
- C) `input:text`
- D) `input#text`

**答案: B**

**107. 在 DOM 操作中，`element.textContent = "Hi"` 會發生什麼事？**
- A) 改變元素的背景顏色
- B) 改變元素的內部文字內容
- C) 改變元素的 ID
- D) 產生語法錯誤

**答案: B**

**108. 若要檢查元素是否包含某個 class (例如 `active`)，應使用？**
- A) `element.classList.contains('active')`
- B) `element.hasClass('active')`
- C) `element.className == 'active'`
- D) `element.is('active')`

**答案: A**

**109. JavaScript 中的陣列索引 (Index) 是從多少開始？**
- A) 1
- B) 0
- C) -1
- D) 自訂

**答案: B**

**110. `<script src="app.js"></script>` 這行程式碼通常建議放在哪裡？**
- A) `<head>` 裡面
- B) 任何地方都可以
- C) `<body>` 結尾標籤之前
- D) `<html>` 標籤之後

**答案: C**

**111. 下列哪一種標籤預設是行內元素 (Inline Element)？**
- A) `<div>`
- B) `<p>`
- C) `<span>`
- D) `<section>`

**答案: C**

**112. CSS 中，`vh` 單位是指？**
- A) Viewport Height (視窗高度的百分比)
- B) Viewport Width (視窗寬度的百分比)
- C) Visible Height (可見高度)
- D) Virtual Height (虛擬高度)

**答案: A**

**113. 關於 `flex-wrap: wrap` 的功能，下列何者正確？**
- A) 禁止項目換行
- B) 當空間不足時，讓項目自動換行
- C) 強制項目垂直排列
- D) 隱藏多餘的項目

**答案: B**

**114. 若要讓一個區塊水平置中 (且有設定寬度)，常用的 CSS 技巧是？**
- A) `padding: auto`
- B) `border: auto`
- C) `margin: 0 auto`
- D) `display: center`

**答案: C**

**115. 在 JavaScript 中，`element.style.color = 'red'` 會將樣式加在哪裡？**
- A) 外部 CSS 檔案
- B) 該元素的行內樣式 (Inline Style) `style="..."`
- C) 內部樣式表 `<style>`
- D) 瀏覽器預設樣式

**答案: B**

**116. 若要偵測使用者「點擊」某個元素，應監聽哪個事件？**
- A) `hover`
- B) `click`
- C) `press`
- D) `touch`

**答案: B**

**117. 下列哪個符號在 JavaScript 中代表「邏輯非 (Not)」？**
- A) `&`
- B) `|`
- C) `!`
- D) `~`

**答案: C**

**118. CSS 的 `line-height` 用來設定？**
- A) 文字大小
- B) 行高 (行與行之間的間距)
- C) 字元間距
- D) 段落間距

**答案: B**

**119. `width: 100%` 通常是指？**
- A) 100px
- B) 填滿父元素的內容寬度
- C) 填滿整個螢幕寬度
- D) 圖片原始寬度

**答案: B**

**120. 下列哪一個屬性用來設定背景圖片？**
- A) `background-color`
- B) `background-image`
- C) `image-src`
- D) `bg-img`

**答案: B**

**121. 若要讓文字不要自動換行，CSS 可設定？**
- A) `white-space: nowrap`
- B) `word-break: break-all`
- C) `overflow: hidden`
- D) `display: inline`

**答案: A**

**122. JavaScript 中，字串要用什麼符號包起來？**
- A) 只能用雙引號 `"`
- B) 只能用單引號 `'`
- C) 單引號 `'` 或 雙引號 `"` 皆可
- D) 不需要符號

**答案: C**

**123. 下列哪一個函式可以用來「選取」DOM 元素？**
- A) `document.find()`
- B) `document.querySelector()`
- C) `document.search()`
- D) `document.pick()`

**答案: B**

**124. 如何在 JavaScript 中註解單行程式碼？**
- A) `<!-- 註解 -->`
- B) `/* 註解 */`
- C) `// 註解`
- D) `# 註解`

**答案: C**

**125. 關於 `display: none`，下列敘述何者正確？**
- A) 元素會變成透明，但仍佔據空間
- B) 元素會被隱藏，且不佔據任何空間 (排版上消失)
- C) 元素會變成灰色
- D) 元素會縮小到 0px

**答案: B**

**126. 在 Flexbox 中，哪個屬性決定了主軸的方向 (水平或垂直)？**
- A) `flex-direction`
- B) `justify-content`
- C) `align-items`
- D) `flex-wrap`

**答案: A**

**127. 若要讓 `<a>` 超連結變成按鈕的樣子，通常需要設定？**
- A) `display: inline-block` 或 `block`，搭配 padding 與背景色
- B) `display: table`
- C) `text-decoration: underline`
- D) `list-style: none`

**答案: A**

**128. 下列哪個單位是相對單位，適合用於響應式字體大小？**
- A) `px`
- B) `pt`
- C) `rem`
- D) `cm`

**答案: C**

**129. 當我們寫 `font-family: Arial, sans-serif;` 時，`sans-serif` 的作用是？**
- A) 指定特定字體名稱
- B) 當 Arial 無法顯示時的通用後備字體 (無襯線體)
- C) 強制設定為襯線體
- D) 設定字體顏色

**答案: B**

**130. 在 JavaScript 中，`if...else` 是用來做什麼的？**
- A) 迴圈執行
- B) 定義函式
- C) 條件判斷 (控制流程)
- D) 宣告變數

**答案: C**

**131. 下列哪種方式可以選取「多個」元素 (例如所有 list items)？**
- A) `document.querySelector('li')`
- B) `document.querySelectorAll('li')`
- C) `document.getElementById('li')`
- D) `document.getAll('li')`

**答案: B**

**132. `input.value` 取得的資料型別通常是？**
- A) 數字 (Number)
- B) 字串 (String)
- C) 布林 (Boolean)
- D) 陣列 (Array)

**答案: B**

**133. 若要將字串 `" hello "` 變成 `"hello"`，應使用？**
- A) `trim()`
- B) `cut()`
- C) `slice()`
- D) `split()`

**答案: A**

**134. CSS 屬性 `z-index` 只有在元素的 `position` 不是什麼值的時候才有效？**
- A) `relative`
- B) `absolute`
- C) `fixed`
- D) `static` (預設值)

**答案: D**

**135. 若要讓背景圖片「不重複」顯示，應設定？**
- A) `background-repeat: no-repeat`
- B) `background-repeat: repeat-x`
- C) `background-image: none`
- D) `background-size: cover`

**答案: A**

**136. `text-decoration: none` 最常用於？**
- A) 移除圖片邊框
- B) 移除超連結 `<a>` 的預設底線
- C) 移除清單圓點
- D) 移除字體粗細

**答案: B**

**137. 在 Flexbox 中，`flex: 1` 通常代表什麼意思？**
- A) 固定寬度 1px
- B) 項目會平均分配剩餘空間並放大
- C) 項目不佔空間
- D) 項目縮小一半

**答案: B**

**138. 下列哪個 HTML 屬性與 JavaScript 互動最密切 (例如綁定 ID)？**
- A) `href`
- B) `src`
- C) `id`
- D) `alt`

**答案: C**

**139. 關於 `const` 宣告的物件，下列何者正確？**
- A) 物件本身不能被重新賦值 (變成另一個物件)，但物件內的屬性值可以修改
- B) 物件內的屬性完全不能修改
- C) 可以隨時變成 null
- D) 必須用大寫命名

**答案: A**

**140. 學習網頁開發，根據書中建議哪種心態最重要？**
- A) 背誦所有語法
- B) 複製貼上就好
- C) 理解原理並動手實作
- D) 依賴工具自動生成

**答案: C**