在數字世界的構建中，字型不僅僅是文字的外衣，更是情感和風格的傳遞者。作為網頁設計師和前端開發者，掌握HTML中的字型標籤，能夠讓我們創造出更加豐富和吸引人的使用者體驗。
今天，就讓我們一起走進HTML字型標籤的世界，探索它們如何讓網頁變得生動有趣。
一、認識基本字型標籤
語法結構：<標籤 屬性=“值”> 內容 </標籤>
- 標籤通常是成對出現的，分為開始標籤（p）和結束標籤(/p)，結束標籤只是在開始標籤前加一個斜槓“/”。
- 標籤可以有屬性，屬性必須有值(align=“center” )。
- 開始標籤與結束標籤中包含的內容稱之為區域。
- 標籤不區分大小寫，p和P是相同的。
1、標題標籤< h1> - < h6>
標題標籤的預設樣式是自動加粗的，字型一級標題最大，六級標題最小，每個標題標籤獨佔一行。標題標籤是塊元素示例：
<h1>一級</h1>
<h2>二級</h2>
<h3>三級</h3>
<h4>四級</h4>
<h5>五級</h5>
<h6>六級</h6>
2、字型標籤<font>
在HTML中，最常用的字型標籤非<font>莫屬，雖然現代開發中更推薦使用CSS來控制字型樣式，但瞭解它的歷史仍然有其必要性。
<font>標籤允許我們透過color、size和face屬性來改變字型的顏色、大小和型別。
例如，如果我們想要顯示紅色Arial字型的文字，我們可以這樣寫：
<font color="red" size="5" face="Arial">這是紅色Arial字型的文字</font>
這行程式碼的意思是：
<font>開始一個字型樣式的定義。- color=“red” 設定字型顏色為紅色。
- size=“5” 設定字型大小為5。
- face=“Arial” 設定字型型別為Arial。
- 這是紅色Arial字型的文字 是我們要顯示的文字。
</font>結束字型樣式的定義。
注意：雖然標籤在HTML4.01中是有效的，但在HTML5中已經被廢棄，建議使用CSS來進行樣式定義。
3、字號大小：<font size="n">
字號大小在網頁設計中同樣重要，它直接影響著閱讀體驗。HTML允許我們透過<font size="n">來調整字型的大小，其中“n”可以是1到7的數字。
例如：
<!DOCTYPE html>
<html>
<head>
<title>Font Size Example</title>
</head>
<body>
<p><font size="5">This is a paragraph with font size 5.</font></p>
<p><font size="10">This is a paragraph with font size 10.</font></p>
<p><font size="15">This is a paragraph with font size 15.</font></p>
</body>
</html>
執行結果：
4、粗體標籤
<b>：這個標籤用於將文字加粗顯示，相當於英文中的bold。它不會改變字型，只是使文字看起來更粗體。
<p><b>這是加粗的文字</b></p>
<strong>：與<b>標籤類似，<strong>標籤也用於表示加粗的文字。
<p><strong>這是重要的文字</strong></p>
但在HTML5中，<strong>標籤被賦予了語義，用來表示重要的文字內容。
5、斜體字標籤
<i>：這個標籤用於將文字設定為斜體，相當於英文中的italic。
<p><i>這是斜體的文字</i></p>
<em>：與<i>標籤類似，<em>標籤也用於表示斜體文字。
<p><em>這是強調的文字</em></p>
但在HTML5中，<em>標籤被賦予了語義，用來表示強調的文字內容。
6、刪除字標籤
<del>：這個標籤用於表示刪除的文字，常用於表示不再準確或已過時的內容。比如原價與現價。
<p>原價：<del>100元</del></p>
<p>現價：80元</p>
執行之後是這樣子的：
在上述示例中，原價為100元，但已被刪除，因此使用標籤將其包圍起來。這樣，瀏覽器會顯示刪除線來表示該文字已被刪除。
7、文字格式化標籤 < div> < span>
< div>標籤：
< div> 標籤用來佈局，但是一行只能放一個< div> //大盒子，塊元素。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div>這是一個div</div>
<div>這是一個div</div>
<div><p>這是一個div</p>
</div>
<p>
<div>雲端源想</div>
</p>
</body>
</html>
<div>標籤可以看出是一個盒子容器，這裡面可以放別的標籤。<div>標籤是一個塊元素。
如上圖控制檯所示（開啟控制檯的方式：F12）：<div>標籤裡面可以包含<p>標籤，<p>標籤裡面不可以放<div>標籤。
< span>標籤:
< span> 標籤用來佈局，一行上可以多個 < span>//小盒子，行元素。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<span>1234</span>
<span>5678</span>
</body>
</html>
<span>用於對文件中的行內元素進行組合。<span>標籤沒有固定的格式表現。當對它應用樣式時，它才會產生視覺上的變化。如果不對<span>應用樣式，那麼<span>元素中的文字與其他文字不會任何視覺上的差異。<span>標籤提供了一種將文字的一部分或者文件的一部分獨立出來的方式。<span>標籤不同於<p>標籤是一個行內元素（不獨佔一行）。
8、其它字型標籤
<mark>：這個標籤用於突出顯示文字，通常用於表示高亮的部分。
<small>：這個標籤用於表示小號文字，通常用於表示版權宣告或法律條款等次要資訊。
<ins>：這個標籤用於表示插入的文字，常用於表示新增的內容。
<sub> 和 <sup>：這兩個標籤分別用於表示下標和上標文字，常用於數學公式或化學方程式中。
二、總結與建議
儘管上述標籤可以直接在HTML中使用，但現代網頁設計越來越傾向於使用CSS來控制文字的樣式，因為CSS提供了更多靈活性和控制能力。
使用CSS類和樣式規則可以更有效地管理網站的整體樣式，並且可以更容易地適應不同裝置和螢幕尺寸。
因此，如果您正在學習或更新您的網頁設計知識，建議學習和使用CSS來控制字型和其他文字樣式，關於HTML的這些標籤瞭解一下就可以了。
想要快速入門前端開發嗎？推薦一個前端開發基礎課程，這個老師講的特別好，零基礎學習無壓力，知識點結合程式碼，邊學邊練，可以免費試看試學，還有各種輔助工具和資料，非常適合新手！點這裡前往學習哦！
總之，字型是網頁設計中不可或缺的元素，它們就像是網頁的語言，傳遞著資訊和情感。透過HTML字型標籤的學習和應用，我們可以讓我們的網頁“字”得其樂，讓每一位訪問者都能享受到更加美妙的網路體驗。不斷探索和實踐，讓我們的網頁在字型的世界裡綻放光彩吧！