# 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（不要問我為什麼：））相信大家也很期待（應該啦哈）那就下一章見嘍！