頭

HEAD

文件類型

為每個HTML 頁面的第一行新增標準模式（standard mode）的聲明，這樣能夠確保在每個瀏覽器中擁有一致的表現。

<!DOCTYPE html>

語言屬性

為什麼要用lang="zh-cmn-Hans" 而不是我們通常寫的lang="zh-CN" 呢? 請參考知乎上的討論: 網頁頭部的聲明應該是用lang="zh" 還是lang="zh-cn"？

<!-- 中文 -->
<html lang="zh-Hans">

<!-- 简体中文 -->
<html lang="zh-cmn-Hans">

<!-- 繁体中文 -->
<html lang="zh-cmn-Hant">

<!-- English -->
<html lang="en">

字元編碼

以無BOM 的utf-8 編碼作為檔案格式;
#指定字元編碼的meta 必須是head 的第一個直接子元素；

<html>
  <head>
    <meta charset="utf-8">
    ......
  </head>
  <body>
    ......
  </body>
</html>

IE 相容模式

優先使用最新版本的IE 和Chrome 核心

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

SEO 最佳化

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <!-- SEO -->
    <title>Style Guide</title>
    <meta name="keywords" content="your keywords">
    <meta name="description" content="your description">
    <meta name="author" content="author,email address">
</head>

viewport

viewport: 一般指的是瀏覽器視窗內容區的大小，不包含工具列、選項卡等內容；
width:瀏覽器寬度，輸出裝置中的頁面可見區域寬度；
device-width: 裝置解析度寬度，輸出裝置的螢幕可見寬度；
initial-scale: 初始縮放比例；
maximum-scale: 最大縮放比例；

#為行動裝置最佳化，設定可見區域的寬度和初始縮放比例。

<meta name="viewport" content="width=device-width, initial-scale=1.0">

iOS 圖示

apple-touch-icon 圖片自動處理成圓角和高光等效果;
apple-touch-icon-precomposed 禁止系統自動新增效果，直接顯示設計原圖;

<!-- iPhone 和 iTouch，默认 57x57 像素，必须有 -->
<link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-57x57-precomposed.png">

<!-- iPad，72x72 像素，可以没有，但推荐有 -->
<link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-72x72-precomposed.png" sizes="72x72">

<!-- Retina iPhone 和 Retina iTouch，114x114 像素，可以没有，但推荐有 -->
<link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-114x114-precomposed.png" sizes="114x114">

<!-- Retina iPad，144x144 像素，可以没有，但推荐有 -->
<link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-144x144-precomposed.png" sizes="144x144">

favicon

在未指定favicon 時，大多數瀏覽器會要求Web Server 根目錄下的favicon.ico 。為了確保favicon 可訪問，避免404，必須遵循以下兩種方法之一：

在Web Server 根目錄放置favicon.ico 檔案；
使用link 指定favicon；

<link rel="shortcut icon" href="path/to/favicon.ico">

HEAD 範本

<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>Style Guide</title>
    <meta name="description" content="不超过150个字符">
    <meta name="keywords" content="">
    <meta name="author" content="name, email@gmail.com">

    <!-- 为移动设备添加 viewport -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- iOS 图标 -->
    <link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-57x57-precomposed.png">

    <link rel="alternate" type="application/rss+xml" title="RSS" href="/rss.xml" />
    <link rel="shortcut icon" href="path/to/favicon.ico">
</head>

頭