裝載HTML 5 Boilerplate 5.0 中文文檔

時間 2019-12-07

標籤裝載 html boilerplate 5.0 中文文檔欄目 HTML 简体版

原文原文鏈接

出處：http://www.w3cplus.com/html5/html5-boilerplate.htmljavascript

本文是根據HTML5 Boilerplate 官方文檔所譯，主要介紹了HTML5 Boilerplate的架構以及涉及到的相關知識。而且詳細介紹瞭如何在基於HTML5 Boilerplate建立本身的項目。
基本目錄結構php

一個基本的 HTML5 Boilerplate 站點，最初的目錄結構就像這樣：css

.
├── css
│ ├── main.css
│ └── normalize.css
├── doc
├── img
├── js
│ ├── main.js
│ ├── plugins.js
│ └── vendor
│ ├── jquery.min.js
│ └── modernizr.min.js
├── .editorconfig
├── .htaccess
├── 404.html
├── apple-touch-icon.png
├── browserconfig.xml
├── index.html
├── humans.txt
├── robots.txt
├── crossdomain.xml
├── favicon.ico
├── tile-wide.png
└── tile.png
下面是有關該目錄的組成及使用方式的總體概述：html

csshtml5

/css 文件夾保存項目中的全部CSS文件。文件夾中包含了一些用於初始化的 CSS，爲開發者在構建項目前提供標準化的開發環境。java

docpython

/doc 文件夾保存 HTML5 Boilerplate 的全部開發文檔。可使用它做爲開發者我的項目的基礎文檔。jquery

jsgit

/js 文件夾保存項目中的全部 js 文件。庫、插件和自定義代碼均可以放在這裏，此外還包括了一些用於初始化的 js，以幫助開發者構建項目。github

.htaccess

該文件默認爲 Apache 的網絡服務器配置信息。更多信息，請參考 Apache Server Configs repository。

若是網站託管的服務器不是 Apache，那麼能夠在 Server Configs項目中找到相關服務器的配置信息。

404.html

一個自定義的404頁面,有益於開發者快速開始構建項目。

browserconfig.xml

該文件包含 IE11 動態瓷貼的設置信息。

更多信息，請參考MSDN。

.editorconfig

該文件的做用在於，幫助和激勵開發者及其團隊，在編輯器和 IDE 之的範。

index.html

該頁面包含默認的 HTML 結構，建議開發者使用它做爲頁面的基礎結構。若是開發者正在使用一個服務器端的模版引擎，那麼可能須要在項目構建之初，將該頁面結構整合入模版引擎。

若是開發者修改了目錄結構，請確保同時更新了 CSS 和 JavaScript 的引用地址。

若是開發者使用了谷歌分析腳本（Google Analytics），請確保網頁底部相關腳本的 Analytics ID 書寫正確。

humans.txt

該文件記錄網站、應用程序的開發團隊及開發技術等信息。

robots.txt

該文件記錄對搜索引擎屏蔽的頁面。

crossdamin.xml

一個用做跨域請求的模板。

Icons

能夠根據須要替換默認的 favicon.ico，tile.png，tile-wide.png 和 Apple Touch Icon。

更多信息，能夠參考 Hans 的這篇文章——HTML5 Boilerplate Favicon and Apple Touch Icon PSD-Template。

HTML 解析

HTML5 Boilerplate 默認提供兩個 html 頁面：

index.html
404.html
index.html

no-js類

no-js 類可讓開發者依據 JavaScript 被啓用（.js）或被禁止(.no-js)兩種狀態，更輕易準確地添加自定義樣式。

使用這個技巧也有助於避免瀏覽器閃爍（FOUC）。

lang 屬性

請認真考慮在 <html> 中添加 lang 屬性，從而對頁面內容所使用的語種加以說明，舉例以下：

<html class="no-js" lang="en">
<title> 和 <meta> 標籤的順序

置頂 <title> 和 <meta> 標籤的順序意義重大，緣由以下：

字符集聲明（<meta charset="utf-8">）：

該聲明必須完整地包含在文檔內容最開始的 1024 字節中。
該聲明應該儘早出現（早於可能被攻擊者利用的任何內容，好比 <title> 元素）,以免 IE 潛在的編碼安全問題。
兼容模式的元標籤（<meta http-equiv="x-ua-compatible" content="ie=edge">）：

除<title> 和其餘 <meta> 標籤外，該標籤必須在其餘標籤以前聲明。

x-ua-compatible

IE 8/9/10 支持文檔兼容模式——該模式會對文檔解析和頁面渲染產生影響。所以，即便網站的訪問者使用了 IE 9 或更高版本的瀏覽器，IE 也有可能不使用最新的渲染引擎，而會使用 IE 5.5 渲染引擎解析你的頁面。

