{%hackmd @dzif24x25/IBXIWNXgTju0h2AKtSaLkA %}

###### tags: `HTML` `<div>` `<span>`

# HTML `<div>` &amp; `<span>` 容器

## `<div>` 區塊元素容器

`<div>`沒有特別的意義，只作為容器(區塊元素)使用，用來包住其他HTML標籤，方便與 CSS 或 JavaScript 作互動

### 語法：

<div>區塊內容</div>	

### 範例：

<iframe height="400" style="width: 100%;" scrolling="no" title="Untitled" src="https://codepen.io/alpha34727/embed/MWPmLwq?default-tab=html%2Cresult&editable=true" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
See the Pen <a href="https://codepen.io/alpha34727/pen/MWPmLwq">
Untitled</a> by Alpha (<a href="https://codepen.io/alpha34727">@alpha34727</a>)
on <a href="https://codepen.io">CodePen</a>.
</iframe>

## `<span>` 行內容器

`<span>` 和 `<div>` 類似，不具有特別的意義，通常用於文字或其他行內(inline)的標籤，方便與 CSS 或 JavaScript 作互動

### 語法：

<span>文字</span>	

### 範例：

<iframe height="400" style="width: 100%;" scrolling="no" title="span" src="https://codepen.io/alpha34727/embed/ZEqKwQm?default-tab=html%2Cresult&editable=true" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
See the Pen <a href="https://codepen.io/alpha34727/pen/ZEqKwQm">
span</a> by Alpha (<a href="https://codepen.io/alpha34727">@alpha34727</a>)
on <a href="https://codepen.io">CodePen</a>.
</iframe>

:::info
點此前往簡報 https://hackmd.io/@dzif24x25/rJmSBMyXh
:::