在我們使用HTML標簽時,要清楚知道標簽除了具有一定的語義外,還有默認的樣式,例如<b>(加粗)、<em>(傾斜)等,通過這些標簽我們無需借助 CSS 就可以為網(wǎng)頁中的內容定義樣式。在這些具有語義和默認樣式的標簽中,有許多是針對文本的,通過這些標簽我們可以格式化文本(為文本添加樣式),例如使文本加粗、傾斜或者添加下劃線等。
HTML 文本格式化都有哪些?
舉例說明:
(1)<b>加粗文本</b>
(2)<i>斜體文本</i>
(3)<code>電腦自動輸出</code>
(4)這是<sub>下標</sub> 和<sup>上標</sup>
上面這四個是我們經(jīng)常會使用的,下面把HTML中許多用來格式化文本的標簽列出來,便于大家日后尋找和記錄:
標簽 | 描述 |
<b>...</b> | 加粗標簽中的字體 |
<em>...</em> | 強調標簽中的內容,并使標簽中的字體傾斜 |
<i>...</i> | 定義標簽中的字體為斜體 |
<small>...</small> | 定義標簽中的字體為小號字體 |
<strong>...</strong> | 強調標簽中的內容,并將字體加粗 |
<sub>...</sub> | 定義下標文本 |
<sup>...</sup> | 定義上標文本 |
<ins>...</ins> | 定義文檔的其余部分之外的插入文本 |
<del>...</del> | 在文本內容上添加刪除線 |
<code>...</code> | 定義一段代碼 |
<kbd>...</kbd> | 用來表示文本是通過鍵盤輸入的 |
<samp>...</samp> | 定義程序的樣本 |
<var>...</var> | 定義變量 |
<pre>...</pre> | 定義預格式化的文本,被該標簽包裹的文本會保留所有的空格和換行符,字體也會呈現(xiàn)為等寬字體 |
<abbr>...</abbr> | 用來表示標簽中的內容為縮寫形式 |
<address>...</address> | 用來定義文檔作者的聯(lián)系信息,被該標簽包裹的文本通常會以斜體呈現(xiàn),并在文本前面換行 |
<bdo>...</bdo> | 定義標簽中的文字方向 |
<blockquote>...</blockquote> | 定義一段引用的文本,例如名人名言,文本會換行輸出,并在左右兩邊進行縮進 |
<q>...</q> | 定義一段短的引用,瀏覽器會將引用的內容使用雙引號包裹起來 |
<cite>...</cite> | 表示對某個文獻的引用,例如書籍或雜志的名稱,文本會以斜體顯示 |
<dfn>...</dfn> | 用來定義一個術語,標簽中的文本會以斜體呈現(xiàn) |
按照作用的不同,可以根據(jù)文字意思和作用,將這些格式化文本的標簽分為兩類:
(1)物理標簽:這類標簽用來為設置文本的外觀;
(2)邏輯標簽:這類標簽用來賦予文本一些邏輯或語義值。
通過上表可以看出,有些標簽的呈現(xiàn)效果雖然相同,但語義卻不同,例如<strong>和<b>標簽、<em>和<i>標簽,下面就來詳細介紹一下。
● <strong>和<b>標簽之間的區(qū)別
相同點:b和strong都是使字體加粗。
區(qū)別一:
但是strong的語義性更強烈,對于優(yōu)化搜索來說更好,能讓它知道你這里面的內容的語義效果,b只對視覺效果進行了強調,而語義上沒有幫助。
區(qū)別二:
strong是web標準中xhtml的標簽,strong的意思是“強調”;b是html的,b的意思是bold(粗體)。
為了符合現(xiàn)在W3C的標準,推薦使用strong標簽。
● <em>和<i>標簽之間的區(qū)別
主要區(qū)別:<em>是基于內容的樣式,<i>一個是基于物理的樣式。
< i > 是視覺要素(presentationl elements),分別表示無意義的加粗,無意義的斜體,僅僅表示樣式上是粗體或斜體,而沒有強調的語義,這兩個標簽在HTML4.01中不推薦使用,建議用CSS樣式;
< em > 是表達要素(phrase elements)。< em >(emphasized text)表示一般的強調文本,這個標簽具有語義。該標簽中的內容在搜索引擎中更受重視,一些語音閱讀器也會根據(jù)它在閱讀時加強語氣。
C語言網(wǎng)提供由在職研發(fā)工程師或ACM藍橋杯競賽優(yōu)秀選手錄制的視頻教程,并配有習題和答疑,點擊了解:
一點編程也不會寫的:零基礎C語言學練課程
解決困擾你多年的C語言疑難雜癥特性的C語言進階課程
從零到寫出一個爬蟲的Python編程課程
只會語法寫不出代碼?手把手帶你寫100個編程真題的編程百練課程
信息學奧賽或C++選手的 必學C++課程
藍橋杯ACM、信息學奧賽的必學課程:算法競賽課入門課程
手把手講解近五年真題的藍橋杯輔導課程