全棧攻城獅-每日更新原創IT編程技術及日常實用視頻。

主要內容：這是HTML課程的第四課，主要講解HTML的文字標簽和格式標簽。在今天我們做一個屬于自己的簡歷。

上節回顧

在上一節中主要講解了HTML的標題標簽（h1~h7）以及加粗、斜體、下劃線、上下標等格式的標簽。上節請戳→HTML電腦編程03 標題物理字體標簽的使用，大學生學編程

HTML

font標簽

font標簽通過字面意思來看，就是字體的意思。是的這是一個用來顯示文字的標簽。不過值得說的是，這個文字可以通過屬性的方式，指定顏色和字體大小。比如：

font標簽的寫法

效果：

font標簽的顯示效果

從書寫的HTML代碼可以看出，font標簽包括兩個參數：

1. color（字體的顏色）：顏色的值可以為英文，也可以為RGB數值。
   

2. size（字體的大小）：通過數字1~7可以控制字體的大小。

3. face（文字的顯示字體）：這個屬性可以設置顯示的字體。如可以寫為：face="楷體"

顏色體系

在HTML中包括兩種顏色體系。一種就是直接寫顏色的英文，如：red（紅色）、blue（藍色）、green（綠色）等。

不同顏色

另外一種顏色體系是RGB。由R（Red）、G（Green）、B（Blue）三種顏色組成。相信小時候很多人都知道兩種不同的顏料，可以轉換為不同的顏色。RGB就是通過紅綠藍不同的明暗程度。來表示所有的顏色的。

RGB

RGB中的每一個顏色都是以六位十六進制進行表示。數值越大顏色越深。如：000000表示黑色。FFFFFF表示白色。RGB的表示形式一般前面增加#號。

段落標簽

段落標簽為p。會為里面的文字自動分段顯示：

p標簽自動分段

換行標簽

換行標簽為br，這是個單標簽。寫法為：<br/>。

br標簽的形式

效果：

換行標簽的效果

默認情況下，HTML的文檔排列形式為自上而下，自左而右。標簽包括行級標簽和塊級標簽。如果想要對塊級標簽進行換行，你就需要使用br標簽。

其他幾個標簽

下面是幾個標簽，大家直接Sublime中寫入看一下效果哦。在以后就直接使用啦

居中預格式化標簽

技術等級】初級

【承接文章】《CSS字體屬性，詳解屬性用法，提升前端小白能力》

本文重點講解CSS技術中有關文本樣式的屬性以及這些屬性的取值。本文屬于前端開發的初級教程，適合于剛剛開始接觸CSS技術的學習者。

所謂文本，就是大段落的文字。當文字多到可以形成段落時，就會涉及到段落的一些樣式調整。例如段落的對齊方式、段落的首行縮進等。

被歸結為段落屬性的CSS樣式包括八個，小海老師將其分為兩組。

第一組有如下五個屬性：

• letter-spacing

• word-spacing

• text-decoration

• text-transform

• text-indent

第二組有如下三個屬性：

• text-align

• line-height

• vertical-align

本文小海老師先為大家講解第一組的5個屬性，后續的文章會緊接著為大家講解第二組的3個屬性。

一、設置字符間距：

CSS技術利用letter-spacing屬性來設置字符間距

該屬性可以有多種取值：

• normal，正常，表示字符間距采用系統定義的默認間距。

• 帶單位的長度值，指定字符間距的具體數值。

實例：.sty01{letter-spacing:20px;}

上述代碼定義了用戶自定義類sty01，該樣式設置字符間距為20像素。

二、設置單詞間距：

CSS技術利用word-spacing屬性來設置單詞間距

在頁面中，單詞是以空格作為依據的，每個空格之間被認定為一個單詞。所以也可以認為該屬性是用來調整句子中空格的距離的。

該屬性可以有多種取值：

• normal，正常，表示單詞間距采用系統定義的默認間距。

• 帶單位的長度值，指定單詞間距的具體數值。

實例：.sty02{word-spacing:20px;}

上述代碼定義了用戶自定義類sty02，該樣式設置單詞間距為20像素。

三、設置文本修飾：

CSS技術利用text-decoration屬性來設置文本修飾

該屬性可以有多種取值：

• none，文本沒有經過任何修飾。

• underline，下劃線修飾。

• overline，上劃線修飾。

• line-through，刪除線修飾。

• blink，閃爍修飾（主流瀏覽器不支持該效果）。

讓我們一同來看兩個下例子：

例1：結合虛類設定超級鏈接在鼠標經過時顯示下劃線效果。

a:link{font-size:12px;text-decoration:none;}

a:visited{font-size:12px;text-decoration:none;}

a:hover{font-size:12px;text-decoration:underline;}

a:active{font-size:12px;text-decoration:none;}

例2：結合虛類設定超級鏈接在鼠標經過時放大字號效果。

a:link{font-size:12px; }

a:visited{font-size:12px; }

a:hover{font-size:14px; }

a:active{font-size:12px; }

四、設置段落中西文的大小寫模式：

CSS技術利用text-transform屬性來設置西文的大小寫模式

該屬性可以有多種取值：

• none，段落中西文的大小寫模式不受CSS樣式的影響。

• uppercase，所有西文均為大寫模式。

• lowercase，所有西文均為小寫模式。

• capitalize，所有西文均為首字母大寫模式。

五、設置段落的首行縮進：

CSS技術利用text-indent屬性來設置段落的首行縮進

首行縮進是指：段落中的第一行與整個段落左側之間的距離，也就是我們俗稱的“每一段的第一行空兩個格”。

該屬性可以取值為：

• 帶有單位的長度值，一般首行縮進兩個字符，可設置為字號的2倍。

實例：設置段落的首行縮進為兩個字符的距離。

<p>段落內容……</p>

p{font-size:14px; text-indent:28px;}

文章預告

下一篇文章中，小海老師會為大家從細節上深入剖析text-align屬性以及塊級元素和內聯元素的使用。塊級元素與內聯元素在前端開發中的作用非常重要，我會用整整一篇文章的篇幅，為廣大Web前端愛好者們詳細講解這兩個概念。對于渴望在前端開發道路上前進的你一定不能錯過！

小海教材

如果大家希望得到更加全面的關于HTML和CSS技術講解的內容，可以私信我，我會免費將小海老師自己編寫的HTML和CSS的PDF教材發給你，幫助你在前端開發的道路上闊步前行。

小海聲明

在頭條上也已經寫了有七八篇文章了。這些文章都是從前端開發的基礎開始一步一步講起的。我非常希望能有更多的前端開發初學者通過我寫的文章，逐步學到一定的知識，甚至慢慢有了入門的感覺。這些文章都是我這幾年教學過程中的經驗，每寫一篇時我都盡量把握好措辭，用簡單易懂的語言描述，同時精心設計版面，讓版面更加豐富，激發閱讀興趣。所以，每一篇文章可能篇幅不長，但是都要耗費小海老師很久的時間。

希望收藏了我寫的文章的你同時可以關注一下“小海前端”，因為這些文章都是連載的，并且是經過我系統的歸納過的。

關注“小海前端”，我會繼續為大家奉上更加深入的前端開發文章，也希望更多的初學者跟著學下去，我們共同將前端開發的路努力堅持的走下去。