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 以等寬文字顯示





張貼者： 於
標籤：

沒有留言 :

張貼留言

訂閱： 張貼留言 ( Atom )