html5-boilerplate中文翻译 - html篇steemCreated with Sketch.

in cn •  last year

HTML5 Boilerplate 主页 | 目录

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>标签的顺序很重要,因为:

  1. 字符集声明 (<meta charset="utf-8">):

  2. 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.jsonModernizr命令行实用程序来自定义。

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是一个强大的默认解决方案,但你的网站或应用程序可能需要不同的配置。使用WebPageTestPageSpeed Insights等浏览器工具测试你的网站,将帮助你检查你的网站的真实性能,并显示你的网站或应用程序可以优化的地方。

Google Universal Analytics跟踪代码

最后,包含了Google Universal Analytics跟踪代码的优化版本。Google建议将此脚本放置在页面顶部。要考虑的因素:如果将此脚本放在页面顶部,则可以对没有完全加载页面的用户进行统计,并且有可能导致同时连接数量达到浏览器的最大值。

更多信息:

注意 Google Universal Analytics代码段默认包含在内,主要是因为Google Analytics是目前最受欢迎的追踪解决方案之一。然而,它的用法不是一成不变的,你应该考虑被选方案,并使用最适合你的需求的方案!

注:翻译中的链接现在还是原文中的链接(链接内容还是英文文档),当翻译到相关文章时,会进行相应替换。最后全部翻译完成时,就不会再有这种情况发生,到时大家可以到github上查看完整文档,现在还请大家多多谅解。

What you want, Go after It.


https://steemit.com 首发。感谢阅读。

欢迎Follow, Upvote, Reply, Resteem (repost)激励我创作更多更好的内容。

@syt

Authors get paid when people like you upvote their post.
If you enjoyed what you read here, create your account today and start earning FREE STEEM!