一張網頁或者說一個html，就像一本書里的一頁一樣向訪問者展示各種各樣豐富多彩的信息。比如一本詩集，它的每一頁都充滿了文字，插圖，注解，他們都像讀者傳達了各種各樣的信息，而文字就是每一頁內容的核心部分。html也是如此，那么如何在html中像書本一樣給讀者展現豐富的文字內容呢？這里就需要用到功能強大，無處不在的文字標簽了。下面我們就開始在html中實現詩集的一頁，下面就是我們要實現的效果：
靜夜思
作者：李 白
床前明月光，
疑似地上霜。
舉頭望明月，
低頭思故鄉。
李白：唐代詩人
第一頁
首先一首詩不可少的就是標題，標題的文字和內容里的文字是有區別的，字號要比內容要大，字體加粗。在html中，只需要使用<h1>標簽就可以使文字達到這個效果，下面看看代碼：
<h1>靜夜思</h1>
是不是很簡單，這就是html的強大之處，只需要一個標簽就能實現標題的效果。
有些細心的讀者會發現這個標簽有個數字1，那么是不是還有2,3,4呢？答案是肯定的，在html中有從h1~h6六個標題標簽，隨着數字的增大，字號會逐漸變小。當有些文章不僅有標題，還有副標題，小標題時，這些標簽就可以達到效果了。大家可以試一試以下代碼在瀏覽器中看看效果：
<h1>靜夜思</h1> <h2>靜夜思</h2> <h3>靜夜思</h3> <h4>靜夜思</h4> <h5>靜夜思</h5> <h6>靜夜思</h6>
實現了標題的效果，那么我們要輸入作者了，這里使用了一個新的標簽<span>:
<span>作者：李白</span>
使用<span>這個標簽和不使用標簽直接輸入在實際上看是沒有區別的，那么我們為什么要使用這個標簽呢？在html中，各種文字的內容最好都放在標簽里，這樣當我們之后使用css改變它們的樣式時就會十分方便。舉個簡單的例子，當我們想把“作者：李白”這幾個字變成紅色時，只需要對這個span標簽進行css的設置就可以了，詳細的等到講解css時會介紹。
接下來要實現古詩的正文部分了，每一句古詩，都可以當作文章的一段，那么html中表示段落的標簽是哪個呢？就是這個<p>標簽，使用它可以定義段落：
<p>床前明月光，</p> <p>疑似地上霜。</p> <p>舉頭望明月，</p> <p>低頭思故鄉。</p>
以上就實現了一首詩的展示頁面。
正文內容結束了，在一首詩的頁面里，是不是應該還有注釋和頁碼呢？這些和正文內容無關的信息在書本中會用一條長長的橫線將它們與正文隔開，在html中，要實現這樣一條水平線就需要使用<hr>標簽了，值得注意的是<hr>標簽和其它的標簽不一樣的地方是它不需要寫閉合標簽:
<hr>
之后用我們剛學習的<span>標簽填上注釋：
<span>李白：唐代詩人</span>
之后再用span標簽添加頁碼：
<span>第一頁</span>
這里我們發現，頁碼和注釋出現在了同一行，這是因為span標簽是行內元素，而之前的那些標簽是塊元素，他們之間的區別之一就是，塊元素會自動換行行內元素則不會。當然它們還有很多區別，會在之后的章節詳細介紹。
那么我們想實現換行該怎么辦呢？這里只需要使用<br>標簽，html中會將<br>標簽視為換行，它和<hr>標簽一樣，是不需要閉合標簽的。
這樣我們就實現了一頁完整的古詩頁，以下是全部的代碼：
<html> <head> <meta charset="utf-8"> <title>123</title> </head> <body> <h1>靜夜思</h1> <span>作者：李白</span> <p>床前明月光，</p> <p>疑似地上霜。</p> <p>舉頭望明月，</p> <p>低頭思故鄉。</p> <hr> <span>李白：唐代詩人</span><br><span>第一頁</span> </body> </html>
課后練習：通過今天學習，嘗試着使用文字標簽做一下詩集的第二頁，杜甫的登高吧！