---
# System prepended metadata

title: Day 23 阿嬤帶你探索 HTML！（下）

---

#  Day 23 阿嬤帶你探索 HTML！（下）

這一章依然是講我們可愛的 HTML

## HTML 層級

上一章我忘了講到 HTML 層級，那這一小節我們就來講他吧！
HTML 有著明顯的層級，或你要叫他順序也可以，這就叫 「HTML 層級」又因這個圖的結構酷似於
我們平常看到在路邊的樹一樣，所以又稱他為「HTML 樹」等等你是不是很熟悉這個感覺？沒錯！
就是我們 19 章講到的「DOM 樹」（有興趣請去參觀 19 章）他跟「HTML 樹」有著密不可分關係（
也可以說是親兄弟也可以）因為他倆的結構真的很像！！我放圖給大家看：

![](https://i.imgur.com/VhOHWoj.gif)

`圖片來源：https://www.uj5u.com/qita/135926.html`

這邊就不放「DOM 樹」的結構圖了，因為會講不完：）有興趣去自己去看第 19 章，你就可以看他
倆的差別。


## 段落元素

講了這麼多終於要進入我們的主題了，段落元素。
段落元素（p元素）是來建立獨自段落的一種元素，在`<p>`中間加上任何文字，就可以成立一個
獨自段落標題，段落和主標題核下一個段落是分開的，不用擔心會黏在一起。
就像寫作文，你總部可能一直寫下去不分段吧？在段落與段落之間，我們習慣換行，就是在段落前
加兩個空格，以好於辨識。那讓我們來創作段落吧！！巴拉拉小魔仙，變身！！

```
<!DOCTYPE html>
<html>
<head>
  <title>示例</title>
</head>
<body>
  <h1>講解專用</h1>
  <p>段落</p>
</body>
</html>
```

只要在`<h1>講解專用</h1>`底下在寫一句`<p>段落</p>`，就可以像下圖一樣
擁有屬於自己的段落：

![](https://i.imgur.com/5OF9VIJ.png)

若把這些`<h1`、`<p>`這些元素都去掉的話，那就變得黯然無味，就像吃臭豆腐沒了醬一樣，吃義大利
麵沒有蕃茄醬、青醬等，太多太多了，那我就來展示一下沒了這些標籤的樣子：

![](https://i.imgur.com/UqWASrW.png)

是不是很丑？所以我們絕對不要以為省略這些會像以前的字體好看

## 讓字體美美躂！

我們有時也會覺得內建字體很丑，那要怎麼美化它呢？奧特曼變身！！

```
<em>1. In the dull and boring world, there is also occasional luck.</em>
```

程式碼`<em>`可以把文字變成斜體，還可以免費幫你加一個唯美字體，多棒。
輸出就像這樣：

![](https://i.imgur.com/pHsZ5jH.png)

就像這樣！！超級有 ins 風的啦！我愛了

還有一種，就是`<strong>`，大家應該也可以猜到字面意思，沒錯，就是讓字變粗的程式碼！
馬上來玩看看吧！！

```
<p><strong>就是這樣啦，若有錯請告訴作者，我會重新翻譯，希望你喜歡～</strong></p>
```

我是拿他來當結尾啦，看你們，效果就會像這樣：

![](https://i.imgur.com/9H6adWH.png)

最後那一句，真的超級文青的啦！～

## 小總結

今天我們完了 HTML 文字的進階版，也學習到了這個很 ins 風的字體
下一章我們要來和大家談談 CSS（不要問我為什麼：））相信大家也很期待（應該啦哈）那就下一章見嘍！



























