網頁容器概念
網頁上的內容可以被分為排版用的容器(ex: <div> )與元素(ex: <h1>、<p>、<img>……)。
就像咖啡需要杯子作為容器來盛裝、廚房內的碗盤需要使用櫥櫃來整理收納，網頁上的元素內容也需要運用容器來放置分類。

容器標籤 ＜div></div>
不具有任何語意，專門用來排版
透過div標籤可以在網頁中產生各個不同的區塊

如下圖所示，使用div標籤將html元素包起來形成一個區塊，也可以在div內設定css樣式

如果不了解HTML元素有預設的CSS display屬性，可能會覺得很奇怪
為什麼h1標籤和p標籤寫的內容沒有多到會掉到下一行，卻自動換行了?
a標籤怎麼沒有和h1標籤、p標籤一樣換行，反而是並排在同一行呢?

相關資料:display

不同的HTML元素就和不同的人一樣會有不同的個性，有喜歡獨處的，或是喜歡熱鬧的
所有的HTML元素可以被區分為兩類:

1. 區塊元素 (喜歡擁有自己的空間) 2. 行內元素 (喜歡和別人一起住)

區塊元素( display:block;)
特性:

1. 寬度會依照上一層的資料(父元素)自適應占滿整個版面
2. 會另起一行來呈現
3. 寬度高度可以自訂
   常見區塊元素:div、p、h1~h6、ul、ol、li......
   相關資料: Block-level elements

行內元素( display:inline;)
特性:

1. 行内元素会排列在同一行(常用在段落內)
2. 無法自訂寬度高度
3. 設置上下margin、padding無效
   常見行內元素: a、img、span、input、br、...
   相關資料: Inline elements

以上為個人學習筆記整理
若有錯誤，歡迎指正