> 如果有記憶吐司就好了...
# HTML學習筆記
## block(塊級元素)
預設標籤： `<div>、<p>、<h1>、<table>、<ul>、<li>、<hr>`
特性：
* 獨佔一行
* 可設置 寬(width) 高(height) 及內外邊距(margin、padding)

## inline(行內元素)

預設標籤： `<a>、<span>、<b>、<label>、<strong>`
特性：
* 不會獨佔一行，多個相鄰的行內元素會排列在同一行裡
* 無法設置寬(width) 高(height)
* margin的top、bottom無效
* 注意：inline 屬性的 tag 不該包在 block 屬性的 tag 外

## inline-block (行內塊元素)
特性：
* 以 inline 的方式排列，具有 block 的屬性
* 不會獨佔一行
* 多個相鄰的行內元素會排列在同一行裡
* 可設置寬(width) 高(height)及內外邊距(margin、padding)

## 圖片下方多一行的改善方法
當有一個`img`,加上紅色的`background`之後你會發現多出下面一行,因為本身含有`inline`的特性,所以會保留下面一點空間,如下圖:

(藍色的的部分是圖片,紅色是背景)
若要將底下多出來的紅色去除掉可以使用以下方式:

1.會有此行主要是因為`inline`的特性,所以方式一就是將包圖片的標籤如:`div`下`display:block`。

2.方式二的部分適用`vertical`去改,因為圖片主要是對齊baseline,所以只要將他改為不是baseline就可以了,如:`vertical-align:top` 或 `vertical-align:middle` 或 `vertical-align:bottom`。

完成圖如下:
## section包article還是article包section呢?
依照使用時機來使用適合語意的標籤,ex:一篇新聞的文章,基本上適合用article包section,因為通常是文章內有許多章節。
若是用在新聞標題清單就適合用section包article,因為基本上新聞列表可能會有很多不同主題或是彼此無關聯的文章,每個主題都內含一篇文章

## 圖片+文字的圖卡
通常使用figure包figcaption,範例如下:

<figure>
    <img src="/media/cc0-images/elephant-660-480.jpg"
         alt="Elephant at sunset">
    <figcaption>An elephant at sunset</figcaption>
</figure>

圖片呈現:

## 可以使用a包div嗎?
在html5的a包div是被允許的,通常會這麼做是為了讓整個div區塊都有超連結的特性,但通常若只是單純要讓區塊有超連結特性,建議還是使用div包a,然後再用css去改樣式達到你要的效果。