[心得] HTML主要結構語法：html、head、body

看板Web_Design作者moodyblue時間4年前 (2020/09/16 17:37)推噓1(1推 0噓 0→)

留言1則, 1人參與討論串1/1

HTML主要結構語法：<!DOCTYPE html>、<html>、<head> 、<body>、註解等網誌圖文版： https://www.b88104069.com/archives/4620 本文介紹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.多行註解：  B.單行註解：  四、網頁原始碼 Chrome瀏覽器滑鼠右鍵，點選「檢視網頁原始碼」，可以看到雖然網頁上只有「贊贊小屋」，原始的HTML文件有很多其他內容，正是這些符合統一規範的其他內容，瀏覽器得以一致性的翻譯無數網頁。所以一般所謂的網頁原始碼，其實就是網頁設計者的HTML原始文件。五、空格及空行 HTML呈現網頁時有個特性，即使有再多的連續空格或空行，瀏覽器會視為單一空格，所以截圖所示的「這是第一行」和「這是第二行」在網頁上是在同一行，前後差了一個空格，「這裡面有三個空格」也會在網頁上顯示為只有一個空格。六、<pre></pre>標籤真的有需要在網頁上顯示兩個以上空格或空行時，可以使用<pre></pre>標籤（ preformatted text），它意思是HTML文件設計者已經預計排好版面了，希望瀏覽器以原始排版方式呈現。七、換行 及空格  除了<pre></pre>標籤，HTML有一個專門指示換行的 標籤，取自英文break line。先前所介紹的HTML標籤都是<></>成雙成對，標籤中間是想要表達的內容， 是比較特別的單標籤，不用結束，其實也是因為它沒有要表達的內容，不用開始跟結束，另一個常見的單標籤為顯示一條水平線的<hr>。另外針對像是在內文中需要兩個以上空格的情形，HTML有提供一系列的特殊符號輸入法，正式名稱為字元實體（Character entities），它作用類似編碼對照表，輸入「&」是「&」，「 」是空格，輸入「<」是「<」，輸入「>」是「>」。這些特殊符號輸入在特定場合是非常關鍵而且必須的，各位讀者可以想見，贊贊小屋在寫這一篇網頁文章，想要顯示 不能直接在鍵盤上打字，必須乖乖使用神奇代碼。 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版本的宣告語句，落落長又很難理解。不過話說回來，語言和標準的東西本來不一定有道理，約定成俗和遵守就是了。延伸閱讀： Windows記事本也能設計網頁，寫下第一行HTML程式碼 https://www.b88104069.com/archives/4606 -- 周末，我們繼續Excel：精華區=>21.心得=>5.其他=>3.office 會計人的Excel小教室： https://www.facebook.com/acctexcel -- ※ 發信站: 批踢踢實業坊(ptt.cc), 來自: 60.250.152.209 (臺灣) ※ 文章網址: https://www.ptt.cc/bbs/Web_Design/M.1600249045.A.0D6.html