x-ua-compatible 元標籤的詳細內容以下：

若有可能，咱們建議移除 meta 標籤，而只發送 HTTP 響應頭信息。這麼作的緣由是，若是你的網站運行在非標準的端口上， IE 默認會「在兼容性視圖下顯示內部網站」，而此時 meta 標籤就不會起做用了。

若是你正在使用 Apache 做爲網絡服務器，那麼可使用 .htaccess 文件來配置 HTTP 響應頭信息。若是是其餘網絡服務器，能夠點擊這裏查看其餘服務器配置信息。

從 IE 11 開始，文檔模式已經被棄用了。若是你的業務仍然依賴於陳舊的網頁應用，或者你的業務就是爲老版本 IE 設計的，那麼能夠考慮在全公司使用企業版模式（Enterprise Mode）。

移動端視圖

使用 viewport 元標籤時有些許不一樣。更多信息詳見蘋果開發者文檔。HTML5 Boilerplate 初始化了一些簡單的設置，但願在多種使用情境下取得良好平衡。

整站的快捷方式圖標應該存放在根目錄。HTML5 Boilerplate 默認提供了一組圖標（包括 favicon 和 Apple Touch Icon）,爲開發者提供設計參考。

Modernizr

HTML5 Boilerplate 使用了一份自定義的 Modernizr。衆所周知，Modernizr 是一個 JavaScript 庫，做用是確保全部瀏覽器均可以使用 HTML 5 元素（它包含了 HTML 5 shiv），同時還會根據功能檢測的結果爲 html 元素添加不一樣的類名。便於開發者明確某個瀏覽器所支持的 CSS 和 JavaScript 特性。

一般來講，爲了最大程度地減小頁面加載時間，最好的方式是在頁面底部調用 JavaScript，以此避免加載外部腳本的過程阻塞整個網頁的渲染和解析進度。可是，Modernizr 腳本應該在瀏覽器渲染頁面前就加載執行，這樣才能讓瀏覽器正確處理還沒有支持的 HTML5 元素。所以，Modernizr 腳本應該是惟一能夠在文檔頭部加載的 JavaScript 腳本。

膩子腳本

若是你須要在項目中加載膩子腳本（polyfills），那麼你必須確保膩子腳本在其餘 JavaScript 以前加載。若是你正在使用相似cdn.polyfill.io的 ployfill CDN 服務，只需在頁面底部將其放在其餘腳本以前便可。

有些人對於 Modernizr 和膩子腳本的認知存在一些誤區。正確理解 Modernizr 很重要：它只進行功能檢測而不執行功能修復。Modernizr 惟一關注的修復工做，是有關跨瀏覽器方面膩子腳本的冗長列表。

內容區

HTML5 Boilerplate 模版的內容基本是空的。這麼作是有意而爲的，以方便 Boilerplate 模版同時適配網頁（web page）和網頁應用（web app）的開發。

瀏覽器升級提示

Boilerplate 的內容區包含了一條提示，建議 IE 6/7 的用戶安裝最新版本瀏覽器。若是你打算支持 IE 6/7，那麼你須要移除相關代碼。

由 Google CDN 分發的 jQuery

Google CDN 提供的 jQuery ，使用 protocol-independent 路徑放置在了頁面底部。此外還設置了一個本地的 jQuery 版本，從而在 CDN 版本不可用或啓用離線版本的時候調用。

Google CDN 的版本之因此能從衆多的可選版本（好比 jQuery CDN）脫穎而出，一方面是由於它響應速度快，另外一方則是由於它具備最佳的穿透力（獲取的成功率），這有助於提升將庫文件傳輸到用戶瀏覽器緩存的成功率。

雖然 Google CDN 是模版中開發網頁和應用默認的分發網絡，但你可能還須要作進一步的配置。你可使用相似 WebPageTest 的服務和相似 PageSpeed Insights 或 YSlow 的瀏覽器工具測試網站，這有助於幫你測試網站的實際表現，而且指出特定網頁或應用有待優化的地方。

谷歌分析代碼

最後，是一段谷歌分析代碼。谷歌建議將該腳本置於文檔頭部。其考慮以下：若是將該腳本置於網頁頭部，那麼即便頁面未徹底加載，也能夠統計用戶訪問量，而且能夠激發瀏覽器的最大併發鏈接數。

更多信息請參考：

谷歌通用分析代碼優化
Analytics.js 入門
谷歌分析示例和工具
注意：之因此默認包含谷歌分析代碼，是由於谷歌分析是當前最流行的追蹤解決方案之一。然而，它的用法並非一成不變的，你應該查看可替代方案，以選擇最適合本身的。

CSS 解析

