最近从 farbox 迁移到了 bitcron，由于 bitcron 不再支持 html 的模板，只好用 jade 重写了一次
顺便整理了下之前写这个模板时碰到的一些细节，也许用得上吧

lang

国内很多网站都是不写这个 lang 属性的，比如 baidu。 而大部分国外网站都会写，Twitter 甚至为每一条推文都加上了 lang 属性
那么写上 lang 属性有什么意义呢？顾名思义，lang 属性声明了内容的语言。更详细的来说，比如:

• 浏览器可以根据 lang=en 知道当前网页是英文，于是可以问你是否需要开启翻译功能

• Chrome 在版本 21 之后，开始根据 lang 属性来应用不同的默认字体。这意味着你可以为英语页面和中文、日文等页面设置不同的默认字体
  
  这个选项没有出现在默认设置里，你可以使用这个 Chrome 扩展来设置：Advanced Font Settings

• 页面的 lang 属性会影响字体的显示
  比如 思源黑体 中同时包含了中文字体和日文字体，我们知道日文中一部分汉字是相同的，为了节省空间，所以它们被放在了“同一个位置”上
  然而即使是同样的字，也可能在字形上存在不同，比如，如果你安装了思源黑体，那么下面同样的字
  门类 和 门类

  <span lang="ja-jp" style="font-family:'Source Han Sans'">门类</span>
  <span lang="zh-Hans" style="font-family:'Source Han Sans'">门类</span>
  

  显示出来的字形是不一样的，如图：
  
  另外，由于中文字体 fallback 的关系，lang=en 下显示的是 lang=ja-jp 的字形，所以，如果发现网页显示的字形很奇怪，那么看看 lang 属性有没有正确的设置吧~
  可以参考这里来决定选择用哪个 Language Code

meta

• charset
  千万不要忘记 charset 设置，否则可能会出现莫名其妙的乱码
  一般来说是这样设置的：

  <meta name="Content-Type" content="text/html;charset=utf-8" />
  

• viewport
  这个就不多说了，如果做了自适应的话，应该都不会忘记这个
  
  可以参考 https://www.w3schools.com/css/css_rwd_viewport.asp

• web app icon
  在移动设备上，除了将网站收藏为书签外，现在还有更多快捷访问的方式，比如，固定到桌面等等。所以，相对于 favicon，我们有了更多需要设置的 icon
  
  比如为 iOS 设置放到主屏幕上的图标：

  <link rel="apple-touch-icon" href="apple-touch-iphone.png" />
  <link rel="apple-touch-icon" sizes="72x72" href="apple-touch-ipad.png" />
  <link
      rel="apple-touch-icon"
      sizes="114x114"
      href="apple-touch-iphone4.png"
  />
  <link
      rel="apple-touch-icon"
      sizes="144x144"
      href="apple-touch-ipad-retina.png"
  />
  

  相应的还有 Android，Windows 等等，所以你可能会需要这个网站，一次生成支持所有平台的 html。

待续~