html5-boilerplate中文翻译 - html篇
HTML
默认情况下，HTML5 Boilerplate提供了两个“html”页面：
index.html- 这是默认的HTML骨架，应该作为构成你网站上所有页面的基础。404.html- 404错误页面。
index.html
no-js 类
提供no-js类，以便您可以根据JavaScript是否禁用（.no-js）或启用（.js）来更轻松，明确地添加自定义样式。使用该技术也有助于避免FOUC。
语言属性
请考虑指定你的内容的语言，通过将值添加到<html>中的lang`属性中，就像下面这个例子中的一样：
<html class="no-js" lang="en">
<title>和<meta>标签的顺序
指定<title>和<meta>标签的顺序很重要，因为：
字符集声明 (
<meta charset="utf-8">)：- 必须被完全包含在文档的前1024个字节中
- 应被尽早指定（在可能由攻击者控制的任何内容之前，例如
<title>元素），以避免Internet Explorer中潜在的编码相关安全问题
meta标签确定兼容模式(
<meta http-equiv="x-ua-compatible" content="ie=edge">)：- 需要被包括在除
<title>和其它<meta>标签之外的所有其它标签之前
- 需要被包括在除
x-ua-compatible
Internet Explorer 8/9/10支持影响网页的解释和显示方式的文档兼容性模式。因此，即使您的网站的访问者使用Internet Explorer 9，IE也可能不会使用最新的渲染引擎，而是决定使用Internet Explorer 5.5渲染引擎来渲染您的页面。
指定 x-ua-compatible meta 标签:
<meta http-equiv="x-ua-compatible" content="ie=edge">
或使用以下HTTP响应头发送页面
X-UA-Compatible: IE=edge
可以强制Internet Explorer 8/9/10在不同情况下都使用可用的最高模式来渲染页面，因此，确保浏览器为浏览你网站的用户提供最佳的用户体验。
如果可能，我们建议你删除meta标签，并仅发送HTTP响应头，因为如果一个非标准的端口服务于你的网站，则meta标签将不会始终有效，因为Internet Explorer的首选项在兼容性视图中显示内部网站默认情况下处于选中状态。
如果您使用Apache作为Web服务器，请包含处理HTTP头的.htaccess文件。如果您正在使用不同的服务器，请查看我们的其它服务器配置。
从Internet Explorer 11开始,不建议使用文档模式。如果你的企业仍然依赖旧版本的为旧版Internet Explorer设计的Web应用程序和服务，你可能需要考虑在整个公司启用企业模式。
Meta 描述标签
description标签提供了页面的简短描述。在某些情况下，此描述用作搜索结果中显示片段的一部分。
<meta name="description" content="This is a description">
移动视口
你可以使用viewport meta 标签的几个不同选项。你可以在Apple开发人员文档中找到更多内容。HTML5 Boilerplate带有一个简单的设置，在一般用例方面取得了很好的平衡。
<meta name="viewport" content="width=device-width, initial-scale=1">
Web应用程序清单
HTML5 Boilerplate包含一个简单的Web应用程序清单文件。
Web应用程序清单是一个简单的JSON文件，它允许你控制应用程序在设备的主屏幕上的显示方式，当它在该上下文中启动时的外观以及启动时会发生什么。这可以更好地控制移动设备上保存的站点或web应用程序的UI。
如下在HTML中关联：
<link rel="manifest" href="site.webmanifest">
我们的site.webmanifest包含一个仅仅为了显示基本用法的非常基础的"app"定义。你应该参考关于你的网站或应用程序的更多信息来填写此文件。
网站图标和触摸图标
快捷方式图标应放在网站的根目录下。这样，favicon.ico就可以被浏览器自动提取。HTML5 Boilerplate配有一组默认图标（包括favicon图标和一个Apple Touch 图标），你可以依据它们来创作自己的图标。
请参考这些文档的扩展部分中的更详细的描述。
内容区域
样板模板的中心部分几乎是空的。这是有意的，以便使样板适合于网页和网络应用程序的开发。
浏览器升级提示
样板的主要内容区域包括为使用IE 8及更低版本的用户提供安装最新浏览器的提示。如果你打算支持IE 8，那么你应该删除该代码段。
Modernizr
HTML5 Boilerplate使用Modernizr的自定义构建。
Modernizr是一个JavaScript库，它根据功能测试的结果向html元素添加类，并确保所有浏览器都可以使用HTML5元素（因为它包含HTML5 Shiv）。这允许你根据浏览器支持的功能来编写CSS和JavaScript。
Modernizr从版本3开始可以使用modernizr-config.json和Modernizr命令行实用程序来自定义。
Polyfills是什么？
如果你需要在项目中包含polyfills，则必须确保在任何其他JavaScript之前加载。 如果你正在使用一些polyfill CDN服务，例如cdn.polyfill.io，只是把它放在页面底部的其他脚本之前：
<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>
如果你喜欢只包括自己的polyfills，你可以将它们包含在js/plugins.js中。 当你有一堆polyfills要加载，你也可以在js/vendor目录下创建一个polyfills.js文件，或者单独包含这些文件，并使用构建工具进行组合。始终确保在任何其他Javascript加载之前，所有polyfills被加载。
存在一些对Modernizr和polyfill误解。重要的是要知道Modernizr仅仅处理特征检查，而不是polyfilling自己。Modernizr对polyfill做的唯一的事情是，该团队维护着一个巨大的跨浏览器polyfills列表。
jQuery CDN
jQuery库的jQuery CDN版本被引用到页面的底部。罕见情况下，当CDN版本可能不可用时，为了方便离线开发，包含一个jQuery的本地回退版本。
在潜在的候选版本中（像Google的托管库），我们最终选择了JQuery CND，因为它速度很快（通过某些措施可以与Google相媲美或更快），（与Google的CDN不同）可用于中国的数亿互联网用户。多年来，我们选择了Google的托管版本，而不是JQuery CDN，因为它可以通过HTTPS（jQuery CDN不支持）传输，并且由于Google CDN的普及，它提供了更高效的缓存。第一个问题已经解决，对于第二个问题，jQuery CDN远远超过了向中国用户提供jQuery服务。
虽然jQuery CDN是一个强大的默认解决方案，但你的网站或应用程序可能需要不同的配置。使用WebPageTest和PageSpeed Insights等浏览器工具测试你的网站，将帮助你检查你的网站的真实性能，并显示你的网站或应用程序可以优化的地方。
Google Universal Analytics跟踪代码
最后，包含了Google Universal Analytics跟踪代码的优化版本。Google建议将此脚本放置在页面顶部。要考虑的因素：如果将此脚本放在页面顶部，则可以对没有完全加载页面的用户进行统计，并且有可能导致同时连接数量达到浏览器的最大值。
更多信息：
注意 Google Universal Analytics代码段默认包含在内，主要是因为Google Analytics是目前最受欢迎的追踪解决方案之一。然而，它的用法不是一成不变的，你应该考虑被选方案，并使用最适合你的需求的方案！