模版中默認的 CSS 文件並不依賴 conditional class names，conditional style sheets，或 Modernizr 的表現效果，盡能夠放心按本身的偏好放手去幹。

Normalize.css

爲了確保全部瀏覽器的渲染效果更加一致且符合標準，咱們引入了 Normalize.css——這是一個現代化、緊密結合 HTML 5 的可選方案，能夠用來實現瀏覽器的 CSS 重置。

Normalize.css 本質上並非重置 CSS：

只處理須要標準化修正的樣式
保留瀏覽器已有的默認樣式，而不是全盤替換它們
修正瀏覽器的缺陷和常見性差別
經過細微的改進提升可用性
不干擾調試工具
擁有良好的開發文檔
更多詳情請參考項目網站，或者博客文章。

默認樣式

基於 Normalize.css，編寫了一些基礎的樣式，具體以下：

提供了基礎的排版樣式，以改善文本可讀性
文本高亮時，默認取消 text-shadow
修改了一些元素默認的對齊方式，好比: img，video，fieldset，textarea
修改了老版本瀏覽器的提示符樣式
很是激勵開發者根據實際需求和添加樣式到默認樣式中版。

通用樣式

在基礎樣式以外，咱們也提供了一些通用的輔助樣式。

.hidden

若是你想在視覺上隱藏任何元素，或是對屏幕閱讀器屏蔽某個元素的內容，那麼均可覺得其添加 hidden 樣式。這些元素能夠是後續填充或顯示的，也能夠是使用 JavaScript 隱藏的。

.visuallyhidden

若是你想在視覺上隱藏任何元素，那麼能夠爲其添加 .visuallyhidden 樣式，但此時屏幕閱讀器仍然能夠識別它。

更多信息可參考：

CSS in Action: Invisible Content Just for Screen Reader Users
Hiding content for accessibility
HTML5 Boilerplate - Issue #194
.invisible

若是你想在視覺上隱藏任何元素，或是對屏幕閱讀器屏蔽某個元素的內容，那麼均可覺得其添加 .invisible 樣式，但這種方式並不會影響頁面佈局。

與 hidden 樣式從佈局中移除元素的方式不一樣，invisible 樣式只會讓元素不可見，不會影響其在文檔流中的位置，也不會影響其附近元素的位置。

注意：毫不應該使用上述樣式進行關鍵字堆徹，那必將有損網站在搜索引擎中的排名。

.clearfix

給任何元素添加 clearfix 樣式，能夠確保它始終包裹浮動的子元素。

過去幾年，出現了 clearfix hack 的多種變體，但在這裏，咱們使用 micro clearfix。

媒體查詢

使用 HTML5 Boilerplate 能夠很輕鬆地進行移動優先和響應式設計的開發。但有必要提醒的是，這裏面沒有銀彈（引伸含義：具備極端有效性的解決方法）。

咱們插入了媒體查詢的語句，幫助你構建寬幅和高分辨率的移動樣式。建議根據網站內容調節斷點，而不是簡單參考具體設備的固定尺寸。

若是並不須要注重移動優先原則，那麼你也能夠修改或移除媒體查詢的語句。當視窗寬度肯定下來後，你可使用 max-width 來替代固定尺寸，好比這樣來編寫：@media only screen and (max-width: 480px)。

更多有關移動開發的信息，請看 Mobile Boilerplate。

印刷樣式

最後，咱們提供了一些有用的印刷樣式，以優化印刷流程，同時還能夠提升印刷品的可讀性。

印刷時，這些樣式會：

去除全部背景色，將字體顏色改成黑色，移除 text-shadow——以節省印刷顏料並加快印刷進程。
爲連接添加下劃線並附加 URL 地址——以方便用戶瞭解具體的引用地址。不過有兩種例外：片斷標示符（好比 #href）和 javascript: 僞協議)。
展開縮寫，方便用戶瞭解縮寫的具體含義。
指定了瀏覽器的分頁方式，以及分頁時頁面頂部和底部的最少行數。全部支持該屬性的瀏覽器都會有以下解析：
確保表格在每一個分頁都有表頭（<thead>）
防止塊引用、預格式文本、圖片和表格分頁時被截斷而進入不一樣頁面。
除相關頁面外，確保標題不會出如今其餘頁面
確保 orphans and widows 屬性不會出如今印刷品上。
該印刷樣式與其餘 CSS 樣式被包裹在了一塊兒，以減小 HTTP 請求。一樣，它們應該始終被置於樣式表的尾部，方便覆蓋其餘樣式。

JS 解析

main.js

該文件能夠用來包含或引用網站/應用程序內的 JavaScript 代碼。對於大型項目，可使用一個相似 Require.js 的模塊加載器，以方便加載其餘腳本。

