在制作網頁時，文字是最基本的元素之一。讓閱讀者更容易閱讀，短時間裡獲得更多信息，是網頁創作者的目标。本篇将介紹各種文字格式标簽的使用方法。
本篇主要針對初學者的一篇教程，如果你非常熟悉html，可以忽略本篇文章。
目錄标題文字
- 标題文字
- 文字格式标簽
- 段落标簽
- 其它标簽
在網上浏覽時經常看到一些标題文字，用來對應章節劃分，它們以固定的字号顯示，總共有6種級别的标題，從 h1 至 h6 依次減小，如下圖：
html 代碼：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>标題</title> </head> <body> <h1>這是标題 1</h1> <h2>這是标題 2</h2> <h3>這是标題 3</h3> <h4>這是标題 4</h4> <h5>這是标題 5</h5> <h6>這是标題 6</h6> </body> </html>标題對齊方式可以使用 align 屬性，分别有三個屬性：
- left —— 左對齊
- center —— 居中對齊
- right —— 右對齊
如下圖：
html代碼：
文字格式标簽
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>标題</title> </head> <body> <h1>這是标題 1</h1> <h2 align="left">這是标題 2</h2> <h3 align="center">這是标題 3</h3> <h4 align="right">這是标題 4</h4> <h5>這是标題 5</h5> <h6>這是标題 6</h6> </body> </html>除了标題，網頁中普通文字也是不可缺少的，而各種文字效果可以使網頁更加漂亮。
隻需在<body>和</body>之間輸入文字，就會直接在頁面中顯示，如何設置這些文字的格式，這裡使用<font>标簽，下面将逐一介紹各種文字格式用法。
一、設置字體、字号、顔色 —— <font> 标簽
<font> 标簽在HTML 4 中用于指定字體、字體大小和文本顔色，但在HTML5 中不支持。
- face 屬性：字體類型
- size 屬性： 字體字号大小
- color 屬性：字體顔色
html代碼：
<html> <body> <div><font face="宋體">字體</font></div> <div><font size="5">5号字體</font></div> <div><font color="red">顔色</font></div> <div><font size="5" face="arial" color="blue">一起使用</font></div> </body> </html>在html5中不建議使用，請用 css 樣式代替。
二、粗體、斜體、下劃線、删除線—— strong、em、u、del
效果如下：
html代碼：
<!DOCTYPE html> <html> <body> <p>這是普通文本 - <strong>這是粗體文本</strong>。</p> <p>這是普通文本 - <em>這是斜體</em>。</p> <p>這是普通文本 - <u>這是下劃線</u>。</p> <p>這是普通文本 - <del>這是下劃線</del>。</p> </body> </html>注：html 5 和 html 4 相關标簽存在巨大差異，比如 strong 和 b 、del 和 s、em 和 i 等效果相同，在html5 中不支持，b、s、i 标簽，已不建議使用，關于各種差異，可自己了解下就可以了。
3、上标和下标 —— sup、sub
效果如下：
html代碼：
<html> <body> <p> 普通文本 <sup>上标</sup> </p> <p> 普通文本 <sub>下标</sub> </p> <p> 數學公式 X<sup>3</sup> 5X<sup>2</sup> - 5 = 0 </p> <p> 數學公式 X<sub>1</sub> - 2X<sub>1</sub> = 0 </p> </body> </html>4、空格——
一般在網頁中輸入文字時，在段落中明明增加了空格，卻在頁面中看不到，這是因為在html中，浏覽器本身會将2個句子之間的所有半角空白僅當做一個空白來看待。所以在這裡使用空格符代替，每個空格符代表一個半角空格，多個空格可以使用多次。
html代碼：
由于頭條不顯示空格字符，所以用圖片代替
效果：
5、其它特殊字符
除了空格字符，在網頁中還有一些特殊字符也需要使用代碼來代替，一般情況下，特殊字符由前綴 “&” 開始、字符名和後綴 “;” 組成，和空格符類似。如下表
特殊字符有很多，這裡隻列出一些例子，具體自己搜索了解下。
段落在網頁中要把文字有條理地顯示，需要使用到段落标簽，下面介紹一些與段落相關的标簽。
- 段落标簽——p
在網頁中，通過 <p>定義為一個段落。
html代碼：
<html> <body> <p>這是段落。</p> <p>這是段落。</p> <p>這是段落。</p> <p>段落元素由 p 标簽定義。</p> </body> </html>效果：
- 換行标簽——br
在寫文字時，除了自動換行外，換可以使用<br>标簽強制文字換行，這個和 p 段落标簽不一樣。段落标簽的換行是隔行的，而br不是，時2行文字更加緊湊。
html代碼：
<html> <body> <p> 第一個段落<br />換行1<br />換行2<br />換行3<br />最後一行. </p> <p> 第二個段落 <br />換行1<br />換行2<br />換行3<br />最後一行. </p> </body> </html>效果如下：
如果不想文字被浏覽器自動換行，可以使用<nobr></nobr>标簽處理，如下圖：
改行文字不會被自動換行，會看到出現橫向滾動條。
- 保留原始排版方式——pre
在網頁制作中，有時需要保留一些特殊的排版效果，這是使用标簽控制就會很麻煩，使用<pre>标簽就可以保留文本的格式排版效果。如下圖：
html代碼：
其它标簽
<html> <body> <pre> 這是 預格式文本。 它保留了 空格 和換行。 </pre> <p>pre 标簽很适合顯示計算機代碼：</p> <pre> for i = 1 to 10 print i next i </pre> <p>這是一個ok效果</p> <pre> O O k K O O K K O O K K </pre> </body> </html>
- 右縮進—— blockquote
使用<blockquote>可以實現文字段落縮進，每使用一次，段落就縮進一次，可以嵌套使用。
實例代碼：
<html> <body> Here comes a long quotation: <blockquote> This is a long quotation. This is a long quotation. This is a long quotation. This is a long quotation. This is a long quotation. </blockquote> 請注意，浏覽器在 blockquote 元素前後添加了換行，并增加了外邊距。 </body> </html>效果如下：
請注意，浏覽器在 blockquote 元素前後添加了換行，并增加了外邊距。
- 水平線——hr
在段落和段落之間加上一行水平線，将段落隔開。如下效果：
html代碼：
<html> <body> <p>hr 标簽定義水平線：</p> <hr /> <p>這是段落。</p> <hr /> <p>這是段落。</p> <hr /> <p>這是段落。</p> </body> </html>
- 文字标注——ruby
在網頁中可以通過添加對文字的标注來說明某段文本。
效果如下：
html代碼：
<!DOCTYPE HTML> <html> <body> <p>ruby 使用語法：</p> <ruby> 被說明的文字 <rt> 标注 </rt> </ruby> </body> </html>
- 其它标簽——var、code、kbd等
總結
<dfn>
定義一個定義項目。
<code>
定義計算機代碼文本。
<samp>
定義樣本文本。
<kbd>
定義鍵盤文本。它表示文本是從鍵盤上鍵入的。它經常用在與計算機相關的文檔或手冊中。
<var>
定義變量。您可以将此标簽與 <pre> 及 <code> 标簽配合使用。
<cite>
定義引用。可使用該标簽對參考文獻的引用進行定義，比如書籍或雜志的标題。
本篇介紹了大部分常用的文本格式标簽，在制作網頁時會經常使用到。如何掌握這些标簽使用，很簡單，可以使用文本編輯器或類似w3cshool 在線可編輯預覽的工具，親手寫一寫，熟悉每個标簽的用處，無需死記硬背，關鍵在于理解。
最後，感謝您的閱讀及關注，祝你學習愉快。
上篇：前端入門——HTML的發展曆史
下篇：前端入門——html 列表
,更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!
zpostcode 
Recruit 
weather 
mreligion 
Yellowpages 
sport 
constellation 
shopping 
name 
game 
directory 
literature 
Word 
tour 
furnish 
Lottery 
tftnews 
lyrics 
News 
digital 
car 
dir 
Edu 
Finance 
