#HTML：基本內文文章結構

2013-09-10

3604
0
HTML
2013-10-31

HTML文件裡面的內容大概如你在報紙上看到的一篇篇文章，一樣會具備標題、副標題、段落等等格式，我們就先給一個範例來表現一篇文章的HTML文件吧！

article.html

<!DOCTYPE html>
<html>
  <head>
    <title>文章範例</title>
  </head>
  <body>
    <h1>主要標題</h1>
    <h2>副標題</h2>
    <hr />
    <p>第一個段落</p>
    <p>第二個段落</p>
    <p>
      <em>斜體強調</em>，<br />
      <strong>粗體強調</strong>，<br />
      <em><strong>粗斜體強調</strong></em>
    </p>
  </body>
</html>

標題表示用標籤

使用h1~h6標籤分別可以表示從大到小的1級到6級的標題，當一篇文章出現標題的時候，可以使用此標籤來表示標題的部分。底下是h1~h6各個標籤範例：

header1to6.html

...
<body>
  <h1>一級標題</h1>
  <h2>二級標題</h2>
  <h3>三級標題</h3>
  <h4>四級標題</h4>
  <h5>五級標題</h5>
  <h6>六級標題</h6>
</body>
...

水平線標籤

若要使用水平線來分隔文章，可以使用hr標籤來表示，hr為一個無包內容的標籤，可以寫作<hr />。

段落與換行標籤

若文章中要表示段落，可將段落使用p標籤包起來，此時段落上下會與其他段落產生分隔的效果；若僅只要使用簡單的單行換行可使用br標籤，br亦為一個無包內容的標籤，可以寫作 。

強調標籤

若文章中有需要強調的地方，可使用em標籤做斜體強調、strong標籤去做粗體強調，若要兩者一起使用，則可巢狀式的將一個標籤包起另外一個標籤（就像範例所寫的強調部分）。如果以前有用過HTML的人可能會知道有另外兩個標籤與之效果相同，分別是i(斜體)與b(粗體)標籤。在HTML5開始強調用標籤來表示文章語意的做法後，會建議使用em、strong兩個標籤來取代i與b標籤。

block元素與inline元素

大部分的HTML元素都會定義它為block元素或是inline元素。當使用該標籤會造成該元素與上下元素自動有所分隔，則該標籤所產生的元素為block元素；相對地，若並不會造成與上下元素之間的分隔的話，則為inline元素。本範例中，像是h系列的元素和p元素就屬於block元素；而em元素和strong元素則屬於inline元素。

已被廢棄使用的樣式用標籤

在HTML5當中，已不建議使用center標籤(置中)與font標籤(改變文字樣式，像是文字大小、文字顏色等)來去做樣式變化，目前HTML語法強調是被使用在文件語意上，而樣式美觀的部分就全權交給CSS語法去做處理，故若要置中或是改變文字樣式的部分請使用CSS樣式去做。(其實不只center、font標籤，其他像是align屬性(該元素對齊用)、bgcolor屬性(背景顏色屬性)......等等與樣式有關係的標籤或是屬性都已不建議使用HTML語法做更改，請盡量都使用CSS語法去撰寫)

pre標籤：直接顯示與原語法相同內容

如果有時從別的地方直接複製一篇長篇的文章，要在該文章換行或段落的地方加上 或是...實在有點麻煩，這時候只要直接先貼上該文章，然後前後加上<pre>...文章...</pre>即可，這就是pre標籤的用途。

pre.html

...
<body>
  <pre>
這是一篇很長的文章，
害我懶的用br和p標籤，
真是抱歉！
  </pre>
</body>
...

參考資料

html教學 > 第03章。常用標籤：http://m7.dfps.tp.edu.tw/chen/main5/ahtml/03.asp
w3schools.com > HTML <div> and ：http://www.w3schools.com/html/html_blocks.asp
w3schools.com > HTML <pre> tag：http://www.w3schools.com/tags/tag_pre.asp

HTML

回首頁