plugins.js

該文件能夠用來包含全部的插件，好比 jQuery 插件和其餘第三方插件。

這裏面的一個技巧是，將 jQuery 插件放入 (function($){ ...})(jQuery); 閉包中，確保它們安全地處於 jQuery 命名空間下。更多信息請參考 jQuery 插件開發文檔。

plugins.js 文件默認保存了一小段代碼，防止瀏覽器禁用 console 而引起的 console 錯誤。若是控制檯方法不可用，那麼這段代碼將確保相應的方法爲空函數值，由此，防止瀏覽器報錯。

vendor

該目錄能夠用來保存全部的第三方庫。最新的 jQuery 和 Modernizr 壓縮版本就默認保存在這裏。

擴展和定製

這裏是優化 HTML5 Boilerplate 主題的一些建議。由於並非全部的特性都適合具體的需求，因此咱們沒有默認導入這些特性。

App Stores

安裝 Chrome 插件

用戶能夠直接從網站安裝 Chrome 應用，前提是該應用已經經過谷歌的網絡管理工具接駁了網站。更多信息詳見內置 Chrome 商店的開發文檔。

不用再向用戶介紹複雜的方式進入 App Store 獲取相關的應用程序了。引用下面的元標籤，將會給用戶提供更友好的方式下載你的 iOS App，或者用來用戶的當前狀態優化網站體驗。

簡而言之，DNS 預加載是告知瀏覽器當前網站域名的一種方法，這樣一來客戶端才能解析擁有該 DNS 的主機，緩存這些網站，當再次須要使用時，請求速度就會更快。

隱式預加載

瀏覽器會自動爲用戶預加載諸多信息。當瀏覽器在 html 中檢測到一個連接標籤時，並不會分配給它瀏覽器當前請求的域名，而是從客戶端系統，根據 IP 地址分配域名。客戶端首先檢測緩存，若是緩存中不存在，則從 DNS 服務器發送請求。這些請求發生在後臺，並不會阻塞頁面渲染進程。

採用這種方式，可讓須要的外部 IP 地址預加載到客戶端緩存中，同時又不會阻塞外部內容的加載。請求越少，則頁面渲染越快。在移動端這種感受會更明顯，由於移動端的延遲更強烈。

禁用隱式預加載

注意：若是你的網站依賴於外部域名的資源，那麼這種作法將會下降加載速度。

顯式預加載

一般，瀏覽器掃描 html 只會預加載外部域名。若是所需資源在當前 html 以外（好比說，須要請求一個遠程服務器的 javascript，或是須要一個存儲了全部網頁信息的 CDN），那麼你就能夠將須要預加載的域名所有列出來。

經常使用預加載連接

Amazon S3:

https://developer.mozilla.org/en-US/docs/Controlling_DNS_prefetching
https://dev.chromium.org/developers/design-documents/dns-prefetching
http://blogs.msdn.com/b/ie/archive/2011/03/17/internet-explorer-9-network-performance-improvements.aspx
http://dayofjs.com/videos/22158462/web-browsers_alex-russel
谷歌通用分析

更多追蹤設置

HTML5 Boilerplate 內部優化過的谷歌通用分析代碼段optimized Google Universal Analytics snippet的內容大體以下：

ga('create', 'UA-XXXXX-X', 'auto'); ga('send', 'pageview');
若是想要進一步修改，能夠查看谷歌的高級設置， Pageview，和 Event 開發文檔。

隱藏 IP 地址

在某些國家，若是兩個司法管轄區之間沒有相同嚴厲的法律，那麼我的信息就不容許在相互間傳遞，好比從德國向歐盟以外傳送。所以，網絡管理員須要確保使用谷歌通用分析時，不能將我的信息從德國傳到美國。開發者能夠在發送 events/pageviews 前，設置 ga('set', 'anonymizeIp', true);。

ga('create', 'UA-XXXXX-X', 'auto');
ga('set', 'anonymizeIp', true);
ga('send', 'pageview');
追蹤 jQuery AJAX 請求

這裏有一篇來自 Jango Steve 的文章，介紹瞭如何在谷歌分析中追蹤 jQuery AJAX 請求。

在 plugins.js 中添加以下代碼：

Log all jQuery AJAX requests to Google Analytics
See: http://www.alfajango.com/blog/track-jquery-ajax-requests-in-google-analytics/
*/

if (typeof ga !== "undefined" && ga !== null) {

$(document).ajaxSend(function(event, xhr, settings){
    ga('send', 'pageview', settings.url);
});

}
追蹤 JavaScript 錯誤

在 ga 定義以後，添加以下函數：

