你太美。

雖然第一個html代碼寫的非常隨意，就四個字：雞你太美。但是用瀏覽器打開之后確實是能看到是以網頁的形式所展現的。這個現象就有點奇怪了，為什么？講道理，只要是一種語言，必定有自己的語法格式，得按它的套路去寫才能認為代碼寫的是對的，然后才能去正常的運行。

但是這里就四個字：雞你太美，它就能把這個東西給顯示出來，這是為什么？其實很簡單。

·可以看一下，按一下F12，把瀏覽器的開發者工具給打開。

·然后選中elements標簽頁，如果是中文版，這里就應該是元素。

·這里有4行文本，這4行文本里面有沒有一個比較熟悉的東西？雞你太美這四個字是不是HTML代碼里面寫的東西？如果把這個東西改了，雞你太美baby。

·然后就不再打開HTML文件了，直接按刷新。這里變成了雞你太美baby，這里是不是也變成了雞你太美baby。

·再比如加點東西，保存刷新，有沒有發現什么規律？這里寫什么，這一段就是什么，但其他地方是沒變的。

所以有理由相信這份代碼的完全體應該是什么？應該就是這個。所以先來把它復刻一下，尖括號。要注意，尖括號得是英文輸入法下的尖括號。html，有個had，后面又有一個head，只不過head前面加了一個斜杠。至于這些東西到底是什么意思，等一下再說。

先把代碼搞完，雞左邊有個body，后面有個body，下面又有一個斜杠。html好保存，然后刷新，效果和之前的閹割版是一樣的。

然后來看一下這些尖括號到底是什么意思，其實還是挺簡單的。首先在html里面，像這種用尖括號括起來的東西稱之為元素。在國內有的人喜歡把它稱為標簽，其實都是一個意思，就是元素的意思。所以在這里有幾種元素，很明顯是三種，一種是html，一種是head，還有一種是body。

這個時候有的小白可能會問了，為什么有的前面是加了個斜杠的？其實是這樣子的，在html里面有些元素是有包裹區間的，就比如body元素，body元素里面的數據或者叫內容是從哪到哪？很明顯這個是開頭，這個是結尾，然后掐頭去尾，內容就在這，懂了吧？開頭結尾。

所以head元素的數據在哪？就在這，什么都沒有。head元素的數據在哪？很明顯就是這個。知道元素的概念之后，接下來再看一下這幾種元素都是什么意思。

·首先html元素是告訴瀏覽器，接下來是html代碼。

·然后head還有body是什么意思？其實可以把HTML代碼想象成是一個人，一個人有自己的頭，還有身體，而且人家的腦袋里面此時此刻在想什么是看不出來的。所以head元素里面的內容一般都是去寫一些對于頁面的一些設置，或者在這個區域里面所看不到的一些東西。

就比如里面可以再加個元素，比如說叫title，title我相信大家應該都知道，就是標題的意思，這個也是一樣的，起止。然后中間這里寫什么？選項卡的這里名字就是什么？就比如坤坤牛逼，保存，然后刷新，是不是變成了坤坤牛逼？當然，想把這個東西放到別的地方也行，比如說放到body里面，然后保存，一刷新，你看也是坤坤牛逼，對吧？但是一般來說按照規范，一般是放到這種head元素里面去，這是head元素。

·然后接下來是body，body就是人的身體，人家長得什么樣子，身材好不好，到底前凸不凸，后翹不翹，一眼就能看得出來，多看一眼都會爆炸的那種。所以在body元素里面，一般都是寫一些在這個區域里面能看到的東西，就比如說一些文字或者說一些圖片等等，所以這個才是html代碼最基本的結構。

·然后回過頭來再看一下最初的問題，什么？就是一開始代碼不是這個樣子的嗎？沒有，那些head、html、body卻依然能在瀏覽器上正確的顯示出來。其實很簡單，就是因為雖然就寫了這個東西，但是瀏覽器會讀取代碼文件里面所寫的內容，寫了什么就能讀到什么。

如果代碼不夠規范，瀏覽器就會自動的幫你把這些元素給補齊，補齊完之后才是真正的HTML代碼。有了正確的代碼之后，瀏覽器才會根據這份代碼來進行渲染，也就是現在所看到的樣子。

所以代碼千萬條，規范第一條，因為永遠都不會想知道瀏覽器到底會對不規范的代碼進行什么樣的修改，把它改成什么樣子。所以html代碼的最基本的格式就是html、head、body。修改后的結果:雞你太美。

SS 中，::before 創建一個偽元素，其將成為匹配選中的元素的第一個子元素。常通過 content 屬性來為一個元素添加修飾性的內容。此元素默認是行級的。

備注： 由 ::before 和 ::after 偽元素生成的盒子，就好像它們是應用它們的元素或“原始元素（originating element）”的直接子元素一樣，因此不能應用在替換元素上，比如 <img> 元素，其內容不在 CSS 格式化模型的范圍內。

語法

CSSCopy to Clipboard

::before {
  content: /* 值 */;
  /* 屬性 */
}

如果 content 屬性沒有明確指定，或者有一個無效值，或者其值為 normal 或 none，則 ::before 偽元素不會被渲染。它的行為就好像設置了 display: none 一樣。

備注： Selectors 第 3 版引入了雙冒號標記法 ::before，以將偽類和偽元素區別開。瀏覽器也接受由 CSS2 引入的 :before 寫法。

示例

加入引號標記

使用 ::before 偽元素的一個簡單示例就是用于加入引號。此處同時使用了 ::before 和 ::after來插入引用性文本。

HTML

HTMLPlayCopy to Clipboard

<q>有引號，</q>他說，<q>總比沒有好。</q>

CSS

CSSPlayCopy to Clipboard

q::before {
  content: "“";
  color: blue;
}
q::after {
  content: "”";
  color: red;
}

結果

修飾示例

我們可以用幾乎任何方法定義 content 中的文字和圖片樣式。

HTML

HTMLPlayCopy to Clipboard

<span class="ribbon">注意橙色方框的位置。</span>

CSS

CSSPlayCopy to Clipboard

.ribbon {
  background-color: #5bc8f7;
}

.ribbon::before {
  content: "看橙色的盒子。";
  background-color: #ffba10;
  border-color: black;
  border-style: dotted;
}

結果

待辦列表

在本例中我們將使用偽元素來創建一個簡單的待辦列表。這個方法也可用于 UI 的小幅度更改和用戶體驗的提升。

HTML

HTMLPlayCopy to Clipboard

<ul>
  <li>買牛奶</li>
  <li>帶著狗散步</li>
  <li>鍛煉</li>
  <li>寫代碼</li>
  <li>播放音樂</li>
  <li>放松</li>
</ul>

CSS

CSSPlayCopy to Clipboard

li {
  list-style-type: none;
  position: relative;
  margin: 2px;
  padding: 0.5em 0.5em 0.5em 2em;
  background: lightgrey;
  font-family: sans-serif;
}

li.done {
  background: #ccff99;
}

li.done::before {
  content: "";
  position: absolute;
  border-color: #009933;
  border-style: solid;
  border-width: 0 0.3em 0.25em 0;
  height: 1em;
  top: 1.3em;
  left: 0.6em;
  margin-top: -1em;
  transform: rotate(45deg);
  width: 0.5em;
}

JavaScript

JSPlayCopy to Clipboard

const list=document.querySelector("ul");
list.addEventListener(
  "click",
  (ev)=> {
    if (ev.target.tagName==="LI") {
      ev.target.classList.toggle("done");
    }
  },
  false,
);

下面展示的是最終得到的結果。請注意我們沒有使用任何圖標，對勾標識實際上是使用 CSS 定義了樣式的 ::before 偽元素。接下來建立幾個待辦事項來完成它們吧。

結果

特殊字符

由于這是 CSS；不是 HTML，你不可以在內容值中使用標記實體。如果你需要使用特殊字符，并且無法將其直接輸入到 CSS 內容字符串中，那么請使用 unicode 轉義序列，該序列由一個反斜杠和十六進制 unicode 值組成。

HTML

HTMLPlayCopy to Clipboard

<ol>
  <li>把雞蛋打入碗中</li>
  <li>加牛奶</li>
  <li>加面粉</li>
  <li aria-current="step">混合成光滑的面糊</li>
  <li>將一勺面糊倒在熱的、抹了油的平底鍋上</li>
  <li>煎至煎餅頂部失去光澤</li>
  <li>把它翻過來再煎幾分鐘</li>
  <li>配上你喜歡的佐料</li>
</ol>

CSS

CSSPlayCopy to Clipboard

li {
  padding: 0.5em;
}

li[aria-current="step"] {
  font-weight: bold;
}

li[aria-current="step"]::after {
  content: " \21E6"; /* 向左白色箭頭的十六進制 */
  display: inline;
}

結果

無障礙考慮

不鼓勵使用 ::before 偽元素添加內容，因為屏幕閱讀器無法可靠地訪問它。

這里是云端源想IT，幫你輕松學IT”

嗨~ 今天的你過得還好嗎？

天不言而四時行，

地不語而百物生。

- 2024.03.11 -

在數字世界的構建中，字體不僅僅是文字的外衣，更是情感和風格的傳遞者。作為網頁設計師和前端開發者，掌握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>

運行結果：

不過，現代網頁設計更傾向于使用CSS來控制字號，以便更精細地調整字體大小。

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> //大盒子，塊元素。

<!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>//小盒子，行元素。

<!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字體標簽的學習和應用，我們可以讓我們的網頁“字”得其樂，讓每一位訪問者都能享受到更加美妙的網絡體驗。不斷探索和實踐，讓我們的網頁在字體的世界里綻放光彩吧！

今天就先講到這里了，

更多前端開發基礎知識點擊文末閱讀原文查看哦！

記得關注【云端源想IT】一起學編程！

我們下期再見！

END

文案編輯|云端學長

文案配圖|云端學長

內容由：云端源想分享