3.1　標(biāo)題文字的建立

瀏覽器中可以顯示標(biāo)題文字，所謂標(biāo)題文字就是以某種固定的字號顯示文字。HTML文檔中的標(biāo)題文字可以用1級～6級進行區(qū)分，本節(jié)將對如何設(shè)置標(biāo)題文字及其對齊方式進行講解。

3.1.1　標(biāo)題文字標(biāo)簽—<h>

HTML中的標(biāo)題文字共分6級，每一級在字號上有明顯的區(qū)別，從1級～6級依次減小。語法格式如下。

     1級標(biāo)題：<h1>…</h1>
     2級標(biāo)題：<h2>…</h2>
     3級標(biāo)題：<h3>…</h3>
     4級標(biāo)題：<h4>…</h4>
     5級標(biāo)題：<h5>…</h5>
     6級標(biāo)題：<h6>…</h6>

【例3.1】標(biāo)題文字標(biāo)簽的使用。（實例位置：資源包\TM\sl\3\1）

本實例實現(xiàn)在網(wǎng)頁中顯示一則程序員笑話，其中“程序猿的笑話”通過1級標(biāo)題實現(xiàn)，笑話內(nèi)容由4級標(biāo)題實現(xiàn)，具體代碼如下。

運行這段代碼，可以看到網(wǎng)頁中“程序猿的笑話”的標(biāo)題和內(nèi)容分別以兩種不同大小的文字顯示，而且它們與以普通正文顯示的“發(fā)布時間”等內(nèi)容有明顯的區(qū)別，效果如圖3.1所示。

3.1.2　標(biāo)題文字對齊方式屬性—align

默認情況下，標(biāo)題文字是左對齊的，但在網(wǎng)頁設(shè)計過程中，你可以根據(jù)實際需求對標(biāo)題文字的對齊方式進行設(shè)置，這需要在<h>標(biāo)簽中設(shè)置align屬性。語法格式如下。

     <h1 align=對齊方式></h1>

align屬性需要放在標(biāo)題標(biāo)簽的后面，如“<h1 align="">”，該屬性的取值如表3.1所示。

【例3.2】設(shè)置標(biāo)題文字的對齊方式。（實例位置：資源包\TM\sl\3\2）

本實例通過各級標(biāo)題顯示圖書的詳細信息，并將信息設(shè)置為居中對齊。具體代碼如下。

     <!--顯示商品圖標(biāo)-->
     <h2 align="center">
          <img src="book.jpg" width="170">
     </h2>
     <!--顯示圖書名稱-->
     <h5 align="center">
     書名：《Python樹莓派開發(fā)從入門到精通》
     </h5>
     <!--顯示圖書作者-->
     <h5 align="center">作者：明日科技</h5>
     <!--顯示出版社-->
     <h5 align="center">出版社：清華大學(xué)出版社</h5>
     <!--顯示圖書出版時間-->
     <h5 align="center">出版時間：2021年10月</h5>
     <!--顯示圖書頁數(shù)-->
     <h5 align="center">頁數(shù)：400頁</h5>
     <!--顯示圖書價格-->
     <h5 align="center">價格：89.80元</h5>

運行這段代碼，效果如圖3.2所示。

編程訓(xùn)練（答案位置：資源包\TM\sl\3\編程訓(xùn)練）

【訓(xùn)練1】對比各級標(biāo)題的樣式區(qū)別　分別使用<h1>～<h6>標(biāo)題標(biāo)簽顯示“明日科技”四個字。

【訓(xùn)練2】顯示一首古詩　使用一級標(biāo)題標(biāo)簽和四級標(biāo)題標(biāo)簽在網(wǎng)頁上居中顯示一首您熟悉的古詩，其中，古詩標(biāo)題使用一級標(biāo)題標(biāo)簽，古詩內(nèi)容使用四級標(biāo)題標(biāo)簽。