文本格式化標簽就是針對文本進行各種格式化的標簽,例如加粗、斜體、上標、下標等。
在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/>去掉,看看會出現什麼結果?
舉例:
在線測試<!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/>去掉,看看會出現什麼結果?
舉例:
在線測試<!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>標簽對內。
舉例:
在線測試<!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>,別混亂了。
舉例:
在線測試<!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標簽用來呈現那些不再准確或不再相關的內容。
舉例:
在線測試<!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>標簽實現。
在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入門教程”會講解到。
此外,順便說一下,這些標簽是要記憶的,大家一定要根據他們的語義來記憶,這是最有效的記憶方法,而且還要輔以練習才可以掌握。我們在“標簽的語義”這一節中列舉了所有最實用的標簽極其語義,以方便大家記憶這些標簽。