HTML 文字格式化元素

admin發表於2018-09-12
HTML

文字格式化元素，就是通過標籤自身的天然屬性給文字一定的格式化效果。

一.加粗效果:

使用<b>和<strong>標籤可以使文字加粗，起到強調作用。

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
</head>
<body>
  <p>螞蟻部落一</p>
  <b>螞蟻部落二</b><br />
  <strong>螞蟻部落三</strong>
</body>
</html>

雖然<b>標籤和<strong>標籤都有相同的加粗效果，但是在實際開發過程中，通常推薦使用<strong>標籤。

<strong>比<b>更加具有語義性，對網站優化也有一定的效果。

二.文字斜體效果:

<i>、<cite>和<em>三個標籤可以實現文字的斜體效果。

在實際開發中推薦使用<em>標籤。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
</head>
<body>
  <i>螞蟻部落一</i><br />
  <cite>螞蟻部落二</cite><br />
  <em>螞蟻部落三</em>
</body>
</html>

三.上標/下標效果:

使用<sup>標籤可以實現上標效果。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
</head>
<body>
<p>(a+b)<sup>2</sup>=a<sup>2</sup>+b<sup>2</sup>+2ab</p>
</body>
</html>

使用<sub>標籤可以實現下標效果。

程式碼例項:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
</head>
<body>
  <p>SO<sub>2</sub></p>
</body>
</html>

四.大號和小號字型:

通過<big>和<small>標籤可以設定文字大號字型和小號字型。

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
</head>
<body>
  <p>螞蟻部落一 </p>
  <big>螞蟻部落二</big><br />
  <small>螞蟻部落三</small>
</body>
</html>

實際應用中很少使用這兩個標籤，而是推薦使用CSS font-size屬性精準控制。

五.刪除線效果:

通過<s>標籤可以給文字新增一條貫穿的刪除線。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
</head>
<body>
  <p>JavaScript權威指南</p>
  <p><s>原價:100￥</s></p>
  <p><strong>現在僅售：68￥</strong></p>
</body>
</html>

不過還是推薦使用css實現，text-decoration: line-through也可以實現。

六.下劃線效果:

使用<u>標籤可以實現下劃線效果。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
</head>
<body>
  <p>螞蟻部落一 </p>
  <u>螞蟻部落二</u>
</body>
</html>

相關文章