贊贊小屋

HTML主要結構語法:<!DOCTYPE html>、<html>、<head> 、<body>、註解等

本文介紹HTML網頁文件主要結構,從宣告版本<!DOCTYPE html>、<html></html>、<head> </head>、到<body></body>,同時說明如何添加註解,以<pre></pre>標籤及<br>顯示原始排版,最後補充顯示空格特殊符號&nbsp;。

一、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主要結構語法:<!DOCTYPE html>、<html>、<head> 、<body>、註解等 CSS 第1張

二、分行及縮排

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

HTML主要結構語法:<!DOCTYPE html>、<html>、<head> 、<body>、註解等 CSS 第2張

三、HTML註解

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

這裡用了兩種形式:

A.多行註解:

<!–
Document Type HTML5標準
一定要寫在第一行
–>

B.單行註解:

<!– Html文件開始 –>

HTML主要結構語法:<!DOCTYPE html>、<html>、<head> 、<body>、註解等 CSS 第3張

四、網頁原始碼

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

HTML主要結構語法:<!DOCTYPE html>、<html>、<head> 、<body>、註解等 CSS 第4張

五、空格及空行

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

HTML主要結構語法:<!DOCTYPE html>、<html>、<head> 、<body>、註解等 CSS 第5張

六、<pre></pre>標籤

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

HTML主要結構語法:<!DOCTYPE html>、<html>、<head> 、<body>、註解等 CSS 第6張

七、換行<br>及空格&nbsp;

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

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

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

HTML主要結構語法:<!DOCTYPE html>、<html>、<head> 、<body>、註解等 CSS 第7張

HTML版本、單標籤、XHTML

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

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

本網站所有內容皆受版權保護,网站备案编号:苏ICP备14051307号-1