DAY9:網頁的基石 (HTML)：搭建 BLE 瑞士刀的介面

2025 iThome 鐵人賽

DAY 9

Modern Web

Web Bluetooth API 實戰：30 天打造通用 BLE 偵錯工具系列第 9 篇

17th鐵人賽

jklu7limj

2025-09-23 19:11:09

20 瀏覽

分享至

經過前面幾天扎實的內功修煉，我們已經徹底掌握了 JavaScript 的核心精髓：從變數、邏輯控制，到函式、物件與陣列。可以說，我們已經為專案打造了一個強大的「大腦」。

但是，一個只有大腦卻沒有身體的專案，是無法與使用者互動的。我們寫的所有 console.log 都只存在於開發者的黑盒子裡。從今天起，我們要開始為這個大腦打造一副可以被看見、可以被觸摸的「軀體」。

這副軀體由兩種材料構成：HTML 和 CSS。

HTML (HyperText Markup Language)：網頁的骨架。它負責定義頁面上有哪些內容，以及這些內容的結構。例如，「這裡有一個標題」、「那裡有一個按鈕」、「底下有一個容器」。
CSS (Cascading Style Sheets)：網頁的外觀。它負責為骨架上色、定義排版、美化外觀。例如，「標題是藍色的」、「按鈕是圓角的」、「容器有邊框」。

今天，我們的任務非常專一：專心打造骨架。我們將學習 HTML 的基礎，並親手搭建出我們「通用 BLE 偵錯工具」的介面結構。雖然它今天看起來會很樸素，但這個骨架將是我們未來所有功能附著的基礎。讓我們開始動工吧！

1. 什麼是 HTML？

HTML (超文本標記語言) 不是一種程式語言，它是一種標記語言。

程式語言 (像 JavaScript) 關心的是「邏輯」和「行為」：如果...就...、重複做某件事、計算結果。
標記語言 (像 HTML) 關心的是「結構」和「語意」：這段文字是一個段落、這個詞語應該被強調、這裡是一個列表。

HTML 透過「標籤 (Tag)」來標記內容。

標籤的語法規則：

成對出現：大部分標籤都有一個「開始標籤」<p> 和一個「結束標籤」</p>。
內容置中：你想標記的內容，就放在開始和結束標籤之間。例如：<p>這是一段文字。</p>
屬性 (Attribute)：可以在開始標籤中加入「屬性」，為標籤提供額外資訊。屬性的格式是 屬性名稱="屬性值"。例如：<div id="main-container">，id 就是屬性名稱，"main-container" 是它的值。

2. 一個標準 HTML 文件的基本骨架

每個 HTML 檔案，都像是在填一份有固定格式的表格。以下是「最簡配」的標準格式：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>我的網頁標題</title>
  </head>
  <body>
    <h1>這是一個主標題</h1>
    <p>這是一段段落文字。</p>
  </body>
</html>

逐行解析

<!DOCTYPE html>：文件類型宣告。它像是在檔案開頭大喊一聲：「這是一份現代 HTML 文件！」這是固定寫法，永遠放在第一行。
<html>...</html>：根標籤，包覆了整個文件的所有內容。
<head>...</head>：大腦區。這裡放的是給瀏覽器看的「元資訊」，例如網頁編碼、標題、引用的 CSS 檔案等。這部分的內容不會直接顯示在網頁上。
<meta charset="UTF-8">：告訴瀏覽器請用 UTF-8 編碼來解析這個網頁，這樣中文、日文等各種文字才能正常顯示不亂碼。
<title>...</title>：定義顯示在瀏覽器分頁標籤上的文字。
<body>...</body>：身體區。這是最重要的部分！所有使用者在網頁上看得見、摸得著的內容，比如文字、圖片、按鈕、連結，通通都放在這裡。

3. 動手蓋！打造我們 BLE 工具的介面骨架

好了，理論完畢，開始為我們的專案蓋房子。根據我們的需求，介面至少需要以下幾個部分：

一個醒目的標題。
一個**「掃描藍牙裝置」的按鈕**，這是所有互動的起點。
一塊狀態顯示區，用來告訴使用者「未連線」、「掃描中...」、「已連線至...」等資訊。
一個主要的容器，未來所有掃描到的服務和特徵都會動態地塞進這裡。

現在，請建立一個名為 index.html 的檔案，並把以下內容貼上：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Web BLE 通用偵錯工具</title>
  </head>
  <body>

    <h1>Web BLE 通用偵錯工具</h1>

    <button id="scanButton">掃描藍牙裝置</button>

    <p><strong>狀態:</strong> <span id="statusText">未連線</span></p>

    <hr> <h2>GATT 服務與特徵</h2>
    <div id="gattContainer">
      </div>

  </body>
</html>

**`<body>` 區塊詳解

<h1>...</h1>：Heading 1，最重要的標題。<h2> 是次級標題。
<button>...</button>：這會產生一個可以點擊的按鈕。
- id="scanButton"：這是今天最關鍵的知識點！我們為這個按鈕設定了一個唯一的 ID，就像是給它取了一個獨一無二的名字。未來，我們的 JavaScript 程式碼就可以透過 document.getElementById("scanButton") 來精準地找到「這個」按鈕，並為它新增點擊功能。
<p>...</p>：Paragraph，代表一個段落。
<strong>...</strong>：表示語氣上的強調，通常瀏覽器會用粗體來顯示。
<span id="statusText">...</span>：<span> 是一個「行內」標籤，很適合用來包裹一小段文字。我們同樣給它一個 id="statusText"，方便 JS 未來更新這裡的文字內容。
<hr>：Horizontal Rule，一個自閉合標籤，用來產生一條水平分隔線。
<div id="gattContainer">...</div>：<div> 是最常用的區塊標籤，它本身沒有任何樣式，就像一個萬用的透明容器。我們給它 id="gattContainer"，標記出「這裡就是未來要放所有 GATT 資訊的地方」。

4. 連接大腦：引入我們的 JavaScript

骨架蓋好了，但它現在還是一個沒有靈魂的空殼。我們需要把之前寫的「大腦」(app.js) 連接上來。

請在你的 index.html 中，找到 </body> 這一行，在它的正上方加入 <script> 標籤：

    ...
    <div id="gattContainer">
      </div>

    <script src="app.js"></script>
  </body>
</html>

<script src="app.js"></script>：這個標籤告訴瀏覽器：「請去下載並執行 app.js 這份 JavaScript 檔案」。
為什麼要放在 </body> 前面？
- 因為瀏覽器是由上到下解析 HTML 的。我們把 <script> 放在最下面，可以確保在 JS 程式碼開始執行之前，頁面上所有的 HTML 元素（如 scanButton）都已經被建立完畢了。這樣 JS 才能順利地找到它們。如果放在 <head> 裡，JS 會先執行，那時它想找按鈕，會發現按鈕根本還沒被畫出來，就會報錯！