• 可以搭配 CSScoke 金魚都能懂網頁教學part1、part2、part3 作為學習

在開始學習CSS前，我們要先知道HTML、CSS、Javacript在網頁上的作用。
簡單比喻，HTML就是把網頁上的各個內容做標記，CSS就是負責上色，JavaScript就是負責做動態效果。

總結：
HTML為標記語言，用HTML標記語言來把文章內容分類，如何賦予這段文字代表的意義就是標記。
CSS是風格頁面語言，負責幫我們的網頁HTML元素做樣式處理。
可參考MDN解釋，做更近一步了解
https://developer.mozilla.org/zh-TW/docs/Learn/Getting_started_with_the_web/CSS_basics

專有名詞

標題：六個等級的標題 (h1,h2,h3,h4,h5,h6)
內文：段落內容(p)
清單：清單的項目(li)
包裹清單-->

• 無序清單：ul (unordered list)
• 有序清單：ol (ordered list)

區塊：div，就是個區塊
span 沒有含義，做特別化
報表：table
連結 (a)
圖片：img
強制換行 (br)

HTML5後有新增的常用標籤

article 文章
section 段落
nav 導覽
header 標頭
footer 頁尾
aside 側邊欄
mark 黃色 mark

特別用法：

• img 可用 figure 包裹
• nav 可用來包裹 ul清單
• bold 粗體 ，用 strong 標籤比較好
• i 斜體，用 em 標籤比較好
  練習時，可用codepen作為輔助 https://codepen.io/mikeyam/pen/ZEWjRGz

HTML和CSS裡 總是讓新手混亂的小重點

名稱|意思|使用時注意地方|比喻
------------- | -------------
inline 行內|大家排列一起|只有長度，沒有高度|可以比喻成 水
block 區塊|像一個人一佔了整個車廂|有寬和高|冰塊
inline block 行內區塊| |有寬和高，可排列一起|冰沙