(function(window){
var undefined,

link = function (href) {
      var a = window.document.createElement('a');
      a.href = href;
      return a;
  };

window.onerror = function (message, file, line, column) {

var host = link(file).hostname;
  ga('send', {
    'hitType': 'event',
    'eventCategory': (host == window.location.hostname || host == undefined || host == '' ? '' : 'external ') + 'error',
    'eventAction': message,
    'eventLabel': (file + ' LINE: ' + line + (column ? ' COLUMN: ' + column : '')).trim(),
    'nonInteraction': 1
  });

};
}(window));
追蹤頁面滾動

在 ga 定義以後，添加以下函數：

$(function(){

var isDuplicateScrollEvent,
    scrollTimeStart = new Date,
    $window = $(window),
    $document = $(document),
    scrollPercent;

$window.scroll(function() {
    scrollPercent = Math.round(100 * ($window.height() + $window.scrollTop())/$document.height());
    if (scrollPercent > 90 && !isDuplicateScrollEvent) { //page scrolled to 90%
        isDuplicateScrollEvent = 1;
        ga('send', 'event', 'scroll',
            'Window: ' + $window.height() + 'px; Document: ' + $document.height() + 'px; Time: ' + Math.round((new Date - scrollTimeStart )/1000,1) + 's'
        );
    }
});

});
Internet Explorer

在 IE 10 中提示用戶切換到「桌面模式」

在 Metro 模式下，IE 10 並不支持插件，好比 Flash。若是你的網站須要使用插件，那麼可使用 x-ua-comptible 元標籤，提醒用戶切換到桌面模式。

IE 9+ 固定網站

若是啓用了固定功能，那麼 IE 9 的用戶就能夠將應用程序添加到任務欄或者開始菜單。這一功能也帶來了一系列的工具，方便用戶對元素進行個性化配置。更多信息請參考 documentation on IE9 Pinned Sites。

爲固定的網站命名

若是不使用這條標籤，Windows 將會使用頁面標題做爲應用程序的標題。

如你所知，這裏講的是一個提示工具。當用戶將鼠標懸停在固定網站的圖標上邊時，就會出現一個預覽窗口。

若是當網站固定時須要制定一個特定的 URL（好比首頁），那就在這裏設置。一個好的想法是讓固定網站發送特別編寫的 URL，這樣開發者就能夠追蹤到有多少用戶使用了固定網站，就像下面這樣：

