《HTML5觸控介面設計與開發》——2.3　奠定基礎的標籤

非同步社群發表於2017-05-02
HTML

本節書摘來自非同步社群《HTML5觸控介面設計與開發》一書中的第2章，第2.3節,作者： 【美】Stephen Woods 更多章節內容可以訪問雲棲社群“非同步社群”公眾號檢視。

2.3　奠定基礎的 < head >標籤

HTML5觸控介面設計與開發
程式碼清單2.2展示了加州鳥類網站的head標籤
http-equiv 元資訊
http-equiv 元資訊告訴瀏覽器如何去做，等效於設定了HTTP 報頭。這讓你可以向瀏覽器傳達一些原本由伺服器告訴它的內容。當你不能控制伺服器時，它特別有用。例如，如果你想設定一個快取頭，但又不能控制伺服器，你可以使用http-equiv屬性：

<meta http-equiv="expires" content="Wed, 05 August 2020 00:00:00 GMT">.

請注意，伺服器報頭的優先順序高，所以只能設定或取消某一報頭項，不能覆蓋伺服器的報頭項。

程式碼清單 2.2　標籤

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width">
  <title>Birds of California</title>
  <link rel="stylesheet" href="reset.css" type="text/css"
media="screen" charset="utf-8">
  <link rel="stylesheet" href="birds.css" type="text/css" media="screen"
   → charset="utf-8">
</head>

我從HTML5的doctype開始，然後指定字符集為UTF-8。指定字符集很重要，這不僅能確保文件顯示正確，也可以避免可能的UTF-7字符集的安全漏洞。通常情況下，伺服器會傳送一個Content-Type 的報頭，但為了以防萬一，我也同時在HTML中指定它。

我用了一個http-equiv屬性設定非標準的“X-UA-Compatible”報頭。它的值是chrome=1和IE= edge，如果IE使用者安裝了Chrome Frame外掛，則可以使用這個外掛；如果沒有安裝，則使用IE瀏覽器最新、最好的引擎呈現，而不是以傳統模式呈現。

下一個元資訊稱為viewport。它目前僅用於觸控裝置，將它設定正確是非常重要的。


相關文章