一、學習目標
在專案的第二天，目標是熟悉 HTML 的基本元素，學會使用標題（Heading）、段落（Paragraph）、圖片（Image）以及按鈕（Button）。這些元素是網頁的骨架，能幫助我們建立最基本的內容與互動，為日後的 AR 網頁開發奠定基礎。
二、實際操作步驟
1. 建立檔案
yuuuun
ar-web-project 中建立一個新檔案 day2.html。2. 撰寫 HTML 結構
在 day2.html 中輸入以下程式碼：
<!DOCTYPE html>
<html lang="zh-Hant">
<head>
<meta charset="UTF-8">
<title>Day 2 - 我的網頁練習</title>
</head>
<body>
<!-- 標題 -->
<h1>🌟 我的第二天網頁 🌟</h1>
<h2>副標題：今天學習 HTML 結構</h2>
<!-- 段落 -->
<p>這是我學習 HTML 的第二天，今天我學會了如何使用標題、段落、圖片和按鈕。</p>
<p>HTML 是建立網頁的基礎，就像骨架一樣，幫助我們安排內容。</p>
<!-- 圖片 -->
<h3>這是一張範例圖片：</h3>
<img src="https://picsum.photos/300" alt="隨機圖片">
<!-- 按鈕 -->
<h3>這是一個按鈕：</h3>
<button onclick="alert('你點擊了按鈕！')">點我一下</button>
</body>
</html>
<h1> ~ <h6> → 標題，數字越小字體越大。
<p> → 段落，用來顯示一般文字。
<img> → 圖片，需要 src（來源）和 alt（替代文字）。
<button> → 按鈕，可以搭配 JavaScript 動作。這裡我加了 onclick，點擊會跳出提示框。
3. 預覽網頁
在 VS Code 裡，右鍵 day2.html → Open with Live Server。
瀏覽器打開後，應該會顯示：
三、成果展示
完成的網頁成果如下：
🌟 我的第二天網頁 🌟
副標題：今天學習 HTML 結構
這是我學習 HTML 的第二天，今天我學會了如何使用標題、段落、圖片和按鈕。
HTML 是建立網頁的基礎，就像骨架一樣，幫助我們安排內容。
[隨機圖片顯示於此]
[點我一下 按鈕]
點擊按鈕時，瀏覽器會跳出提示框：
你點擊了按鈕！
今天的學習讓我理解了 HTML 的基本組成方式：
透過這些練習，我已經能製作一個「有文字、有圖片、有互動」的小型網頁。
iThome鐵人賽
看影片追技術
看更多