IE 9+ 會自動使用固定網站圖標的顏色，給瀏覽器按鈕添加相應的陰影顏色。除非開發者自定義其餘色彩，同時自定義色彩只能使用顏色關鍵字 (red) 和十六進制色彩 (#ff0000)。

若是固定網站打開時須要使用肯定的大小，那麼能夠在這裏自定義尺寸。該功能只支持靜態的像素尺寸，且最小爲 800x600。

開發者能夠給固定網站添加跳轉列表，當鼠標點擊右鍵時，就能夠快速顯示跳轉列表了。每一個列表項都指向特定的 URL，並擁有本身的圖標（一般爲 16x16 的圖標）。開發者能夠添加任意數量的列表項。

Windows 8 容許開發者提供一張 PNG 瓷貼圖片，也容許自定義瓷貼的背景色。Full details on the IE blog。

爲網站建立一個 144x144 分辨率的圖標，將其填充滿整個畫布，再將其背景色改成透明。
將圖片保存爲 32-bit PNG 格式，同時在不下降畫質的前提下進行優化處理。而後重命名爲任何你但願的名字，好比 metro-tile.png。
能夠在 IE 博文中添加 HTML meta 元素引用瓷貼及其顏色。
Windows 8 固定網站的信息識別

IE 10 能夠經過輪詢網站的 XML 文檔識別主要信息，繼而將其展現在首屏的應用圖標上。這樣即便用戶沒有打開應用，也能夠接受更新的信息。該識別值能夠是數字，也能夠是預約義符號列表中的一個。

Tutorial on IEBlog with link to badge XML schema
Available badge values
<meta name="msapplication-badge" value="frequency=NUMBER_IN_MINUTES;polling-uri=http://www.example.com/path/to/file.xml">
在 IE 10 中禁用點擊時連接的高亮效果

這很是相似於 iOS Safari 中的 -webkit-tap-highlight-color。但與這個 CSS 屬性有所區別的是，這裏使用的是一個 HTML 元標籤，而且是一個布爾值而不是顏色值。使用這個功能就會對全體使用或禁用。

搜索

爲搜索引擎蜘蛛設置 sitemap

瞭解如何建立 sitemap。

根據 FLickr 前社區經理 Heather Champ 的見解，若是你足夠理智，那麼就不該該容許搜索引擎檢索「聯繫」和「投訴」頁面。

Firefox 和 IE 搜索插件

內置搜索功能的網站，能夠考慮使用瀏覽器搜索插件提升性能。「搜索插件」本質上就是一個 XML 文件，它定義了插件於瀏覽器的信息交互行爲。How to make a browser search plugin。

使用polyfills。
經過 microdata 使用 Microformats 優化搜索結果的準確性。
若是你正在構建一個網頁應用，那麼你可能會考慮在 iOS 5+ 中滾動時，經過-webkit-overflow-scrolling: touch 調用本地樣式。
若是想要屏蔽 Chrome 的翻譯提示，或在網頁中的禁用 Google 翻譯，那麼可使用 <meta name="google" value="notranslate">。若是隻是在某一個部分禁用翻譯，那麼能夠添加 class="notranslate"。
若是想在 iOS 中，禁用 Safari 對手機號的自動檢測和格式化功能，那麼可使用 <meta name="format-detection" content="telephone=no">。
能夠經過使用 implementing X-Robots-tag headers，避免開發階段的網站被搜索引擎抓取。
當前的屏幕閱讀器對 HTML5 的支持還不是很好，建議經過使用 accessifyhtml5.js 給 HTML5 元素添加 ARIA roles 加強無障礙使用體驗。
訂閱

RSS

須要一個 RSS 訂閱？請看這裏的教程。learn how to write an RSS feed from scratch。

Atom 和 RSS 很是相似，你可能會很中意它，那麼看看 Atom 的文檔吧。

當其餘網站連接到你的網站時，你的服務器可能會收到通知。該 href 屬性須要包含你在 pingback 上的服務地址。

High-level explanation
Step-by-step example case
PHP pingback service
社交網絡

Facebook 圖譜

當用戶分享當前站點時，開發者能夠設置其分享到 Facebook 或其餘社交網絡的信息內容。如下就是開發者須要的最基本信息。更多具體的內容類型，請參考 Facebook's built-in Open Graph content templates。若是想要使用 Facebook 支持的高級特性，能夠參考Open Graph tutorial。

Twitter 卡貼提供了相似 Facebook 圖譜的功能。實際上，當卡貼不能使用時，Twitter 也會使用相似圖譜的功能。注意，對於這種方式，Twitter 要求開發者在每一個基本域名上都激活卡貼功能。更多格式和應用處理方式，請參考 official Twitter Cards documentation。

Canonical URL

經過在 URL 後面追加參數 # 或 ? 來顯示頁面狀態，對瀏覽器或其餘使用者都會有所幫助。http://www.example.com/cart.html?shopping-cart-open=true 就能夠比 http://www.example.com/cart.html 更精確地定義頁面。

向搜索引擎或該網站的使用者提示「這是本網站的短地址」，這種方式已經不被支持。更多信息請參考 article about shortlinks onthe Microformats wiki。

若是在桌面端和移動端分別使用獨立的 URLs，那麼就要考慮好如何讓搜索引擎算法更好地解析網站的配置信息。

在 HTML 頁面中添加以下注釋會對此有所幫助：

對於桌面端網頁，添加 link rel="alternate" 標籤指向相關的移動端地址，好比 <link rel="alternate" media="only screen and (max-width: 640px)" href="http://m.example.com/page.html" >。
對於移動端網頁，添加 link rel="canonical" 標籤指向相關的桌面端地址，好比 <link rel="canonical" href="http://www.example.com/page.html">。
更多信息請參考：

https://developers.google.com/webmasters/smartphone-sites/details#separateurls
https://developers.google.com/webmasters/smartphone-sites/feature-phones
網頁應用

當網頁應用在 iOS 中被添加到桌面後，可使用以下標籤獲取信息：

使用 apple-mobile-web-app-capable，能夠減小網頁應用對 Chrome 的依賴，並提供 IOS App 的視圖支持。能夠經過使用 apple-mobile-web-app-status-bar-style，控制默認視圖的色彩模式。

Apple Touch Icons

Apple Touch Icons 至關於 iOS 設備的桌面圖標。Apple Touch Icons 的主要尺寸以下：

57×57px – iPhone with @1x display and iPod Touch
72×72px – iPad and iPad mini with @1x display running iOS ≤ 6
76×76px – iPad and iPad mini with @1x display running iOS ≥ 7
114×114px – iPhone with @2x display running iOS ≤ 6
120×120px – iPhone with @2x and @3x display running iOS ≥ 7
144×144px – iPad and iPad mini with @2x display running iOS ≤ 6
152×152px – iPad and iPad mini with @2x display running iOS 7
180×180px – iPad and iPad mini with @2x display running iOS 8
顯示尺寸含義：

@1x - non-Retina
@2x - Retina
@3x - Retina HD
更多有關 iOS 設備的顯示信息，請參考 List of iOS devices display。

大多數狀況下，可使用 180×180px 大小的圖標，命名爲 apple-touch-icon.png 後包含在頁面的 <head> 便可：

Apple Touch Startup Image

除此以外，能夠給 iOS 上的網頁應用添加啓動界面。該功能須要使用 apple-touch-startup-image，並附加相關的圖片連接。因爲 iOS 應用於多種尺寸的屏幕下，因此有必要使用媒體查檢測尺寸，而後再加載圖片。這裏是一個在 retina iPhone 的示例：

Chrome Mobile web apps

Chrome 移動端擁有一個專有的元標籤，用來在桌面安裝網頁應用，該標籤比蘋果的屬性屬性標籤更具備通用性。

.gitignore

HTML5 Boilerplate 引入了一個基礎性的、項目級的 .gitignore。主要用來讓源代碼忽略對項目中特定文件和目錄的管理。在不一樣的開發環境使用不一樣的忽略列表，將會大有裨益。

特定系統和特定編輯器的文件應該使用「global ignore」，從而忽略系統中全部庫對相關文件的依賴。

好比，在但願全局忽略的 HOME 目錄，將以下內容放入 .gitignore 文件。

[core]
excludesfile = ~/.gitignore
更多信息請參考：

More on global ignores: https://help.github.com/articles/ignoring-files
Comprehensive set of ignores on GitHub: https://github.com/github/gitignore
.editorconfig

.editorconfig 文件用來激勵和幫助開發者/開發團隊，在不一樣的編輯器和 IDE 下，定義和維護一致性的代碼風格。

默認狀況下，.editorconfig 包含了一些基本屬性，用來體現代碼風格，可是開發者能夠根據需求自定義相關屬性。

爲了讓編輯器、IDE 更好的使用 .editorconfig 配置文件，開發者須要安裝一個插件。

注意：若是你不須要使用 HTML5 Boilerplate 提供的服務器配置，咱們強烈建議不要容許你服務器使用 .editorconfig 文件，由於該文件會屏蔽敏感信息。

更多信息請參考 EditorConfig project。

服務器配置

HTML5 Boilerplate 爲 Apache HTTP 服務器配置了 .htaccess 文件。若是不是使用 Apache 服務器，建議下載 server configuration 並適配所用服務器。

Servers and Stacks

介紹 WEB 服務器和堆棧的內容就遠遠超過了本文檔的範圍，但這裏有一些經常使用的資料：

Apache HTTP Server
LAMP (Linux, Apache, MySQL, and PHP). Other variants include MAMP, WAMP, or XAMPP.
LAPP uses PostgreSQL instead of MySQL
Nginx
LEMP is similar to the LAMP stack but uses Nginx
IIS
ASP.NET
MEAN (MongoDB, Express, AngularJS, Node.js)
.htaccess

.htaccess（超文本存取）文件就是Apache HTTP 服務器的配置文件。經常使用於：

Rewriting URLs
Controlling cache
Authentication
Server-side includes
Redirects
Gzipping
若是你使用過主流服務器的配置文件（一般稱爲 httpd.conf），那麼你應該熟悉往 .htaccess 文件中添加邏輯處理。好比，部分位於主要的配置文件中。由於 .htaccess 文件會拖慢 Apache，因此一般建議這麼作。

爲了啓用本地的 Apache 模塊，請參考這裏。

.htaccess 主要用於：

容許跨源請求 web 字體
當瀏覽器請求圖片時，使用跨域資源共享頭
將 404.html 做爲 404 錯誤文檔
爲 IE 用戶提供更好的用戶體驗
將 UTF-8 做爲 text/html 和 text/plain 的字符編碼
啓用 URLs 重寫引擎
強制或移除 URL 開頭的 www.
缺乏默認文檔時阻塞對目錄的調用
隔離文件訪問，防止敏感信息泄露
下降了 MIME 類型的安全風險
強制壓縮
通知瀏覽器是否須要從服務器請求特定文件，或者是否須要從瀏覽器緩存獲取特定文件
當使用 .htaccess 時，咱們建議閱讀一次全部的內部註釋。其中有一些是可選的。

更多有關 .htaccess 文件的信息請參考這裏。

注意，.htaccess 的源庫在這裏。

crossdomain.xml

跨域策略文件是一個 XML 文檔，其內容來自 web 客戶端（好比，Adobe Flash Player, Adobe Reader），能夠容許處理來自多個域名的數據：

受權讀取數據
容許客戶端在跨域請求中導入自定義的頭部信息
受權許可基本的套接字鏈接
注意：若是一個客戶端從一個特定的源域名獲取內容，而後該內容請求重定向其餘域名，那麼遠程域名就須要使用跨域策略文件，從而得到源域名的受權，最終容許客戶端繼續處理相關事務。

更多信息請參考 cross-domain policy file specification。

robots.txt

robots.txt 文件用來告知搜索引擎網站中能夠抓取的頁面。

默認狀況下，文件中包含下面兩行信息：

User-agent: * - 如下規則適用於全部的搜索引擎
Disallow: - 網站中的全部頁面均可以被抓取
若是想屏蔽某些頁面，那麼你須要在 Disallow 參數後面作出具體聲明（好比: Disallow: /path）。若是你想屏蔽全部內容，只需 Disallow: /。

/robots.txt 並非用來訪問控制的，因此請不要這樣使用。能夠將其視爲一個「禁止通行」標誌，而不是一扇鎖上的門。經過 robots.txt 文件屏蔽 URLs，即便未被抓取仍有可能被定位，並且 robots.txt 文件中的內容也能夠被任何人訪問到，這樣就間接透漏了私有內容的位置。因此，若是想屏蔽訪問私人信息，建議使用合理的驗證機制。

關於 /robots.txt 文件的更多信息請參考：

robotstxt.org
How Google handles the robots.txt file
browserconfig.xml

用戶在 Windows 8.1 啓動界面固定的應用圖標，能夠經過 browserconfig.xml 文件進行個性化定製。在該文件中，能夠自定義瓷貼顏色、圖片，甚至是動態瓷貼。

默認狀況下，該文件指向兩個既有的瓷貼圖片：

tile.png (558x558px): used for Small, Medium and Large tiles.若有必要該圖片能夠自動修改尺寸。
tile-wide.png (558x270px): user for Wide tiles.
注意，當收藏網站時，IE 11 將收藏夾中使用相同的圖片。

有關 browserconfig.xml 文件的跟多信息，請參考 MSDN。

FAQ

爲何 jQuery 的連接沒有加http？

這是由於使用了 protocol-relative URLs。

注意:若是你嘗試直接在瀏覽器中預覽本地網頁，那麼瀏覽器將沒法加載資源，特別是使用 protocol-relative URLs，由於它會嘗試從本地文件系統獲取相關資源。建議使用本地的 HTTP 服務器，或者是容許在線預覽網頁的文件託管服務（好比Dropbox）來測試網頁。

創建本地 HTTP 服務器可使用多種短命令：

PHP 5.4.0+ 使用 php -S localhost:8080 命令從本地目錄啓動並運行。
Python 2.x 使用 python -m SimpleHTTPServer 命令從本地目錄啓動並運行。
Python 3.x 使用 python -m http.server 命令從本地目錄啓動並運行。
Ruby 1.9.2+ 使用 ruby -run -ehttpd . -p8080 命令從本地目錄啓動並運行。
Node.js 使用 static -p 8080 或 http-server -p 8080 命令安裝和啓動服務器。
爲何不從 Google CDN 自動加載最新版本的 jQuery？

首先，Google CDN 所指向的 jQuery 文件已再也不更新，而且將鎖定在1.11.1版本，以防止新版本變更引起的網頁腳本失效。

其次，一般來講，更新版本應該是個慎重的決定！網頁中不該該一直引用最新版本的緣由以下：

可能與現有插件、代碼不兼容
與固定引用某一版本的方式相比，一直引用最新版本將會減小本地緩存時間，這意味着用戶沒法受益於長週期緩存帶來的便利。
爲何將 Google Analytics 代碼置於網頁底部？而 Google 則建議將其置於<head>。

將其置於<head>的主要優點是，在頁面加載完成以前，即便用戶離開當前網頁，也能夠得到頁面瀏覽量（PV）。然而，將其置於頁面底部則有助於改善總體性能。

如何在 HTML5 Boilerplate 中整合 Bootstrap。

一個簡單的方法是使用 Initializr，並建立自定義的構建環境——在其中同時包含 HTML5 Boilerplate 和 Bootstrap。

更多信息請參考文章： HTML5 Boilerplate 和 Bootstrap 的互相整合。

每當 HTML5 Boilerplate 釋放出新版本，開發者是否必須更新網站？

徹底沒有必要！這就像是房子蓋完以後，雖然須要時不時的修護一下，但一般不必從新打地基。固然，若是想嘗試新版本的變更，也是徹底能夠的，但最好正確權衡這麼作的成本和收穫。

哪裏能夠獲取技術支持？

請使用 StackOverflow 尋求幫助。

本文根據HTML5 Boilerplate官方文檔所譯，整個譯文帶有咱們本身的理解與思想，若是譯得很差或有不對之處還請同行朋友指點。如需轉載此譯文，需註明英文出處：https://github.com/h5bp/html5-boilerplate/blob/master/src/doc/html.md。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。