Snake's AI HTML 測驗模組

互動實驗室範例 (100 個主題)

此頁面示範從最基礎到進階的 100 個互動式範例，你可以依需求自行擴充或改寫。

主題一：HTML 文件結構

了解 HTML 文件的基礎骨架，通常以 <!DOCTYPE html> 宣告開頭，並使用 <html>、<head>、<body> 等標籤。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>文件標題</title>
  </head>
  <body>
    <!-- 內容區 -->
  </body>
</html>

【立即測驗】請問 HTML5 的 DOCTYPE 宣告方式為何？

<!DOCTYPE HTML5>
<DOCTYPE html>
<!DOCTYPE html>

主題二：標題（Headings）

使用 <h1> ~ <h6> 來定義不同層級的標題，<h1> 通常用於主要標題， <h6> 用於最小標題。

<h1>主要標題</h1>
<h2>次要標題</h2>
<h3>第三層級標題</h3>
... 以此類推

【立即測驗】網頁最主要的大標題，通常使用哪個標籤？

主題三：段落與換行

<p> 用於建立段落，<br> 用於強制換行，但多段內容通常使用 <p> 分隔。

<p>這是一個段落</p>
<p>這是另一個段落</p>

【立即測驗】若想在段落中只換一行，不想產生新的段落，應該使用哪個標籤？

主題四：文字格式

<strong>、<em>、<u> 等標籤可以加粗、斜體、或加底線， <strong> 與 <em> 也帶有語意上的強調。

<p>文字 <strong>加粗</strong>，文字 <em>斜體</em>，文字 <u>底線</u>。</p>

【立即測驗】以下哪個標籤最適合呈現「重要且需要語意強調」的文字？

主題五：清單（Lists）

<ul> 及 <li> 建立無序清單，<ol> 及 <li> 建立有序清單。

<ul>
  <li>無序項目 1</li>
  <li>無序項目 2</li>
</ul>

<ol>
  <li>有序項目 1</li>
  <li>有序項目 2</li>
</ol>

【立即測驗】若要產生「編號順序」的列表，應該使用哪個標籤組合？

主題六：超連結（Links）

<a href="網址">連結文字</a> 用於在網頁中建立超連結，可連至同頁錨點、其他頁面或外部網站。

<a href="https://example.com">前往 Example 網站</a>

【立即測驗】哪個屬性用於指定連結目標 URL？

src
href
link

主題七：圖片（Images）

<img src="路徑" alt="替代文字"> 用於插入圖片，alt 屬性能描述圖片內容，有助於無障礙及搜尋引擎。

<img src="picture.jpg" alt="描述圖片內容">

【立即測驗】在 <img> 裡哪個屬性用於指定圖片檔案路徑？

href
src
alt

主題八：表格（Tables）

使用 <table>、<tr>、<th>、<td> 來呈現結構化的資料。

<table>
  <tr>
    <th>標題 1</th>
    <th>標題 2</th>
  </tr>
  <tr>
    <td>資料 1</td>
    <td>資料 2</td>
  </tr>
</table>

【立即測驗】下列何者用於定義表格標頭（表格的欄位名稱）？

主題九：表單（Forms）

<form>、<input>、<textarea>、<button> 等用於收集使用者輸入並提交。

<form action="/submit" method="POST">
  <label>姓名：<input type="text" name="username"></label>
  <input type="submit" value="送出">
</form>

【立即測驗】請問 <form> 的哪個屬性決定資料送出的目的地 (URL)？

method
action
name

主題十：基本語意化標籤（Semantic Elements）

<header>、<nav>、<section>、<article>、<footer> 等標籤，使網頁結構更具意義。

<header>頁首內容</header>
<nav>選單/導覽列</nav>
<section>主要內容</section>
<footer>頁尾內容</footer>

【立即測驗】若要放置網站主選單/導覽列，最適合使用哪個語意化標籤？

主題十一：區塊元素與行內元素（Block vs Inline）

區塊元素（如 <div>、<p>）預設獨佔一行；行內元素（如 <span>、<a>）則不會自動換行。

<div>我是區塊</div>
文字不會換行 <span>我是行內</span> 文字繼續

【立即測驗】下列哪個屬於「行內元素」？

主題十二：內嵌框架（Iframes）

<iframe> 可在網頁中嵌入另一個 HTML 文件或外部內容（如 YouTube 影片）。

<iframe src="https://www.youtube.com/embed/XXXX" width="560" height="315">
  您的瀏覽器不支援 iframe
</iframe>

【立即測驗】若想在網頁中插入一個外部的網頁或影片，應該使用哪個標籤？

主題十三：註解（Comments）

 不會在網頁上顯示，可用於程式碼說明或備註。

<!-- 這裡的內容不會在畫面上顯示 -->

【立即測驗】在 HTML 中加入註解時，應使用哪個語法包覆？

