2013年9月22日 星期日

HTML5 範本

昨天終於把網頁版機器人設定程式寫完, 這次因為公司電腦都要升級 WIN7, 所以大膽改用 HTML5 來寫. 趁這機會把 HTML5 做個大整理, 準備好好測試一番.
首先要準備 HTML5 手寫範本, HTML5 為了解決用一堆外掛的亂象, 決定一統江湖, 所以它的範本很乾淨, 沒什麼雜七雜八的東西, 不像 HTML4.01 跟 XHTML1.0 囉哩八嗦一大堆. 其格式規範整理如下 :

  1. 要宣告 DOCTYPE :
    第一行一定是 $lt;!DOCTYPE html> (大小寫不拘)
  2. 要存檔為 utf-8 格式 :
    除了 head 內要宣告 $lt;meta charset="utf-8"> 外, 不管用哪一種編輯器, 存檔時一定要選擇 utf-8 格式.
  3. 預設使用 CSS3 與 Javascript :
    因此使用 <style> 定義樣式或用 <link> 匯入外部樣式檔時都不用再宣告 type="text/css"; 同樣地, 使用 Javascript 時也不用再宣告 type="text/javascript"
  4. 屬性值如果沒有空格, 雙引號, 單引號, 小於符號, 右斜線, 等於符號, 那麼就不需要用引號括起來, 例如 :
    <img src=logo.jpg>

更妙的的是, 它甚至可以不用 head, body, html 這三個標籤, 所以最小的 HTML 範本如下 :

最小的 HTML5 範本

<!DOCTYPE html>
<meta charset=utf-8>
<title></title>
<script src=myjs.js></script>

不過實際上, 為了向下相容 HTML4, 我們通常還是保留 head, body, html 架構 (特別是 IE 8 以下一定要有 body 元素) :

與 HTML4 相容的範本

<!DOCTYPE html>
<html lang="zh-tw">
<head>
  <title></title>
  <meta charset="utf-8">
  <style type="text/css">
  </style>
</head>
<body>
  <script type="text/javascript">
  </script>
</body>
</html>

還有為了跟那個不成材的 IE 妥協, 替它擦屁股, 補上它不認識的新標籤, 得從 Google CDN 匯入 html5shiv 函式如下, 這樣在包含 IE8 以下的微軟瀏覽器才能大致 OK :

從 Google CDN 匯入 html5shiv 的範本

<!DOCTYPE html>
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<html>
<head>
  <meta charset="utf-8">  
  <title></title>
  <style>
    article,aside,figure,figcaption,footer,header,hgroup,menu,nav,section {display:block;}
  </style>
</head>
<body>
  <script>
  </script>
</body>
</html>

經我在家中 WIN8 電腦測試, 微軟 IE10 已經幡然醒悟, 連 BORDER-RADIUS 也支援了, 浪子回頭金不換啊! (但已白了少年頭, 市場早已被 Chrome 與 Firefox 奪去).

雖然 HTML5 強調向下相容, 但是某些標籤被認為已不合時宜而遭廢除, 在撰寫 HTML5 文件時要注意不可再使用下列這些標籤 :

 廢除的標籤 功能
 acronym 指定首字母
 applet 指定 Java Applet
 basefont 指定基本文字尺寸
 big 文字大一號顯示
 center 置中對齊
 dir 指定目錄清單
 font 指定字型
 frame 指定框架內容
 frameset 構成框架
 isindex 文字框的建立
 noframes 指定無框架支援的替代內容
 strike 顯示刪除線
 tt 以等寬文字顯示





於

沒有留言:

張貼留言