前言
每個學習網頁開發的人一定會聽過 HTML、CSS、Javascript ，但這些到底是什麼? 在我學習前端技術的前期，經常搞不懂這三者的關聯，陷入一個「我知道這三個名詞，但不知道用來做啥」的窘境。因此今天用簡單的方式分享這三個常見的名詞，如果有興趣歡迎往下閱讀~
🧱HTML：建立網頁的骨架與內容架構
HTML (HyperText Markup Language，超文本標記語言) 是建構網頁的標記語言， 用於定義網頁上的內容與元素，例如文字、連結、圖片、表單等，瀏覽器會根據 HTML 的結構呈現網頁。
☑️HTML 語法結構
HTML 使用標籤(tag) 包覆內容：
<標籤>內容文字</標籤>
☑️範例
<!DOCTYPE html>
<html>
<head>
<title> HTML範例 </title>
</head>
<body>
<h1>標題：一個有作用的按鈕範例</h1>
<p>在這個例子中，我們可以做出一個「點擊後會跳出歡迎文字的按鈕」</p>
<button>我是一個按鈕，請點我！</button>
</body>
</html>
<!DOCTYPE html>：文件類型宣告，告訴瀏覽器這個頁面使用 HTML5 標準。<html></html>：整個 HTML 的根元素，所有網頁內容都需要包在這對標籤內。<head></head>：HTML 的基礎標籤之一，用來放置CSS 、Javascript、網頁資訊等，簡單來說就是「設定網頁用」的區塊。<body></body>：HTML 的基礎標籤之一，放置網頁實際呈現出來的內容，例如標題、內文等，簡單來說就是「畫面顯示」的區域。- <h1>、<p>、<button> 都是常見的 HTML 標籤。
🎨CSS：美化網頁外觀與排版
CSS (Cascading style sheet，階層樣式表) 是一種樣式語言，用於定義 HTML 文檔在瀏覽器中呈現的方式，例如字體、間距、位置等。
☑️CSS 語法結構
CSS 語法分成兩個部分：選擇器與宣告區域。
選擇器 {
屬性1: 值1;
屬性2: 值2;
}
- 選擇器：用於選定想要定義的對象(元素)。
- 宣告區域：為選定的元素進行樣式設計的區域，以大括號
{}搭配宣告組成，而宣告又包含了屬性與值。 - 屬性：想要改變的樣式，例如顏色、字體大小。
- 值：給予屬性具體的內容，例如顏色設定為紅色、字體設定為20px。
☑️範例
<!--範例一-->
h1 {
color: #ccc;
}
<!--範例二-->
button {
border: 3px solid #93c498;
background-color: #ffffff;
}
範例一：
h1：選擇器，選擇 HTML 中的h1元素。color: #ccc：屬性與值，宣告(被選中的元素，此例為h1) color 屬性為 #ccc(灰色)這個顏色。
➡️ 將 HTML 中的 h1 元素的顏色設定為 #ccc。
範例二：
button：選擇器，選中 HTML 中的 button 元素。border: 3px solid #93c498：屬性與值，宣告 button 的 border (邊界)屬性為 3px(粗細) solid (實線) #93c498(鼠尾草綠)。background-color：屬性與值，宣告 button 的 background-color 屬性為 #fff(白色)這個顏色。
➡️ 將 HTML 中的 button 元素的邊界設定為粗細為3px、顏色為#93c498的實線，以及背景顏色設定為 #fff。
☑️引入方式
CSS有三種套用方式：行內樣式、內部樣式、外部樣式(建議使用)。
- 行內樣式：將CSS寫在 HTML 元素行內
<!--html檔-->
<h1 style = "color:#ccc;">大標題</h1>
- 內部樣式：將CSS的宣告寫在<style>標籤中，並放在 HTML的 <head>區域內
<!--html檔-->
<head>
<style>
h1{
color: #ccc;
}
button {
border: 3px solid #93c498;
background-color: #ffffff;
}
</style>
</head>
- 外部樣式：將CSS的宣告另外存在
.css檔案中，並透過<link>引入HTML檔 (建議使用🌟)
/*style.css*/
h1{
color: #ccc;
}
button {
border: 3px solid #93c498;
background-color: #ffffff;
}
<!--.html檔-->
<head>
<link rel = "stylesheet" href="style.css">
</head>
💡這裡的 rel 是 <link> 標籤的屬性，全名是 relationship，用來定義 HTML 與所連結資源之關係，而 href 則是hypertext reference，用來指定連結的目標位置，告訴瀏覽器要去哪裡找這個檔案。
所以 <link> 這行的意思是告訴瀏覽器：讀取style.css，並根據rel = "stylesheet" 的關係，把這個檔案應用到目前的 HTML 網頁上。
⚙️Javascript：賦予網頁互動能力
Javascript 是一種程式語言，用於提供網頁互動或是較複雜的功能，如修改 HTML 結構、控制CSS樣式、處理使用者輸入、與伺服器溝通等。
☑️語法結構
Javascript 的語法和C 語言很類似，也包含了變數、函式、條件判斷、迴圈等。和 HTML 與 CSS相比，Js就複雜得多，以下僅簡單介紹。
// 變數
let 變數1 = 值1;
// 函式
function 函式名稱1(參數){
//程式區塊
}
// 條件判斷
// 迴圈
☑️範例
Js 的語法與功能其實很多，這裡沿用上方的<button>標籤，舉一個簡單的範例~
將 html檔中的<button>我是一個按鈕，請點我！</button> 修改成：
<button onclick ="sayhello()">我是一個按鈕，請點我！</button>
接著新增以下程式碼
function sayhello(){
alert("Hello ~ 歡迎來到 Elaine 粼粼的方格子！");
}
完成後再次點擊按鈕會發現跳出了一個對話框，這就是我們利用 Js 為網頁新增的互動功能！
☑️引入方式
Javascript 和 CSS一樣有行內、內部、外部三種套用方式。
- 行內js：將 Javascript 寫在 HTML 元素行內
<button onclick="alert()"></button>
- 內部js：將 Javascript 寫在<script>標籤中，並放在 HTML的 <body>區域內
<!DOCTYPE html>
<html>
<head>
<title> HTML範例 </title>
</head>
<body>
<h1>標題：一個有作用的按鈕範例</h1>
<p>在這個例子中，我們可以做出一個「點擊後會跳出歡迎文字的按鈕」</p>
<button onclick = "sayhello()">我是一個按鈕，請點我！</button>
<script>
function sayhello(){
alert("Hello ~ 歡迎來到 Elaine 粼粼的方格子！");
}
</script>
</body>
</html>
- 外部js：將 Javascript 寫在
.js檔中，並在 HTML 的<head>中新增 <script src ="script.js"></script> 引入檔案 (建議使用🌟)
<!-- .html檔 -->
<!DOCTYPE html>
<html>
<head>
<title> HTML範例 </title>
<script src ="script.js"></script>
</head>
<body>
<h1>標題：一個有作用的按鈕範例</h1>
<p>在這個例子中，我們可以做出一個「點擊後會跳出歡迎文字的按鈕」</p>
<button onclick = "sayhello()">我是一個按鈕，請點我！</button>
</body>
</html>
// script.js檔
function sayhello() {
alert("哈囉 ~ 歡迎來到Elaine 粼粼的方格子！");
}
完成上面三個步驟的效果可以看這裡：
總結
- HTML 負責建構網頁的架構，告訴我們網頁裡有什麼(標題、文字、圖片等)。
- CSS 負責美化網頁的內容，像是字體的大小、顏色等。
- Javascript 負責網頁的動作，以本篇文章來說就是讓按鈕有了「跳出歡迎訊息」的功能。
以上就是針對 HTML、CSS、Javascript 的簡單介紹，分享給各位！因為本文僅是簡單介紹，無法涵蓋這三者完整的內容，未來預計繼續完善這個主題，打造成一個完整的系列文章~
如果覺得這篇文章對你有幫助，可以點個小愛心給我一點鼓勵，謝謝❤️ 那麼下篇文章見啦，掰掰！
(本文為個人筆記，如有不清楚與錯誤歡迎留言指正討論。)
