html編程的基本格式-tft每日頭條

前言

在制作網頁時，文字是最基本的元素之一。讓閱讀者更容易閱讀，短時間裡獲得更多信息，是網頁創作者的目标。本篇将介紹各種文字格式标簽的使用方法。

本篇主要針對初學者的一篇教程，如果你非常熟悉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 列表
,

<dfn>	定義一個定義項目。
<code>	定義計算機代碼文本。
<samp>	定義樣本文本。
<kbd>	定義鍵盤文本。它表示文本是從鍵盤上鍵入的。它經常用在與計算機相關的文檔或手冊中。
<var>	定義變量。您可以将此标簽與 <pre> 及 <code> 标簽配合使用。
<cite>	定義引用。可使用該标簽對參考文獻的引用進行定義，比如書籍或雜志的标題。