網頁設計 - HTML 文件結構

HTML 的文件結構其實很簡單,它是由多個標籤 (Tag) 組成一個個內容區塊,而不同的標籤區塊,內容會有不同的呈現方式。

在說明 HTML 結構之前,我們先看一下底下 hello.html 網頁檔案的範例:

<html>

  <head>
    <title>網頁設計教學 HTML 測試</title>
  </head>
  
  <body>
    哈囉!我的第一個 HTML 測試範例 ...
  </body>
  
</html>

眼尖的你應該已經發現,在上面的 HTML 標籤中, <html> 、 <head> 、 <title> 和 <body> 代表的就是一個區塊內容的開始標籤,而 </html> 、 </head> 、 </title> 和 </body> 即是代表一個區塊內容的結束標籤。

想知道這個 HTML 建立好後,在 網頁瀏覽器 上觀看到底是長怎樣的話,可以 按這裡觀看 。您可以把整個網頁透過網頁瀏覽器的功能另存下來,或是在網頁上空白處按滑鼠右鍵,然後點選「檢視原始碼」,就可以看到這個網頁實際上的 HTML 原始碼內容是什麼囉!是不是真的跟我們範例上所寫的一模一樣呢?做網頁真的不難對吧?!

HTML 基本標籤說明

在上面的範例 HTML 當中,您可以發現 <html> 和 </html> 正好包圍著整個 HTML 檔案,這就表示 <html> 是整個 HTML 檔案的開始,而 </html> 是整個 HTML 檔案的結束,因此 <html> 標籤是相當重要不可或缺的一個標籤啊!

<html>

  <head>
    <title>網頁設計教學 HTML 測試</title>
  </head>
  
  <body>
    哈囉!我的第一個 HTML 測試範例 ...
  </body>
  
</html>

如果您有點選上面的範例連結去觀看網頁執行的結果,您應該也會發現,整個網頁的內容,您在畫面上只有看到「哈囉!我的第一個 HTML 測試範例 …」,並沒有看到「網頁設計教學 HTML 測試」在瀏覽器的內容檢視區當中。這是為什麼呢?是哪裡寫錯了嗎?

不,網頁範例並沒有寫錯。而是因為瀏覽器的內容檢視區中真正看得到的網頁內容,是被包在 <body> 和 </body> 標籤之間的「主體區塊」,而在主體區塊之外的內容,是不會被顯示在瀏覽器的內容檢視區的。

<html>

  <head>
    <title>網頁設計教學 HTML 測試</title>
  </head>
  
  <body>
    哈囉!我的第一個 HTML 測試範例 ...
  </body>
  
</html>

那麼「網頁設計教學 HTML 測試」到底出現在哪裡呢?答案是,它會出現在網頁瀏覽器最左上角的網頁標題列上,而一般也會被當作 搜尋引擎 找到您網頁時的網頁標題。如果您還沒有找到這段文字出現在哪裡,您可以再 按這裡觀看 一次結果。

好的,我們再簡單說明一下,在 <head> 標籤區塊中出現的所有內容,都是給網頁瀏覽器或搜尋引擎看的「文件表頭」。而 <head> 區塊內,又包著一個 <title> 標籤區塊,指示出這個網頁的「標題」是什麼。

<html>

  <head>
    <title>網頁設計教學 HTML 測試</title>
  </head>
  
  <body>
    哈囉!我的第一個 HTML 測試範例 ...
  </body>
  
</html>

以上是一個基本的網頁最少應該有的標籤。而其實在 <head> 和 <body> 中,還有其它更多用途的標籤,我們將會在後續的教學網頁中,分門別類為您做介紹。

HTML 學習小提示

養成良好的習慣:您應該有發現我上面的範例在不同的標籤區塊之間有加空格去內縮,不同的區塊間甚至還有加空白行,為得是讓整個 HTML 檔案較容易讓「人」閱讀。但事實上,這 HTML 不論妳在不同的標籤之間加多少空格、空行,甚至你都不換行,它的執行結果都是一模一樣的,因為「瀏覽器」只會去認它的標籤。

<html><head><title>網頁設計教學 HTML 測試</title></head>
<body>哈囉!我的第一個 HTML 測試範例 ...</body></html>

上面的 HTML 跟最前面的 HTML 執行結果都相同,有興趣您也可以試看看。

但是還是建議您以階層式內縮的方式來撰寫 HTML ,這樣對於您日後回頭來看時,要修改什麼地方,可以一目瞭然,更不容易出錯。 ^_^

<< 上一篇: HTML 簡介 [ HTML 教學目錄 ] 下一篇: HTML 基本排版 >>
2 則留言
  1. Avatar

    您好~謝謝您~覺得您的教法很容易懂~~ 但有幾個問題想請教您
    請問階層內縮的空格有限定幾格嗎?
    我是初學者,從頭學起實在是很有困難TT 所以一直抓不到空幾格
    如:空一格

    空兩格

    以上兩者都是可以的嗎?只要有階層就好?

    1. PHD

      沒有限定喔,那只是好看,為了容易閱讀 HTML 碼而已。對於瀏覽器是不論有沒有加空格都是一樣的。

留個言吧…

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *