網頁是什麼？
學網頁設計的時候，常常會聽到三個名字：HTML、CSS、JavaScript。
它們是構成網頁的三大元素：
-
HTML 網頁的結構。
-
CSS 網頁外觀。
-
JavaScript 網頁的互動與功能。
HTML：網頁的結構
(HyperText Markup Language，超文本標記語言)
它並不是程式語言，而是一種標記語言，負責描述網頁的架構。
-
超文本（HyperText）：透過超連結從一個頁面跳到另一個頁面。
-
標記（Markup）：使用標籤（tag）來定義文字、圖片、連結等內容。
檢查HTML程式碼是否正確：W3C HTML Validator
CSS：網頁的外觀
(Cascading Style Sheets，階層式樣式表)
用來設定網頁的樣式與排版，讓原本只有「骨架的HTML」，變得更美觀、好閱讀。
JavaScript：讓網頁動起來
(功能性的程式語言)
負責為網頁加上互動與動態效果。
- 處理使用者的操作(點擊、輸入、滑動)，控制網頁內容的變化，讓靜態頁面活起來。
- 新增或刪除元素。
- 修改文字或樣式。
- 處理使用者輸入(例如表單驗證)。
- 製作互動效果(例如按鈕點擊、動畫)。
DOM：JavaScript 與網頁溝通的橋樑
(Document Object Model，文件物件模型)
DOM 是HTML的程式介面。
- 它提供了一個文件（樹）的結構化表示法。
定義讓程式可以存取並改變文件架構、風格和內容的方法。
重點概念：
- 每個標籤都是一個節點（node）：例如
<p>、<h1>、<img>。
- 節點之間有層級關係：
<html> 是根節點，
往下分支出 <head> 與 <body>，再延伸更多子節點。
- JavaScript 必須透過 DOM，才能找到並操作 HTML與 CSS元素。
為什麼 DOM 重要？
沒有 DOM：
- HTML → 永遠是靜態內容。
- CSS → 只能改外觀。
- JavaScript → 找不到操作的對象。
有 DOM：
- JavaScript 所有的互動操作(新增文字,修改顏色,刪除圖片)。
- 網頁才真正「動」得起來。
DOM Tree
網頁在瀏覽器中加載後的樹狀結構：
參考資源
iThome鐵人賽
看影片追技術