Html文字標籤:樣式設定,強調標記與特殊符號

HTML有許多文字樣式的標籤,文章先介紹font size調整文字大小,pre及br進行換行,說明strong、em、cite、u、strike、sup、sub等標記用法,最後補充如何輸入特殊符號。

一、h1~h7標題大小

首先延續之前文章以論語電子書網頁為範例,先前用標題標籤h0到h8測試不同標題大小在網頁上如何呈現,從預覽頁面能清楚看到,h0與h8沒有任何設定效果。

一張含有 文字, 螢幕擷取畫面, 字型, 數字 的圖片

自動產生的描述

二、font size用法

上個步驟的標籤是針對標題,HTML也可以直接對文字進行樣式設定,用到的標籤正是「font」,設定參數是「size」,也就是字型大小。截圖範例看到它跟Headline標題標籤有點類似,同樣都是1到7的參數值,size 1代表最小的字體,最大則是7,數字越大文字越大。如果參數值小於1,字型還是和size 1同樣尺寸,如果大於7,例如size 8的字體會和參數值7的一樣,這是font標籤與標題標籤h1到h7比較不同的地方。另外看到截圖中有一個「+2」,由於瀏覽器預設的文字大小是3,因此所謂的加2就是跟size 5同樣的字型大小。

另外還可以注意到標題標籤本身是區塊元素,也就是它具有佔據一整行或者自動換行的效果,這裡介紹的font標籤如果沒有設定任何區塊,會看到文字緊靠在一起,沒有自動換行的效果。

D31b21

三、pre樣式保留

如果希望瀏覽器能夠依照HTML原始文字編排樣式呈現,可以使用「pre」這個HTML標籤,它會保留原始HTML文字版面的編排符號。例如在此有按下Enter鍵換行,如同上個步驟所見一般情況下,瀏覽器解析HTML編碼會忽略原始碼中的換行符號,加上pre標籤等於是請瀏覽器保留版面編排符號如實呈現,因此是右側預覽畫面那樣的換行效果。

D31b31

四、br段落換行

上個步驟是用pre標籤保留原始程式碼的排版效果,重點是換行,其實在HTML有專門的換行標籤,也就是這裡看到的「br」,一個br代表一個換行,兩個br便是兩行的換行效果。

D31b41

五、strong與em強調

介紹換行效果之後,接著想在網頁添加一些用於強調的標籤。首先是「strong」和「em」這兩個標籤都能夠加粗字體,不過在解讀上通常認為strong更有強調意味,瀏覽器預覽也可以看到strong的效果會比em稍微深一點。另外還有一個「cite」標籤會讓文字以斜體方式呈現,它比較偏向單純的改變樣式,沒有在語義上特地強調的作用。

一張含有 文字, 螢幕擷取畫面, 字型, 數字 的圖片

自動產生的描述

六、u與strike效果

再介紹幾個HTML關於文字樣式的標籤。「u」是下底線,「strike」是刪除線,還有一些在特殊場合會用到的備註文字,上下標分別使用「sup」與「sub」,參考右側預覽效果很容易能瞭解各個標籤的作用。

D31b61

七、特殊符號編碼

從先前步驟可得知善用HTML標籤能達成文章版面的編排,不過也許會遇到一個狀況:希望網頁上呈現和HTML標籤同樣的特殊符號,例如向左向右箭頭,或是在文字裡面加上空格,這些情況應該使用HTML特殊編碼,例如:「 」是空格的特殊符號編碼,英文的單雙引號可以輸入「'」跟「"」,「<」與「>」分別代表小於和大於符號。

D31b71

HTML標籤符號參考筆記

這篇文章首先介紹HTML樣式標籤以及特殊符號,實際使用就知道HTML標籤通常使用意思相近的英文單字或簡稱,例如strong或者em,容易記憶而且相當直覺。至於特殊符號基本上沒有規則可言,不過在實務上使用的機會不多,不用特別記住相對應的編碼,因為很容易會忘記。贊贊小屋建議把可能會用到的特殊符號編碼做個筆記,有需要的時候再參考使用即可。進一步說,就算HTML標籤容易記憶,可是不常使用的部分,同樣用筆記方式作為參考,毋須強記,如此進行網頁設計會更有效率。

每天學習,每天充電:HTML系列文章

YouTube video

最新文章: