[HTML5 Boilerplate 主页](https://html5boilerplate.com) | [目录](https://steemit.com/cn/@syt/2bvkvf-html5-boilerplate) # 扩展和定制HTML5 Boilerplate 这是一些有用的建议，使你的项目与HTML5 Boilerplate更好地工作，默认情况下，我们不希望全部包含它，因为并非一切都符合每个人的需要。 * App Stores * DNS预读取 * Google Universal Analytics * Internet Explorer](#internet-explorer * 其它事项 * 新闻订阅 * 搜索 * 社交网络 * URLs](#urls * Web Apps](#web-apps ## App Stores ### iOS 6+ Safari里的智能应用横幅停止在App Store中用巨大的模态框做广告打扰到所有人。包含以下[meta标签](https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariWebContent/PromotingAppswithAppBanners/PromotingAppswithAppBanners.html)将非侵入性的允许使用该选项下载你的iOS应用程序，或者打开关于用户在网站上的当前状态的一些数据。 ```html ``` ## DNS预读取简单说，DNS预读取是一种通知浏览器网站上引用的域名的方法，以便客户端可以解析这些主机的DNS，缓存它们，以及适时使用它们，有着更快的请求速度。 ### 后台预读取浏览器自动为你完成了许多预读取。当浏览器在你的html中，遇到不与浏览器请求的当前地址共享相同域名的锚点时，浏览器从客户端系统请求此新域的IP地址。客户端首先检查缓存，找不到缓存的话，从DNS服务器发出请求。这些请求发生在后台，并不会阻碍页面的渲染。这样做的目的是当最终请求外部IP地址时，它已经在客户端缓存中，并且不会阻止外部内容的加载。更少的请求会导致更快的页面加载。在DNS延迟可能更大的移动平台上，这种感觉会更加明显。 #### 禁止后台预读取 ```html ``` 即使使用X-DNS-Prefetch-Control meta标签（或http头），浏览器仍然会预读取任何明确的dns预读取链接。 **_警告：_** 如果你依赖外部域的资源，那么网站的速度可能会变慢。 ### 显式预读取通常，浏览器只扫描外部域的HTML。如果HTML不包含你的资源（例如，对远程服务器或CDN的JavaScript请求，其中托管可能不存在于你网站的每个页面上的内容），那么你可以显式地添加一个域名来预读取。 ```html ``` 你可以根据需要使用更多的预读取，但如果将它们全部放在[Meta字符集](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta#attr-charset)元素之后（应该直接放在在`head`的顶部），那么这是最好的，因为浏览器可以尽快对其进行处理。 #### 常见预读取链接 Amazon S3: ```html ``` Google APIs: ```html ``` Microsoft Ajax内容交付网络： ```html ``` ### 进一步了解DNS预读取 * https://developer.mozilla.org/en-US/docs/Controlling_DNS_prefetching * https://dev.chromium.org/developers/design-documents/dns-prefetching * https://blogs.msdn.microsoft.com/ie/2011/03/17/internet-explorer-9-network-performance-improvements/ * http://dayofjs.com/videos/22158462/web-browsers_alex-russel ## Google Universal Analytics ### 更多跟踪设置 HTML5 Boilerplate[优化过的Google Universal Analytics片段](https://mathiasbynens.be/notes/async-analytics-snippet#universal-analytics)包含以下内容： ```js ga('create', 'UA-XXXXX-X', 'auto'); ga('send', 'pageview'); ``` 进一步定制，查看Google的[高级设置](https://developers.google.com/analytics/devguides/collection/analyticsjs/advanced)、[浏览量](https://developers.google.com/analytics/devguides/collection/analyticsjs/pages)和[事件](https://developers.google.com/analytics/devguides/collection/analyticsjs/events)文档。 ### 匿名IP地址在一些国家，在没有类似严格法律的司法管辖区之外，不得转移任何个人资料（即从德国到欧盟以外）。因此，使用Google Universal Analytics的网站管理员可能必须确保没有个人（可跟踪）的数据被传输到美国。你可以在发送任何事件/浏览量之前，通过使用[`ga('set'、'anonymizeIp'、 true);`参数](https://developers.google.com/analytics/devguides/collection/analyticsjs/advanced#anonymizeip)来防止数据被跟踪。使用时看起来像这样： ```js ga('create', 'UA-XXXXX-X', 'auto'); ga('set', 'anonymizeIp', true); ga('send', 'pageview'); ``` ### 跟踪Google Analytics中的jQuery AJAX请求 @JangoSteve的一篇文章解释了如何[跟踪Google Analytics中的jQuery AJAX请求](https://www.alfajango.com/blog/track-jquery-ajax-requests-in-google-analytics/)。将其添加到`plugins.js`中： ```js /* * Log all jQuery AJAX requests to Google Analytics * See: https://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); }); } ``` ### 跟踪Google Analytics中的JavaScript错误在`ga`定义后添加此函数： ```js (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`定义后添加此函数： ```js $(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 ### 提示用户在IE10 Metro中切换到”桌面模式“ IE10在Metro模式下不支持插件，比如Flash。如果你的网站需要插件，你可以通过设置`x-ua-compatible`meta元素，提示用户切换到桌面模式。 ```html ``` 这是H5BP默认的`x-ua-compatible`值： ```html ``` 你可以找到更多的信息，在[微软的IEBlog发布了关于IE10 Metro模式下插件使用的提示](https://blogs.msdn.microsoft.com/ie/2012/01/31/web-sites-and-a-plug-in-free-web/)的文章中。 ### IE固定网站（IE9+）开启你的应用程序锁定将允许IE9（及以上）用户将其添加到Windows任务栏和开始菜单中。它带来了一系列新的工具，你可以使用以下元素轻松地配置。查看[IE9固定网站的文档](https://msdn.microsoft.com/en-us/library/gg131029.aspx)了解更多。 ### 为Windows的固定站点命名如果不使用这条规则，Windows将使用页面标题作为你的应用程序的名称。 ```html ``` ### 给你的固定网站一个提示你知道 —— 一个提示。当用户将鼠标移到固定网站的图标上时，将出现一个小文本框。 ```html ``` ### 为你的固定网站设置默认页面如果固定的网站应该导航到特定URL（如主页），在这里输入。一个想法是将其发送到一个特殊的URL，这样，你可以跟踪固定网站用户的数量，像这样： `https://www.example.com/index.html?pinned=true` ```html ``` ### Recolor IE's controls manually for a Pinned Site 手动更改IE固定网站的控件颜色 IE9+浏览器将自动使用你的固定网站图标的整体颜色来覆盖其浏览器按钮颜色，除非你在这里给它另一种颜色，只能使用命名颜色（`red`）或十六进制颜色（`＃ff0000`）。 ```html ``` ### 手动设置固定网站的窗口大小如果固定网站应该在某个大小窗口打开，你可以在此处指定尺寸。它只支持固定像素尺寸，最低800x600。 ```html ``` ### 固定网站的跳转列表当右键单击固定网站的图标时将显示跳转列表。每个任务跳转到指定的URL，并获得自己的迷你图标（基本上是一个16x16的.ICO图标）。你可以根据需要任意添加。 ```html ``` ### （Windows 8）固定网站的高品质视觉效果 Windows 8添加了允许你使用PNG图片，并指定图片背景颜色的能力。请参考[IE博客上的全部细节](https://blogs.msdn.microsoft.com/ie/2012/06/08/high-quality-visuals-for-pinned-sites-in-windows-8/)。 * 为你的网站图标创建一个144x144的图像，填充所有画布，并使用透明背景。 * 将此图像保存为32位的PNG图片，并优化它，这将不会降低颜色深度。你可以任意命名（比如，`metro-tile.png`）。 * 要引用磁贴及其颜色，请添加上面IE博客文章中描述的HTML`meta`标签。 ### （Windows 8）固定网站的徽章 IE10将轮询一个XML文档以获取徽章信息，并在开始菜单的应用程序磁贴上展示。即使你的应用程序没有正在运行，用户也可以收到这些徽章的更新。徽章的值可以是数字，也可以是预定义的字形列表之一。 * [IEBlog上的徽章XML教程](https://blogs.msdn.microsoft.com/ie/2012/04/03/pinned-sites-in-windows-8/) * [有用的徽章值](https://msdn.microsoft.com/en-us/library/ie/br212849.aspx) ```html ``` ### IE10禁止被点击的链接突出显示与iOS Safari中[-webkit-tap-highlight-color](https://davidwalsh.name/mobile-highlight-color)的类似。不同的是CSS属性，它是一个HTML meta标签，并且它的值是布尔值，而不是颜色值。要么有值，要么没值。 ```html ``` 您可以阅读[Microsoft关于IE10适应面向WebKit的应用程序的文档](https://blogs.windows.com/buildingapps/2012/11/15/adapting-your-webkit-optimized-site-for-internet-explorer-10/)，了解这个有用的元素和更多技术。 ## 搜索 ### 搜索引擎直接搜索你的站点地图创建[站点地图](https://www.sitemaps.org/protocol.html)后将其提交到搜索引擎工具： * [Google](https://www.google.com/webmasters/tools/sitemap-list) * [Bing](https://www.bing.com/toolbox/webmaster) * [Yandex](https://webmaster.yandex.com/) * [Baidu](https://zhanzhang.baidu.com/) 或者在robots.txt文件的任何位置插入以下行，指定你的站点地图的路径： ``` Sitemap: https://example.com/sitemap_location.xml ``` ### 禁止搜索引擎索引页面据Flickr前社区经理Heather Champ介绍，如果你头脑清晰的话，不应该允许搜索引擎索引你的“联系我们”或“投诉”页面。这是一个以HTML为中心的实现方式。 ```html ``` **_警告:_** 不要包含在搜索引擎中可能出现的页面。 ### Firefox和IE的搜索插件浏览器搜索插件应强烈考虑具有站内搜索功能的网站。一个“搜索插件”是一个XML文件，用于定义插件在浏览器中的行为。[如何创建一个浏览器搜索插件](https://www.google.com/search?ie=UTF-8&q=how+to+make+browser+search+plugin)。 ```html ``` ## 其它事项 * 使用[polyfills](https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills)。 * 使用[微格式](http://microformats.org/wiki/Main_Page) (通过[微数据](http://microformats.org/wiki/microdata))获得最佳搜索结果[可见性](https://webmasters.googleblog.com/2009/05/introducing-rich-snippets.html)。 * 如果你正在构建一个web app，可以使用`-webkit-overflow-scrolling: touch`获得ios 5+的[原生滚动效果(http://www.johanbrook.com/articles/native-style-momentum-scrolling-to-arrive-in-ios-5/)。 * 如果要禁用Chrome中的翻译提示，或阻止Google翻译你的网页，请使用[``](https://support.google.com/translate/?hl=en#2641276)。要禁止翻译网页的特定部分，则添加[`class="notranslate"`](https://support.google.com/translate/?hl=en#2641276)。 * 如果要在iOS上的Safari中禁用自动检测并格式化可能的电话号码，使用[``](https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/MetaTags.html/#//apple_ref/doc/uid/TP40008193-SW5)。 * 避免在开发阶段网站通过[实施X-Robots-tag头](https://github.com/h5bp/html5-boilerplate/issues/804)泄露到SERPs（搜索引擎结果页）中。 ## 新闻订阅 ### RSS 有RSS订阅？像下面一样在链接它。想要[从头开始学习如何编写RSS订阅](http://www.rssboard.org/rss-specification)？ ```html ``` ### Atom Atom类似于RSS，你可能更喜欢使用它。[看看Atom的所有内容](http://www.atomenabled.org/developers/syndication/)。 ```html ``` ### Pingbacks 当其它站点链接到你的服务器时，你的服务器可能会被通知。href属性应该包含你的pingback服务的位置。 ```html ``` * 高层次的解释： https://codex.wordpress.org/Introduction_to_Blogging#Pingbacks * 从头一步一步开始的例子： http://www.hixie.ch/specs/pingback/pingback-1.0#TOC5 * PHP pingback服务： https://web.archive.org/web/20131211032834/http://blog.perplexedlabs.com/2009/07/15/xmlrpc-pingbacks-using-php/ ## 社交网络 ### Facebook Open Graph数据你可以控制Facebook和其他用户在分享你的网站时显示的信息。以下只是你可能需要的最基本的数据点。对于特定的内容类型（包括 “网站”），查看[Facebook的内置Open Graph内容模板](https://developers.facebook.com/docs/opengraph/objects/builtin/)。通过[Open Graph教程](https://developers.facebook.com/docs/opengraph/tutorial/)，充分利用Facebook对复杂数据和活动的支持。参考Open Graph的标记和属性，你可以查看[Facebook的Open Graph 协议参考](http://ogp.me/)。最后，你可以使用[Facebook对象调试器](https://developers.facebook.com/tools/debug/)验证您的标记（需要注册Facebook）。 ```html ``` ### Twitter卡片 Twitter提供了与Open Graph目地类似的代码段规范。事实上，当卡片不可用时，Twitter将使用Open Graph。请注意，在撰写本文时，Twitter要求应用程序开发人员在每个域的基础上激活卡片。你可以在[Twitter官方卡片文档](https://dev.twitter.com/docs/cards)中阅读有关各种片段格式和应用程序进程的更多信息。你可以使用[卡片验证器](https://cards-dev.twitter.com/validator)（需要注册Twitter）验证你的标记。 ```html ``` ### Google+ / Schema.org Google也提供了一个与Facebook Open Graph或Twitter卡片类似目的的代码段规范。它可以帮助你控制在Google+上显示的信息，这个元数据是[schema.org的微数据词汇](https://schema.org/)的一个子集，其中涵盖了许多其他可以将你的页面内容描述给搜索引擎的模式。因此，这个元数据对于SEO而言更为通用，特别是对于Google的搜索引擎,虽然这个词汇也被微软、Pinterest或Yandex所使用。可以使用[结构化数据测试工具](https://developers.google.com/structured-data/testing-tool/)验证你的标记。此外，请注意，此标记需要将属性添加到顶部的`html`标签。 ```html ``` ## URLs ### 典型URL 当`＃`或`？`之后的参数用于控制页面的显示状态时，向搜索引擎和其他人发出“将此URL用于此页面！”的信号是有用的。`https://www.example.com/cart.html?shopping-cart-open=true`可以作为更干净，更准确的`https://www.example.com/cart.html`被编入索引。 ```html ``` ### 正式的短链接向世界发出“这是使用此页面的缩短的URL！”的信号目前被支持地很差。阅读[Microformats wiki上关于短链接的文章](http://microformats.org/wiki/rel-shortlink)了解更多信息。 ```html ``` ### 单独的移动URLs 如果你为桌面和移动用户提供单独的网址。你应该考虑帮助搜索引擎算法更好地了解你的网站上的配置。这可以通过在HTML页面中添加以下注解来完成： * 在桌面页面上，add the `link rel="alternate"` tag pointing to the corresponding mobile URL, e.g.: `` * 在移动页面上，添加`link rel="canonical"`标签指向相应的桌面端网址，例如： `` 更多信息，请参考： * https://developers.google.com/webmasters/smartphone-sites/details#separateurls * https://developers.google.com/webmasters/smartphone-sites/feature-phones ## Web Apps 有一对meta标签用于在将web app添加到ios主屏幕时，提供web app的相关信息。 * 添加`apple-mobile-web-app-capable`将使你的web app无需Chrome，并提供默认的iOS应用程序视图。你可以通过添加`apple-mobile-web-app-status-bar-style`来控制默认视图的配色方案。 ```html ``` * 你可以使用`apple-mobile-web-app-title`为主屏幕图标添加特定的站点名称。在iOS 6及以后的版本上起作用。 ```html ``` 更多信息，请阅读苹果网站上的[官方文档](https://developer.apple.com/library/safari/#documentation/AppleApplications/Reference/SafariHTMLRef/Articles/MetaTags.html)。 ### Apple Touch 图标 Apple touch图标可以被看作是iOS设备的网站图标。 Apple touch图标的主要尺寸有： * `57×57px` – @1x屏的iphone和iPod Touch * `72×72px` – iPad和运行iOS版本小于等于6，并且@1x屏的iPad mini * `76×76px` – iPad和运行iOS版本大于等于7，并且@1x屏的iPad mini * `114×114px` – 运行iOS版本小于等于6，并且@2x屏的iPhone * `120×120px` – 运行iOS版本大于等于7，并且@2x屏的iPhone * `144×144px` – iPad和运行在iOS版本小于等于6，并且@2x屏的iPad mini * `152×152px` – iPad和运行iOS 7版本，并且@2x屏的iPad mini * `180×180px` – iPad和运行iOS 8版本，并且@2x屏的iPad mini 显示含义： * @1x - 非Retina屏 * @2x - Retina * @3x - Retina HD 有关iOS显示屏的更多信息可以在[这里](https://en.wikipedia.org/wiki/List_of_iOS_devices#Display)找到。在大多数情况下，一个`180×180px`的触摸图标命名为`icon.png`，包括： ```html ``` 在页面的``中就够了。如果你偏向艺术方向和/或想要让每个设备拥有不同的内容，如上所述，你可以添加更多触摸图标。更全面的概述，请参考Mathias的[触摸图标文章](https://mathiasbynens.be/notes/touch-icons) ### Apple Touch启动图像除此之外，可以在iOS上为web app添加启动屏幕。通过使用与图像相关联的链接定义`apple-touch-startup-image`.这基本上起作用。由于iOS设备具有不同的屏幕分辨率，因此需要添加媒体查询以检测要加载的图像。这是一个retina屏的iPhone的例子： ```html ``` 然而，可以使用JavaScript检测要使用的启动图像。移动端Boilerplate为此提供了一个有用的功能。请参看[helpers.js](https://github.com/h5bp/mobile-boilerplate/blob/v4.1.0/js/helper.js#L336-L383)进行实现。 ### 手机Chrome的web apps 手机Chrome有一个特定的meta标记，用于将应用程序[安装到主屏幕](https://developer.chrome.com/multidevice/android/installtohomescreen)，试图成为比苹果公司专有的meta标签更为通用的替代品： ```html ``` 触摸图标同样适用： ```html ``` ### 主题你可以在页面的``中添加[meta 扩展`theme-color`](https://html.spec.whatwg.org/multipage/semantics.html#meta-theme-color)，以建议浏览器和操作系统在使用不同颜色的用户界面中自定义各个页面的显示时应使用的颜色。 ```html ``` `content`属性扩展可以使用任何有效的CSS颜色。目前，[Android Lollipop及更高版本上的Chrome 39及以上版本](https://developers.google.com/web/updates/2014/11/Support-for-theme-color-in-Chrome-39-for-Android)支持`theme-color`标签扩展。 ### *注：翻译中的链接现在还是原文中的链接（链接内容还是英文文档），当翻译到相关文章时，会进行相应替换。最后全部翻译完成时，就不会再有这种情况发生，到时大家可以到github上查看完整文档，现在还请大家多多谅解。* ## **What you want, Go after It.** ___ #### [https://steemit.com](https://steemit.com/) 首发。感谢阅读。 #### 欢迎Follow, Upvote, Reply, Resteem (repost)激励我创作更多更好的内容。 [@syt](https://steemit.com/@syt)