/* ... */
// ...

主題十四：分區與範圍（Div 與 Span）

<div> 可作為分區塊(container)，<span> 則是行內容器，可用於小範圍文字或內聯樣式。

<div>
  <span>行內元素</span>
  其他文字
</div>

【立即測驗】如果想將大段內容分成區塊，最常使用哪個標籤？

主題十五：Meta 標籤（在 <head> 中）

<meta> 用於描述網頁編碼、關鍵字、描述、響應式設定等資訊，對 SEO 與行動裝置友善度很重要。

<head>
  <meta charset="UTF-8">
  <meta name="description" content="網站描述">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

【立即測驗】若要指定網頁的字元編碼為 UTF-8，應使用哪個標籤？

主題十六：網頁圖示（Favicon）

<link rel="icon" href="favicon.png"> 用於設定瀏覽器標籤上的小圖示（可使用 .ico, .png, .svg 等）。

<head>
  <link rel="icon" type="image/png" href="favicon.png">
</head>

【立即測驗】若想在瀏覽器分頁最左側顯示小圖示，需要在 <head> 中加入哪個標籤？

主題十七：HTML 與 CSS 結合

使用 <style> 或 <link rel="stylesheet" href="..."> 匯入外部 CSS，將結構與樣式分離。

<head>
  <link rel="stylesheet" href="styles.css"> 
  <!-- 或直接使用 <style> 撰寫 CSS -->
</head>

【立即測驗】若要引入外部 CSS 檔，應該使用哪個標籤？

主題十八：HTML 實體（Entities）

用於顯示在 HTML 中具有特殊意義的字元，如 < (顯示 < )、> (顯示 > )、 & (顯示 & ) 等。

<p>使用 &amp;lt; 來顯示左括號 <</p>

【立即測驗】如果想在 HTML 中顯示真正的「<」符號，應該使用哪個實體？

<
>
&

主題十九：無障礙網頁設計（Accessibility）

在圖片加上 alt、表單加 <label>，或使用 aria-* 屬性，利於輔助工具與搜尋引擎。

<img src="photo.jpg" alt="圖片描述">
<label for="user">使用者名稱</label>
<input type="text" id="user" aria-label="輸入使用者名稱">

【立即測驗】若想在圖片無法顯示時，也能讓使用者或螢幕閱讀器知道其含意，應設定哪個屬性？

title
alt
aria-label

主題二十：音訊與影片標籤（Audio & Video）

<audio>、<video> 用於在網頁中直接播放多媒體檔案，瀏覽器若支援該格式即可直接顯示播放器。

<audio controls>
  <source src="sound.mp3" type="audio/mpeg">
  您的瀏覽器不支援音訊播放
</audio>

<video controls>
  <source src="movie.mp4" type="video/mp4">
  您的瀏覽器不支援影片播放
</video>

【立即測驗】若要在網頁中提供影片播放，應該使用哪個標籤？

實驗二十一：倒數計時器

// 實驗二十一：倒數計時器
let exp21Interval = null;
document.getElementById('exp21-btn').addEventListener('click', () => {
  if (exp21Interval) clearInterval(exp21Interval);
  let sec = parseInt(document.getElementById('exp21-seconds').value);
  const result = document.getElementById('exp21-result');
  result.textContent = sec;
  exp21Interval = setInterval(() => {
    sec--;
    if (sec <= 0) {
      clearInterval(exp21Interval);
      result.textContent = "時間到！";
    } else {
      result.textContent = sec;
    }
  }, 1000);
});

實驗二十二：讓文字閃爍

這段文字會閃爍

// 實驗二十二：讓文字閃爍
let exp22Timer = null;
document.getElementById('exp22-btn').addEventListener('click', () => {
  const text = document.getElementById('exp22-text');
  if (exp22Timer) {
    clearInterval(exp22Timer);
    exp22Timer = null;
    text.style.visibility = "visible";
  } else {
    exp22Timer = setInterval(() => {
      text.style.visibility = (text.style.visibility === "hidden") ? "visible" : "hidden";
    }, 500);
  }
});

實驗一百：讓 AI 產生隨機回答 (ChatGPT API示意)

示範：串接 ChatGPT API（需後端或直接 fetch 端點）

// 實驗一百：AI 產生隨機回答 (僅示意)
// fetch('https://api.openai.com/v1/completions', {
//   method: 'POST',
//   headers: {
//     'Content-Type': 'application/json',
//     'Authorization': 'Bearer YOUR_OPENAI_API_KEY'
//   },
//   body: JSON.stringify({
//     model: 'text-davinci-003',
//     prompt: '請問今天的天氣如何？',
//     max_tokens: 100
//   })
// })
// .then(response => response.json())
// .then(data => {
//   console.log(data.choices[0].text);
// });

ChatGPT-Assist-AI-Solving

搜尋此網誌