※ 網頁介面的基本認識：
定義：透過原子（atoms）、分子（molecules）組成的方式去認識網頁介面。
※原子（atoms）介紹：
定義：atoms是最基本的單位，比如按鈕、輸入欄、標籤這類不可再拆的元素。
舉例：搜尋欄位的組成- 標籤（Label）：這是最基本的文字元素。告訴使用者這個欄位是用來輸入什麼，例如「電子郵件」、「密碼」、「關鍵字搜尋」等。
- 輸入框（Input ）：它是一個單一功能的基礎元件。讓使用者可以將資料輸入到系統中，比如登入、搜尋、填寫表單、上傳檔案等等。
- 搜尋的按鈕（Search Button）：負責觸發使用者動作的互動元件。
※分子（Molecule）介紹：
定義：是由兩個或以上的 atoms（原子）組成的 模組化 UI 元件，具備明確功能。就像是一顆設計好的樂高積木（例如搜尋欄位），可以隨時重複使用、擺放在不同的頁面中。
※Organisms（有機體）介紹：
定義：是由一個或多個 Molecules（分子）和/或 Atoms（原子）組合而成的較大型 UI 區塊，具備更複雜的功能與視覺呈現，通常可獨立構成頁面中的某個主要部分，例如導覽列或商品列表。
※Templates（模板）介紹：
定義：用先前組好的 Organisms（有機體）、Molecules（分子）和 Atoms（原子）建立內容架構，尚未填入實際內容。 就像是已經完成水電與格局分佈的空屋裝潢圖，是設計系統中用來呈現內容與結構如何共存的範本，幫助團隊確保 UI 元件在實際頁面中的應用一致性。
※Pages（頁面）介紹：
定義：透過 UI 元件設計，在模擬實際使用情境下呈現真實內容的樣貌，用來驗證整體設計系統在真實資料下的運作與一致性。
※ 認識HTML超文本標記語言：
定義：扮演著網頁骨架的重要腳色。
※ 認識DOM（文件物件模型）：
定義：一種將 HTML 或 XML 文件結構以樹狀方式表示在記憶體中的標準模型，它讓開發者可以透過JavaScript這個程式語言來讀取、修改、刪除或新增網頁內容與結構。簡單來說，DOM 是瀏覽器提供給 JavaScript 操作網頁的橋樑，讓靜態的 HTML 文件變得可以互動、動態更新。
※標籤寫法：
※標籤寫法例外：img本身就不包含任何內容，所以不需要開頭和結尾兩個標籤配對。
※完整的 HTML 元素組成：
說明：
- 標籤（Tag）：像是 <img>、<div>等，用來定義元素的類型與語意。
- 內容（Content）：標籤內包住的東西，可能是文字、圖片、其他元素，或什麼都沒有。
- 元素（Element）：當標籤和內容組合在一起時，就構成了一個完整的 HTML 元素。它是 DOM 的基本構件，也就是網頁結構的最小單位。
建立樹狀模型：
內容說明：
- <a href="">內容文字</a>：-這是一個超連結元素，href 屬性目前是空的，也就是說點擊這個連結不會導向任何頁面；「內容文字」則是顯示在頁面上的連結文字。
- <img src="" alt="">：一張圖片元素，src 放的是指定圖片來源；alt 則是代表替代文字。
