如果你好一陣子沒有關心網頁相關技術,那麼看到下面的code, 可能會揉揉眼睛說:這樣也能跑?

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset=utf-8>
    <title>page title</title>
    <!--<link href="style.css" rel="stylesheet"></link>-->
    <!--<script src="script.js"></script>-->
    <!--<style></style>-->
</head>
<body>
  <!-- content -->
<!--<script type="text/javascript"></script>-->
</body>
</html> 
只要有瀏覽器,大家都可以試著寫網頁。
我們分行來看看上面的網頁程式碼:

主要架構


 <!DOCTYPE html>

HTML5的格式宣告,注意「DOCTYPE」要用大寫才有向前相容喔(請參考HTML5 Hacks 1)。


<html lang="en">
</html>

HTML主標籤,所有HTML頁面的內容都要放在裡面。

Header參數

<head></head>

HTML檔案標頭, 一些頁面相關資訊。

<body></body>

HTML內容, 顯示給使用者看的頁面內容。

Header參數


以下是放在header標籤中的參數:

<meta charset=utf-8>

聲明這個網頁是以UTF-8格式編碼,多數瀏覽器只在前512 bytes查看文字編碼格式,所以這個標籤務必放在Header標籤的最前頭。


<title>page title</title>

頁面標題,通常會顯示在瀏覽器標籤頁上。


<link href="style.css" rel="stylesheet"></link>
<script src="script.js"></script>

透過 link 和 script 標籤,我們可以連結到其他CSS或Javascript檔案。


 <style></style>

style標籤裡可以放CSS定義。



Body參數


以下是放在body標籤中的參數:


<!-- content -->

HTML的註解標籤,在「<!--」和「-->」標籤之間的內容不做解析。


<script type="text/javascript"></script>

當瀏覽器讀取HTML頁面的時候,會先將headers標籤中定義的CSS或Javascript檔案載入後,才會顯示網頁。
因此因為效能的緣故,現在新的網頁寫法建議將比較不急著在載入網頁時立即執行的 script 標籤,都放在「body」標籤中。

上面提到的HTML5基本格式只有講到「語義」(Semantic)方面的改進,而所謂的HTML5其實是包含HTML、CSS、Javascript、瀏覽器的全方位改進,更多的資訊可參考 Mozilla Developer Network

參考: A Minimal HTML Document