<h1>HTML
<p dir="auto">默认情况下，HTML5 Boilerplate提供了两个“html”页面：
<ul>
<li><a href="#indexhtml" target="_blank" rel="nofollow noreferrer noopener" title="This link will take you away from hive.blog" class="external_link"><code>index.html - 这是默认的HTML骨架，应该作为构成你网站上所有页面的基础。
<li><a href="#404html" target="_blank" rel="nofollow noreferrer noopener" title="This link will take you away from hive.blog" class="external_link"><code>404.html - 404错误页面。
<h2><code>index.html
<h3><code>no-js 类
<p dir="auto">提供<code>no-js类，以便您可以根据JavaScript是否禁用（<code>.no-js）或启用（<code>.js）来更轻松，明确地添加自定义样式。使用该技术也有助于<a href="https://www.paulirish.com/2009/avoiding-the-fouc-v3/" target="_blank" rel="nofollow noreferrer noopener" title="This link will take you away from hive.blog" class="external_link">避免FOUC。
<h2>语言属性
<p dir="auto">请考虑指定你的内容的语言，通过将<a href="http://www.iana.org/assignments/language-subtag-registry/language-subtag-registry" target="_blank" rel="nofollow noreferrer noopener" title="This link will take you away from hive.blog" class="external_link">值添加到<code><html>中的lang`属性中，就像下面这个例子中的一样：
<pre><code><html class="no-js" lang="en">
<h3><code><title>和<code><meta>标签的顺序
<p dir="auto">指定<code><title>和<code><meta>标签的顺序很重要，因为：
<ol>
<li><p dir="auto">字符集声明 (<code><meta charset="utf-8">)：
<ul>
<li>必须被完全包含在<a href="https://www.whatwg.org/specs/web-apps/current-work/multipage/semantics.html#charset" target="_blank" rel="nofollow noreferrer noopener" title="This link will take you away from hive.blog" class="external_link">文档的前1024个字节中
<li>应被尽早指定（在可能由攻击者控制的任何内容之前，例如<code><title>元素），以避免Internet Explorer中潜在的<a href="https://code.google.com/p/doctype-mirror/wiki/ArticleUtf7" target="_blank" rel="nofollow noreferrer noopener" title="This link will take you away from hive.blog" class="external_link">编码相关安全问题
<li><p dir="auto">meta标签确定兼容模式(<code><meta http-equiv="x-ua-compatible" content="ie=edge">)：
<ul>
<li>需要被包括在除 <code><title> 和其它 <code><meta> 标签之外的所有其它标签之前
<h3><code>x-ua-compatible
<p dir="auto">Internet Explorer 8/9/10支持影响网页的解释和显示方式的<a href="https://msdn.microsoft.com/en-us/library/cc288325.aspx" target="_blank" rel="nofollow noreferrer noopener" title="This link will take you away from hive.blog" class="external_link">文档兼容性模式。因此，即使您的网站的访问者使用Internet Explorer 9，IE也可能不会使用最新的渲染引擎，而是决定使用Internet Explorer 5.5渲染引擎来渲染您的页面。
<p dir="auto">指定 <code>x-ua-compatible meta 标签:
<pre><code><meta http-equiv="x-ua-compatible" content="ie=edge">
<p dir="auto">或使用以下HTTP响应头发送页面
<pre><code>X-UA-Compatible: IE=edge
<p dir="auto">可以强制Internet Explorer 8/9/10在<a href="https://hsivonen.fi/doctype/#ie8" target="_blank" rel="nofollow noreferrer noopener" title="This link will take you away from hive.blog" class="external_link">不同情况下都使用可用的最高模式来渲染页面，因此，确保浏览器为浏览你网站的用户提供最佳的用户体验。
<p dir="auto">如果可能，我们建议你删除<code>meta标签，并仅发送HTTP响应头，因为如果一个非标准的端口服务于你的网站，则<code>meta标签将不会始终有效，因为Internet Explorer的首选项<code>在兼容性视图中显示内部网站默认情况下处于选中状态。
<p dir="auto">如果您使用Apache作为Web服务器，请包含处理HTTP头的<a href="https://github.com/h5bp/server-configs-apache" target="_blank" rel="nofollow noreferrer noopener" title="This link will take you away from hive.blog" class="external_link"><code>.htaccess文件。如果您正在使用不同的服务器，请查看我们的<a href="https://github.com/h5bp/server-configs" target="_blank" rel="nofollow noreferrer noopener" title="This link will take you away from hive.blog" class="external_link">其它服务器配置。
<p dir="auto">从Internet Explorer 11开始,不建议使用<a href="https://msdn.microsoft.com/library/bg182625.aspx#docmode" target="_blank" rel="nofollow noreferrer noopener" title="This link will take you away from hive.blog" class="external_link">文档模式。如果你的企业仍然依赖旧版本的为旧版Internet Explorer设计的Web应用程序和服务，你可能需要考虑在整个公司启用<a href="https://blogs.msdn.microsoft.com/ie/2014/04/02/stay-up-to-date-with-enterprise-mode-for-internet-explorer-11/" target="_blank" rel="nofollow noreferrer noopener" title="This link will take you away from hive.blog" class="external_link">企业模式。
<h2>Meta 描述标签
<p dir="auto"><code>description标签提供了页面的简短描述。在某些情况下，此描述用作搜索结果中显示片段的一部分。
<pre><code><meta name="description" content="This is a description">
<h2>移动视口
<p dir="auto">你可以使用<a href="https://docs.google.com/present/view?id=dkx3qtm_22dxsrgcf4" title="This link will take you away from hive.blog" target="_blank" rel="nofollow noreferrer noopener" class="external_link"><code>viewport meta 标签的几个不同选项。你可以在<a href="https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html" target="_blank" rel="nofollow noreferrer noopener" title="This link will take you away from hive.blog" class="external_link">Apple开发人员文档中找到更多内容。HTML5 Boilerplate带有一个简单的设置，在一般用例方面取得了很好的平衡。
<pre><code><meta name="viewport" content="width=device-width, initial-scale=1">
<h2>Web应用程序清单
<p dir="auto">HTML5 Boilerplate包含一个简单的Web应用程序清单文件。
<p dir="auto">Web应用程序清单是一个简单的JSON文件，它允许你控制应用程序在设备的主屏幕上的显示方式，当它在该上下文中启动时的外观以及启动时会发生什么。这可以更好地控制移动设备上保存的站点或web应用程序的UI。
<p dir="auto">如下在HTML中关联：
<pre><code> <link rel="manifest" href="site.webmanifest">
<p dir="auto">我们的<a href="https://github.com/h5bp/html5-boilerplate/blob/master/src/site.webmanifest" target="_blank" rel="nofollow noreferrer noopener" title="This link will take you away from hive.blog" class="external_link">site.webmanifest包含一个仅仅为了显示基本用法的非常基础的"app"定义。你应该参考<a href="https://developer.mozilla.org/en-US/docs/Web/Manifest" target="_blank" rel="nofollow noreferrer noopener" title="This link will take you away from hive.blog" class="external_link">关于你的网站或应用程序的更多信息来填写此文件。
<h2>网站图标和触摸图标
<p dir="auto">快捷方式图标应放在网站的根目录下。这样，<code>favicon.ico就可以被浏览器自动提取。HTML5 Boilerplate配有一组默认图标（包括favicon图标和一个Apple Touch 图标），你可以依据它们来创作自己的图标。
<p dir="auto">请参考这些文档的<a href="https://github.com/byog/html5-boilerplate/blob/html5-boilerplate-cn/dist/doc/extend.md" target="_blank" rel="nofollow noreferrer noopener" title="This link will take you away from hive.blog" class="external_link">扩展部分中的更详细的描述。
<h2>内容区域
<p dir="auto">样板模板的中心部分几乎是空的。这是有意的，以便使样板适合于网页和网络应用程序的开发。
<h3>浏览器升级提示
<p dir="auto">样板的主要内容区域包括为使用IE 8及更低版本的用户提供安装最新浏览器的提示。如果你打算支持IE 8，那么你应该删除该代码段。
<h2>Modernizr
<p dir="auto">HTML5 Boilerplate使用Modernizr的自定义构建。
<p dir="auto"><a href="https://modernizr.com/" target="_blank" rel="nofollow noreferrer noopener" title="This link will take you away from hive.blog" class="external_link">Modernizr是一个JavaScript库，它根据功能测试的结果向<code>html元素添加类，并确保所有浏览器都可以使用HTML5元素（因为它包含HTML5 Shiv）。这允许你根据浏览器支持的功能来编写CSS和JavaScript。
<p dir="auto">Modernizr从版本3开始可以使用<a href="https://github.com/h5bp/html5-boilerplate/blob/master/modernizr-config.json" target="_blank" rel="nofollow noreferrer noopener" title="This link will take you away from hive.blog" class="external_link">modernizr-config.json和<a href="https://www.npmjs.com/package/modernizr-cli" target="_blank" rel="nofollow noreferrer noopener" title="This link will take you away from hive.blog" class="external_link">Modernizr命令行实用程序来自定义。
<h2>Polyfills是什么？
<p dir="auto">如果你需要在项目中包含<a href="https://remysharp.com/2010/10/08/what-is-a-polyfill" target="_blank" rel="nofollow noreferrer noopener" title="This link will take you away from hive.blog" class="external_link">polyfills，则必须确保在任何其他JavaScript之前加载。 如果你正在使用一些polyfill CDN服务，例如<a href="https://cdn.polyfill.io/" target="_blank" rel="nofollow noreferrer noopener" title="This link will take you away from hive.blog" class="external_link">cdn.polyfill.io，只是把它放在页面底部的其他脚本之前：
<pre><code> <script src="js/vendor/modernizr-3.5.0.min.js"></script>
<script src="https://cdn.polyfill.io/v2/polyfill.min.js"></script>
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-3.2.1.min.js"><\/script>')</script>
<script src="js/plugins.js"></script>
<script src="js/main.js"></script>
</body>
<p dir="auto">如果你喜欢只包括自己的polyfills，你可以将它们包含在<code>js/plugins.js中。 当你有一堆polyfills要加载，你也可以在<code>js/vendor目录下创建一个<code>polyfills.js文件，或者单独包含这些文件，并使用构建工具进行组合。始终确保在任何其他Javascript加载之前，所有polyfills被加载。
<p dir="auto">存在一些对Modernizr和polyfill误解。重要的是要知道Modernizr仅仅处理特征检查，而不是polyfilling自己。Modernizr对polyfill做的唯一的事情是，该团队维护着<a href="https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills" target="_blank" rel="nofollow noreferrer noopener" title="This link will take you away from hive.blog" class="external_link">一个巨大的跨浏览器polyfills列表。
<h3>jQuery CDN
<p dir="auto">jQuery库的jQuery CDN版本被引用到页面的底部。罕见情况下，当CDN版本可能不可用时，为了方便离线开发，包含一个jQuery的本地回退版本。
<p dir="auto">在潜在的候选版本中（像Google的托管库），我们最终选择了JQuery CND，因为它速度很快（<a href="https://(https://www.cdnperf.com/#jsdelivr,cdnjs,google,yandex,microsoft,jquery,bootstrapcdn/https/90)" target="_blank" rel="nofollow noreferrer noopener" title="This link will take you away from hive.blog" class="external_link">通过某些措施可以与Google相媲美或更快），（与Google的CDN不同）可用于中国的数亿互联网用户。多年来，我们<a href="https://github.com/h5bp/html5-boilerplate/issues/1191" target="_blank" rel="nofollow noreferrer noopener" title="This link will take you away from hive.blog" class="external_link">选择了Google的托管版本，而不是JQuery CDN，因为它可以通过HTTPS（jQuery CDN不支持）传输，并且由于Google CDN的普及，它提供了更高效的缓存。第一个问题已经解决，对于第二个问题，jQuery CDN远远超过了向中国用户提供jQuery服务。
<p dir="auto">虽然jQuery CDN是一个强大的默认解决方案，但你的网站或应用程序可能需要不同的配置。使用<a href="https://www.webpagetest.org/" target="_blank" rel="nofollow noreferrer noopener" title="This link will take you away from hive.blog" class="external_link">WebPageTest和<a href="https://developers.google.com/speed/pagespeed/insights/" target="_blank" rel="nofollow noreferrer noopener" title="This link will take you away from hive.blog" class="external_link">PageSpeed Insights等浏览器工具测试你的网站，将帮助你检查你的网站的真实性能，并显示你的网站或应用程序可以优化的地方。
<h3>Google Universal Analytics跟踪代码
<p dir="auto">最后，包含了Google Universal Analytics跟踪代码的优化版本。Google建议将此脚本放置在页面顶部。要考虑的因素：如果将此脚本放在页面顶部，则可以对没有完全加载页面的用户进行统计，并且有可能导致同时连接数量达到浏览器的最大值。
<p dir="auto">更多信息：
<ul>
<li><a href="https://mathiasbynens.be/notes/async-analytics-snippet#universal-analytics" target="_blank" rel="nofollow noreferrer noopener" title="This link will take you away from hive.blog" class="external_link">优化Google Universal Analytics代码段
<li><a href="https://developers.google.com/analytics/devguides/collection/analyticsjs/" target="_blank" rel="nofollow noreferrer noopener" title="This link will take you away from hive.blog" class="external_link">Analytics.js介绍
<li><a href="https://ga-dev-tools.appspot.com/" target="_blank" rel="nofollow noreferrer noopener" title="This link will take you away from hive.blog" class="external_link">Google Analytics Demos & 工具
<p dir="auto"><strong>注意 Google Universal Analytics代码段默认包含在内，主要是因为Google Analytics是<a href="https://trends.builtwith.com/analytics/Google-Analytics" target="_blank" rel="nofollow noreferrer noopener" title="This link will take you away from hive.blog" class="external_link">目前最受欢迎的追踪解决方案之一。然而，它的用法不是一成不变的，你应该考虑<a href="https://en.wikipedia.org/wiki/List_of_web_analytics_software" target="_blank" rel="nofollow noreferrer noopener" title="This link will take you away from hive.blog" class="external_link">被选方案，并使用最适合你的需求的方案！
<h3><em>注：翻译中的链接现在还是原文中的链接（链接内容还是英文文档），当翻译到相关文章时，会进行相应替换。最后全部翻译完成时，就不会再有这种情况发生，到时大家可以到github上查看完整文档，现在还请大家多多谅解。
<h2><strong>What you want, Go after It.
<hr />
<h4><a href="https://steemit.com/" target="_blank" rel="nofollow noreferrer noopener" title="This link will take you away from hive.blog" class="external_link">https://steemit.com 首发。感谢阅读。
<h4>欢迎Follow, Upvote, Reply, Resteem (repost)激励我创作更多更好的内容。
<p dir="auto"><a href="https://steemit.com/@syt" target="_blank" rel="nofollow noreferrer noopener" title="This link will take you away from hive.blog" class="external_link">@syt