打開教授給的教學示範簡報，看到畫面上滿滿的 <> 符號，第一眼看上去就覺得應該是蠻重要的東西，也有點像遊戲裡會出現的解謎字串。而在實際了解幾個常用標籤後，稍微筆記了一下自己的理解過程!

1.原來< h1 >到< h6 >是「它的位階」

在做視覺設計時，我們習慣用字級大小（例如 36pt、24pt、12pt）來區分主標題跟副標題。但在 HTML 裡，我們是用< h1 >到< h6 >來告訴瀏覽器這段文字的「重要性」。

< h1 >這是全站最重要的主標題< h1 >
< h2 >這是次要的副標題< /h2 >

我馬上就陷入一個誤區：「因為我想讓字變大，所以用 < h1 >。」因為呈現在 HTML 檔中的字真的出現了大小差別。
但多虧了AI解惑，今天學到最重要的一點：標籤決定的是「意義」，大小應該交給 CSS 處理。 這就好像我們在做設計時，不能隨便把內文改編成標題的定位一樣，結構的邏輯不能亂。

2.使用 < p >：讓文字有自己的「文字框」

在排版軟體裡，如果隨便點一下滑鼠就開始打字，文字會像沒有邊界一樣一直延伸出去，必須手動分段蠻麻煩的，這種時候就需要使用段落文字框。
而 HTML 裡的 < p >（Paragraph）就像是在畫面上拉出一個個獨立的「段落文字框」：

< p >這是一整段長長的內文說明...< /p >

只要把文字包在 < p > 裡面，瀏覽器就會自動幫它處理好上下段落的間距，理解起來非常直觀！

3.< im g> 與 alt：電腦化文字為圖片，程式小白驚呼好神奇!

第一次嘗試 < img > 標籤時還真的讓我心中悄悄驚嘆了一下。我最常使用的 photoshop 裡只要把圖片拖進去就能直接顯示在畫面上；但 HTML 裡的圖片竟然只是一行程式碼，而把那行程式碼打上去後，圖片居然真的出現在網站預覽當中!而且還有一個叫 alt 的屬性：

< img src="gaint.jpg" alt="一位站在山頂上的巨人">
關於這個 alt（替代文字），我的理解比較像是在幫「電腦先生」準備一份圖片的文字備註：如果圖片顯示時出了什麼意外，至少還能透過這段文字知道這裡原本放的是什麼。

Day 3 小結
今天梳理了各式標籤 < h1 >、< p > 和 < img > 各自扮演的角色，目前用以前做設計、做美術的觀念換個角度去思考的方式還算管用!希望能繼續保持下去。