看完了 HTML 基本排版 之後，您已經迫不急待要開始撰寫文章了吧！
HTML 提供了我們一些常用文章的標題、段落…等標籤，讓我們在網頁上寫文章時，能夠很容易讓人瞭解您文章的段落章節，更容易閱讀您的文章。
HTML 的文章標題 (主題)
每篇文章應該都會有個主題，甚至較長的文章還會分為篇、章、節、小節、條目…等。這樣的文章編制，其實在許多書籍裡面都會看得到，一個文章有分不同的篇、章、節，也更方便要找資料的人，可以更容易找到自己所想要看的文章段落。
文章的篇章節在 HTML 中使用 <h1> ~ <h6> 來標示的，其中 h 是取自於「標題」的英文 heading 第一個英文字母，而後面所接的 1 ~ 6 代表篇、章、節…等，由大標題至小標題的文章結構。
我們來看一下底下的範例：
<html>
<head>
<title>網頁設計教學 HTML - 文章標題</title>
</head>
<body>
<h1>網頁的 h1 標題</h1>
<h2>網頁的 h2 標題</h2>
<h3>網頁的 h3 標題</h3>
<h4>網頁的 h4 標題</h4>
<h5>網頁的 h5 標題</h5>
<h6>網頁的 h6 標題</h6>
</body>
</html>
執行結果如下：
網頁的 h1 標題 網頁的 h2 標題 網頁的 h3 標題 網頁的 h4 標題 網頁的 h5 標題 網頁的 h6 標題
由上面的結果我們可以看出，在 HTML 中預設的 <h1> ~ <h6> 標題的字型是由大到小的，並且都是以粗體字的方式呈現，以便與接下來的文章段落文字做區隔。
HTML 的文章段落
在 HTML 中的文章段落標籤，是以「段落」的英文 paragraph 第一個字母 p 做為簡寫，因此 <p> 即為文章段落的標籤。
<html>
<head>
<title>網頁設計教學 HTML - 文章段落</title>
</head>
<body>
<p>網頁設計是架設網站的第一步！</p>
<p>想要打好網頁設計的基礎，最重要的就是先把 HTML 語法學會，這樣之後的學習之路才會駕輕就熟，那我們一起努力吧！</p>
</body>
</html>
執行結果如下：
網頁設計是架設網站的第一步！ 想要打好網頁設計的基礎，最重要的就是先把 HTML 語法學會，這樣之後的學習之路才會駕輕就熟，那我們一起努力吧！
HTML 的文章的對齊位置
先前的範例中，文章內容都是靠左對齊的，但有時我們也會希望文章能夠置中或靠右對齊。因此，在 <h1> ~ <h6> 與 <p> 標籤中，都有一個特別的「屬性」，能夠幫我們達成這個目的。
<html>
<head>
<title>網頁設計教學 HTML - 文章的對齊位置</title>
</head>
<body>
<h2 align="center">網頁文章標題置中對齊測試</h2>
<p align="left">這個段落文字靠左對齊</p>
<p align="center">這個段落文字置中對齊</p>
<p align="right">這個段落文字靠右對齊</p>
</body>
</html>
執行結果如下：
網頁文章標題置中對齊測試這個段落文字靠左對齊這個段落文字置中對齊這個段落文字靠右對齊
在 HTML 中，所有屬性 (Attribute) 的值都是以一個等於符號「 = 」及左右兩個雙引號「 " 」來設定的。
上面範例中的 align 就是 <h1> ~ <h6> 與 <p> 標籤的「對齊屬性」。透過指定 align 屬性的值為 left 即可靠左、 center 置中、 right 則是靠右，例如 align="center" 即是對齊屬性的設定置中方式。
HTML 的水平分隔線
有時文章若較長時，光是用 <h1> ~ <h6> 與 <p> 去將文章做不同篇幅的內容區隔還不夠，也許您還會需要加上分隔線，這時就會使用到 <hr> 標籤。
水平分隔線的英文是 horizontal line ，而 hr 主要是取「水平」的英文 horizontal 前兩個發音的音節 "ho-ri" 中各音節的第一個字母，即 <hr> 標籤的命名由來。
<html>
<head>
<title>網頁設計教學 HTML - 水平分隔線</title>
</head>
<body>
<p>網頁設計是架設網站的第一步！</p>
<hr>
<p>想要打好網頁設計的基礎，最重要的就是先把 HTML 語法學會，這樣之後的學習之路才會駕輕就熟，那我們一起努力吧！</p>
</body>
</html>
執行結果如下：
網頁設計是架設網站的第一步！
想要打好網頁設計的基礎，最重要的就是先把 HTML 語法學會，這樣之後的學習之路才會駕輕就熟，那我們一起努力吧！
水平分隔線 <hr> 標籤與換行的 <br> 標籤一樣，因為不會包住任何的文字內容，不是屬於一個區塊標籤，因此也不需要 </hr> 來做結尾。
HTML 文章段落綜合範例
<html>
<head>
<title>網頁設計教學 HTML - 水平分隔線</title>
</head>
<body>
<h2 align="center">網頁設計教學</h2>
<p align="center">網頁設計教學前言<p>
<hr>
<h3>第一章 架設網站的基本知識</h3>
<p>網頁設計是架設網站的第一步！<p>
<h3>第二章 網頁設計要學些什麼</h3>
<p>從 HTML 語法開始學起才是王道。<p>
<h3>第三章 網頁設計的趨勢</h3>
<p>SEO 搜尋引擎最佳化是目前網路行銷中最夯的方法之一。<p>
</body>
</html>
執行結果如下：
網頁設計教學網頁設計教學前言
第一章 架設網站的基本知識 網頁設計是架設網站的第一步！ 第二章 網頁設計要學些什麼 從 HTML 語法開始學起才是王道。 第三章 網頁設計的趨勢 SEO 搜尋引擎最佳化是目前網路行銷中最夯的方法之一。
HTML 學習小提示
自動換行特性：之前我們曾在 HTML 基本排版 這篇提過，若是想將文字換行，必須在文字後面加上 <br> 換行標籤。但是我們本篇所介紹的 <h1> ~ <h6> 、 <p> 與 <hr> 標籤，剛好都是屬於一個文章段落的開始、結束、或段落與段落間的分隔，因此若觀察前面的範例，可以發現標題、段落、水平分隔線之間，不需要特別再加 <br> 換行標籤，即會自動以另一行 (段落) 開始。
| << 上一篇： HTML 基本排版 | [ HTML 教學目錄 ] | 下一篇： HTML 文字變化 >> |
※ 本文歡迎大家在網頁中連結或加入我的最愛，但複製、引用、轉載或做其它商業用途者，請註明此原文出處及原始連結，未註明出處者必究。
發表評論
Want to join the discussion?Feel free to contribute!