今天來點比較輕鬆的文章吧

學任何技能前，了解基礎知識也是必要的

其實也能幫助後續學習的速度呢

前端網頁三大語言

寫前端的最必要的三大語言：HTML、CSS、JS

HTML

內容是寫在 HTML 裡面
包含：
1.文字(標題，小內文、次標題、超連結具有功能性的文字等等)
2.圖片、照片
3.多媒體(影片、音樂)
HTML 只呈現內容但無設計感可言，是無法閱讀的

CSS

網頁的樣式都是 CSS 來做
可設定排版、字體、顏色
可調整元素
可設定視覺相關的元素
可做動畫
可支援手機版本

JavaScript

不等於 Java
唯一一個可以在網頁上的「程式語言」
網頁背後的流程
也有人稱網頁背後的腳本
帳號密碼、送出表單、加入購物車

網站分類

靜態資料網站 (Static Website)

1.HTML、CSS、JS 組成
2.需要展示的可用靜態
3.可寫動畫，比動態網站的動畫更好看

動態資料網站 (Dynamic website)

1.HTML、CSS、JS、資料庫組成
2.使用者可以透過網站來存取資料庫的內容
3.可以看到使用者產生的資料，如 FB

基本上，會寫到 HTML、CSS、JS 的都是前端工程師 (frontend)

寫資料庫的是後端工程師(backend)，後端工程師會使用的語言是：
1.用的語言無限制，如：PHP、c#、node.js，挑一個就好
2.現在比較流行Node.js、Python

如何用 VS CODE 寫網頁

首頁名稱要取英文，如 index.html

網址名稱都是租用的，不是買斷

快鍵：!+tab 產生 HTML 一定要的基本架構

檔案旁的白點點就是提醒要存檔

存檔快鍵：CTRL + S CMD + S (MAC)

隨意一個位子，按右鍵選 Open with live server，會開啟預設網頁，可即時顯示結果

很多的深藍色的文字是標籤( body 標籤、 title 標籤等等)

寫標籤方法。如 h1 + tab 會出現 <h1></h1>

h1 = hedline 1

標題字只有 h1~h6 沒有 h7以上，所以不存在的標籤不要用

註解：只給我們自已看的，語法為 Ctrl + /、Cmd + / (mac)

文字段落語法：<p></p>，p = Pargraph

斷行語法： <br>,只有一個沒有一對

要記得縮排，因為易讀性較佳

縮排設定：設定(win)、code(mac)喜好設定->設定-搜尋設定->輸入「format on save」->下Format on save打勾

css 注意事項

1.跟設定無關的一定要註解
2.css寫法：標籤+{}，俗稱 CSS 選擇器，例：
h1 {color: red;}
3.要引用檔案才能用css，語法：link + tab 就會顯示：

link 是屬性 等於(=)後面是值， style 是我們取的css檔名

4.學 CSS 是認識屬性
5.文字對齊語法範例： text-align: right;(靠右)
6.通常有名字的顏色都不好看，如bule、red