網頁三巨頭

HTML、CSS和JavaScript是網頁開發中不可或缺的三個元素。讓我們以車子的形象來比喻它們的關係。

HTML就像是車子的外型，它負責結構和內容的呈現。就像車子的外觀一樣，HTML定義了網頁的結構，例如標題、段落、列表和圖像等元素。它是構建網頁的基礎，描述了網頁的整體架構。

CSS則是車子的架構，它負責外觀的設計和風格。就像車子的架構一樣，CSS定義了網頁的外觀和排版，包括顏色、字型、邊框、間距和版面配置等。它可以讓網頁變得更美觀、吸引人並提供更好的使用者體驗。

而JavaScript則像是車子的引擎，它提供了動態和互動的功能。就像引擎驅動著車子一樣，JavaScript可以使網頁實現各種互動特性，例如表單驗證、動態內容、動畫效果和使用者與網頁的交互等。

我們可以直接現在VSCODE上看他們怎麼運作的 先打開VSCODE

建立一個index.html文件

按下驚嘆後點選enter，會自動建立一個基本的html結構

這段代碼是一個基本的HTML模板，讓我們逐行解釋每個元素的作用：

!DOCTYPE html：這是HTML5的文檔類型聲明，告訴瀏覽器正在使用的HTML版本是HTML5。

html lang="en"：這是HTML文檔的根元素，表示整個文檔的開始和結束。lang="en"屬性用於指定文檔的語言，這裡是英語。

head：這是HTML文檔的頭部，用於包含與文檔相關的元數據和資源。在這個區塊中，你可以添加設置和頁面的相關訊息。

meta charset="UTF-8"：這是一個元數據（metadata）元素，它指定文檔使用的字符編碼。UTF-8是一種常用的字符編碼，支援多種語言的文字。

meta name="viewport" content="width=device-width, initial-scale=1.0"：這是另一個元數據元素，用於設置視口（viewport）的屬性。視口指的是瀏覽器用來顯示網頁的區域。width=device-width設置視口的寬度為設備的實際寬度，initial-scale=1.0設置初始縮放比例為1.0。

title：這是頁面的標題元素，用於指定在瀏覽器標籤欄顯示的標題文本。

body：這是HTML文檔的主體部分，包含了網頁的實際內容，如文本、圖像、連結等。你可以在這裡添加你的網頁內容。

通常html結構會被編寫在body裡面，而css會以style包裹，這個範例我們同樣寫在html結構裡(通常會包在另外一個css檔案裏面)

接著點選右下角的go live(如果沒有的話，是沒有安裝live server的套件，請參考文章)，這樣應該就會有畫面了

學習資源推薦

HTML:

w3schools: https://www.w3schools.com/html/

CSS :

MDN web docs: https://developer.mozilla.org/en-US/docs/Web/CSS

JS： 唯一推薦JS30!

https://javascript30.com/