html網頁語法：<!doctype html>、<html>、<head> 、<body>的意思及註解

html網頁語法從<!doctype html>宣告版本開始，主要包括<html></html>、<head> </head>、<body></body>，本文以記事本程式碼添加註解方式說明，並且介紹<pre></pre>標籤及 顯示原始排版，補充空格符號 。

一、html網頁語法

這是HTML標準也是主要結構，各標籤用法如下：

<!DOCTYPE html>：

因為有約定成俗統一的文法，我們才能使用同一個語言溝通，不同瀏覽器在顯示眾多網頁時也是如此。HTML便是一套規定瀏覽器如何展現解析網頁內容的標準，雖然最新版本是2014的HTML 5，但是在網頁技術發展的過程中，在這之前還有HTML 2、HTML 3、HTML 4等許多版本，可以想見會有很多網頁是在新版本發佈之前設計好的，它們不可能根據HTML 5編寫，所以每一份HTML文件都應該在開頭第一行寫明所適用的HTML版本，這樣瀏覽器才能依照原始設計者的預期，正確解析網頁內容。所謂的「DOCTYPE」是Document Type文件型態的意思，「<!DOCTYPE html>」便是告訴瀏覽器我的網頁是依照HTML 5標準設計的。

輔充說明，HTML標準是由國際共同承認的W3C組織發佈，英文全名為World Wide Web Consortium，之後會介紹到的CSS也是由W3C制定。

<html></html>：這個標籤的開始和結束代表整個HTML文件本身，等於是告訴瀏覽器什麼時候開始，什麼時候結束。

<head> </head>：HTML文件的頭部或者是封面，它並不是瀏覽器要顯示出來的內容，是有關於這份文件的基本資訊，例如這裡很典型的網頁標題，瀏覽器會把<Title>贊贊小屋</Title>中的「贊贊小屋」顯示在索引標籤上。

<body></body>：HTML文件中真正要瀏覽器顯示在網頁上的內容。

二、程式分行縮排

通常整個HTML文件會有分行及縮排的佈局，這樣閱讀比較容易，程式設計時也方便修改。圖片上可以清楚看出原始HTML文件及瀏覽器顯示網頁。

三、添加html註解

程式為了方便閱讀都有標示註解的設置，HTML是以「<!–」和「–>」的中間部份保留為註解。

這裡用了兩種形式：

A.多行註解：

<!–

Document Type HTML5標準

一定要寫在第一行

–>

B.單行註解：

<!– Html文件開始 –>

四、檢視網頁原始碼

Chrome瀏覽器滑鼠右鍵，點選「檢視網頁原始碼」，可以看到雖然網頁上只有「贊贊小屋」，原始的HTML文件有很多其他內容，正是這些符合統一規範的其他內容，瀏覽器得以一致性的翻譯無數網頁。所以一般所謂的網頁原始碼，其實就是網頁設計者的HTML原始文件。

五、空格空行效果

HTML呈現網頁時有個特性，即使有再多的連續空格或空行，瀏覽器會視為單一空格，所以截圖所示的「這是第一行」和「這是第二行」在網頁上是在同一行，前後差了一個空格，「這裡面有三個空格」也會在網頁上顯示為只有一個空格。

六、<pre></pre>標籤

真的有需要在網頁上顯示兩個以上空格或空行時，可以使用<pre></pre>標籤（preformatted text），它意思是HTML文件設計者已經預計排好版面了，希望瀏覽器以原始排版方式呈現。

七、 及空格

除了<pre></pre>標籤，HTML有一個專門指示換行的 標籤，取自英文break line。先前所介紹的HTML標籤都是<></>成雙成對，標籤中間是想要表達的內容， 是比較特別的單標籤，不用結束，其實也是因為它沒有要表達的內容，不用開始跟結束，另一個常見的單標籤為顯示一條水平線的<hr>。

另外針對像是在內文中需要兩個以上空格的情形，HTML有提供一系列的特殊符號輸入法，正式名稱為字元實體（Character entities），它作用類似編碼對照表，輸入「&」是「&」，「 」是空格，輸入「<」是「<」，輸入「>」是「>」。

這些特殊符號輸入在特定場合是非常關鍵而且必須的，各位讀者可以想見，贊贊小屋在寫這一篇網頁文章，想要顯示 不能直接在鍵盤上打字，必須乖乖使用神奇代碼。

W3C、html及xhtml

本文提到HTML版本和單標籤，其實是個很好的案例可以大致瞭解HTML的發展歷史。除了正統的HTML系列，W3C曾經嘗試導入更為嚴謹的XHTML（Xtensible HyperText Markup Language），主要是因為W3C覺得HTML過於鬆散，以 為例，HTML中 和 都可以，給它加個結束記號 也沒有問題，但是在一絲不茍的XHTML中，只能小寫，一定要加結束記號。從W3C標準制定者的角度而言，這樣才是規範，可是在這之前，已經有千千萬萬的網頁是以HTML鬆散規範設計好的，況且網頁設計師自由習慣了，所以大部份使用者和瀏覽器開發商根本無視於W3C苦口婆心的XHTML，W3C只好默默放棄XHTML計劃。後來2014年W3C發佈了最新一代HTML 5標準，算是回歸了HTML路線，並且向下兼容。

從這個發展角度來看，網頁設計最大的好處是直接第HTML文件第一行宣告<!DOCTYPE html>即可，因為是最新版本有兼容性。讀者有興趣可以參考較早HTML版本的宣告語句，落落長又很難理解。不過話說回來，語言和標準的東西本來不一定有道理，約定成俗和遵守就是了。

每天學習，每天充電：HTML系列文章。

發佈日期： 2020-08-31
文章分類： HTML