且听疯吟 在此记录扯淡的青春
写模板时的一些细节

最近从 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" style="font-family:'Source Han Sans'">门类</span>
    <span lang="zh-Hans" style="font-family:'Source Han Sans'">门类</span>
    

    显示出来的字形是不一样的
    另外,由于中文字体 fallback 的关系,lang=en 下显示的是 lang=ja 的字形,所以,如果发现网页显示的字形很奇怪,那么看看 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。

待续~