tldr: Hyper Text Markup Language (HTML) 記錄網頁框架的樣子，並使用標籤(tags)來告訴網頁各內容該如何顯示
Cascading Style Sheet (CSS)則用於設定內容的各種外型樣式
眾人應該都對HTML這個名詞不陌生吧，不過它究竟是甚麼，與我們平時所見到的網頁又有著甚麼關聯性，今天就來簡單分享給各位。
Hyper Text Markup Language，又名HTML，是我們平時所見到網頁的基礎。不論是Google, Facebook, Youtube，只要是我們所看到的網頁，都有著HTML來告訴瀏覽器它的架構是長甚麼樣子。
值得一提的是，可能有不少初次接觸這類知識的人看到Language(語言)，就認為HTML也是一種程式語言(Programming Language)，事實並非如此，它其實是標記語言(Markup Language)。程式語言有著各種判斷式與迴圈，可根據不同的情況作出計算並給出相對應的結果，而HTML僅作為一個標記語言，告訴瀏覽器該如何顯示檔案內容，無法做判斷和計算的工作。那麼接下來你可能會問，它是如何與瀏覽器溝通的？答案是；依靠標籤(Tag)。
接下來筆者將以The World Wide Web Project作為範例給各位作說明，因為網站十分的陽春，筆者覺得對初學者來說是個很容易閱讀的範例。在此也推薦大家可以進到網頁後點選鍵盤上的F12鍵，實際看看標籤與其網頁中對應的顯示內容，滑鼠滑過各個標籤時瀏覽器也會自動標記出相對應的元素。
上圖為網頁所顯示的畫面，以及透過瀏覽器內建的開發者工具(Developer Tools, F12開啟)所看到的網頁HTML。
從圖中可以看到HTML檔案中有著許多由角括弧所包裹的元素，如<head>, <p>, <a>，這些都是HTML的標籤，角括弧內的文字代表著此部分內容的類別，像是標題、主體、文章段落等等。標籤大多成對出現且長相相似，唯一差別則是後出現的end tag有著一個反斜線「/」。從start tag到end tag，這之間的內容則全被此標籤給「標記」起來了。
下方為標籤與內容的格式範例。
<title>This is a title!</title>
可以看到這個標籤為"title"，而其內容文字為"This is a title"。
接下來來進階一點，看看一個精簡的HTML吧!
<html>
<head>
<title>This is the webpage's title</title>
</head>
<body>
<h1>I'm a Heading!</h1>
<p>just some paragraph</p>
</body>
</html>
| 標籤 | 用途 |
|---|---|
| html | 表示在此之內的內容皆為網頁的html |
| head | 此部含有著網頁的詮釋資料 meta data |
| body | 網頁的內容主體 |
| title | 網頁的標題名稱 |
| h1 | 標題/抬頭，1代表最重要且最明顯最高，其次是2，最小是6 |
| p | 一般的文字段落 |
我們可以將此html看成3個大區塊，最底層的<html>包裹著另外2個，它也是網頁的最根本元素(root element)，接下來有著<head>和<body>，前者不會於網頁中直接顯示，後者則是瀏覽時所看到的一切內容。我們希望使用者看到的東西，就加入<body>之中，與之相對的，用於瀏覽器的資訊處理相關，如編碼、語言等等的，就記錄在<head>部分內。
詳細的html標籤一覽，各位可以參考w3school所整理的資料：HTML Reference
此時的讀者應該會好奇，那麼我們平時所看到的網頁顏色、排版等等的，又該如何去設定呢？此時就要來談談總是與HTML相對應出現的東西：CSS。
Cascading Style Sheet，簡稱CSS，是用於表示網頁顯示的外表樣子，包括顏色、字體、背景顏色等等，與美術設計相關的，大多由它來設定。
CSS有著三大不同的表示法，每一種的效果都相同，但顯示的優先順序有所差異，其為：
| 表示法 | 說明 | 優先級 |
|---|---|---|
| inline | 於html各元件的標籤中設定 | 高 |
| internal | 於html的head之中加入style元件設定 | 中 |
| external | 另外有著一個.css檔案 |
低 |
他們三者可以同時存在，但當都對同一類型的標籤指定外型樣式時，網頁將會採用優先級較高的那個。
以下為它們各自的使用範例：
inline
<html>
<body>
<h1 style="color:orange">I'm an orange Heading!</h1>
<p style="color:green">I'm a green paragraph!</p>
</body>
</html>
internal
<html>
<head>
<title>This is the webpage's title</title>
<style>
h1 {color: orange;}
p {color: green;}
</style>
</head>
<body>
<h1>I'm an orange Heading!</h1>
<p>I'm a green paragraph!</p>
</body>
</html>
external
.html
<html>
<head>
<title>This is the webpage's title</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>I'm a Heading!</h1>
<p>just some paragraph</p>
</body>
</html>
styles.css 檔案
h1 {
color: orange;
}
p {
color: green;
}
更多詳細的css設定，可參考w3school所整理的資料：CSS Reference
謝謝閱讀到這裡的你，如果有任何建議或者是想說的話，都歡迎留言分享！
參考資料
iThome鐵人賽
看影片追技術