DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> HTML基礎知識 >> HTML入門知識 >> 4.4 文本格式化標簽
4.4 文本格式化標簽
編輯:HTML入門知識     

文本格式化標簽就是針對文本進行各種格式化的標簽,例如加粗、斜體、上標、下標等。

一、粗體標簽<b>、<strong>

在HTML中,對文本加粗,可以使用2個標簽:<b>或<strong>。

舉例:

在線測試
 
<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>粗體標簽</title>
</head>
<body>
    <p>這是普通文本</p>
    <b>這是粗體文本</b><br/>
    <strong>這是粗體文本</strong>
</body>
</html>

在浏覽器預覽效果如下:

說明:

<b>標簽和<strong>標簽加粗的效果是一樣的。但是在實際開發中,想要對文本加粗,盡量用<strong>標簽,不要用<b>標簽,這是由於<strong>標簽比<b>標簽更具有語義性。也就是說,大家只要記住<strong>標簽即可,具體原因我們在“HTML進階教程”會詳細分析。

:大家把上面代碼中的換行標簽<br/>去掉,看看會出現什麼結果?

二、斜體標簽<i>、<cite>、<em>

舉例:

在線測試
 
<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>斜體標簽</title>
</head>
<body>
    <i>斜體文本</i><br/>
    <cite>斜體文本</cite><br/>
    <em>斜體文本</em>
</body>
</html>

在浏覽器預覽效果如下:

說明:

對於要對文本進行斜體設置,盡量用<em>標簽,其他兩個用得極少。在後續的CSS進階教程中,我們會慢慢了解到原因。

:大家把上面代碼中的換行標簽<br/>去掉,看看會出現什麼結果?

三、上標標簽<sup>

舉例:

在線測試
 
<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>上標標簽</title>
</head>
<body>
    <p>(a+b)<sup>2</sup>=a<sup>2</sup>+b<sup>2</sup>+2ab</p>
</body>
</html>

在浏覽器預覽效果如下:

說明:

要想將某個數字或文本變成上標形式的效果,就把這個數字或文本放在<sup></sup>標簽對內。

四、下標標簽<sub>

舉例:

在線測試
 
<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>下標標簽</title>
</head>
<body>
    <p>H<sub>2</sub>SO<sub>4</sub>指的是硫酸分子</p>
</body>
</html>

在浏覽器預覽效果如下:

說明:

要想將某個數字或文本變成下標形式的效果,就把這個數字或文本放在<sub></sub>標簽對內。注意,上標標簽是<sup>,下標標簽是<sub>,別混亂了。

五、大字號標簽<big>和小字號標簽<small>

舉例:

在線測試
 
<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
</head>
<body>
    <p>普通字體文本 </p>
    <big>大字號文本</big><br/>
    <small>小字號文本</small>
</body>
</html>

在浏覽器預覽效果如下:

說明:

大字號標簽和小字號標簽在實際開發中極少使用,因為這兩個標簽都是純樣式標簽,我們可以用CSS來控制字體的大小。

六、刪除線標簽<s>

s標簽用來呈現那些不再准確或不再相關的內容。

舉例:

在線測試
 
<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>刪除線標簽</title>
</head>
<body>
    <p>新鮮的新西蘭奇異果</p>
    <p><s>原價:¥6.50/kg</s></p>
    <p><strong>現在僅售:¥4.00/kg</strong></p>
</body>
</html>

在浏覽器預覽效果如下:

說明:

在實際開發中,刪除線效果一般用於商品標價中,大家在淘寶天貓中經常能看到這樣的效果。

在我們學了CSS之後,對於刪除線效果,一般采用CSS實現,極少使用<s>標簽實現。

七、下劃線標簽<u>

在HTML中,對文本實現下劃線效果使用的是u標簽。

舉例:

在線測試
 
<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>下劃線標簽</title>
</head>
<body>
    <p><u>視覺化思考</u>能以獨特而有效的方式,讓你的心有更大的空間來解決問題。</p>
</body>
</html>

在浏覽器預覽效果如下:

說明:

在實際開發中,對文本實現下劃線效果,我們往往都是使用CSS來實現,大家可以完全忽略這個u標簽。

總結

這節課,准確來說,只需要掌握以下幾個重要標簽就可以了,因為其他標簽完全可以用CSS實現,這些實現方式,我們在“CSS入門教程”會講解到。

表1 重要的文本格式化標簽 文本格式化標簽 語義 說明 <strong> strong(加強) 加粗 <em> emphasized(強調) 斜體 <cite> cite(塊引用) 斜體 <sup> superscripted(上標) 上標 <sub> subscripted(下標) 下標

此外,順便說一下,這些標簽是要記憶的,大家一定要根據他們的語義來記憶,這是最有效的記憶方法,而且還要輔以練習才可以掌握。我們在“標簽的語義”這一節中列舉了所有最實用的標簽極其語義,以方便大家記憶這些標簽。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved