原文链接：My current HTML boilerplate

1 模板文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width">

  <title>Unique page title - My Site</title>

  <script type="module">
    document.documentElement.classList.remove('no-js');
    document.documentElement.classList.add('js');
  </script>

  <link rel="stylesheet" href="/assets/css/styles.css">
  <link rel="stylesheet" href="/assets/css/print.css" media="print">

  <meta name="description" content="Page description">
  <meta property="og:title" content="Unique page title - My Site">
  <meta property="og:description" content="Page description">
  <meta property="og:image" content="https://www.mywebsite.com/image.jpg">
  <meta property="og:image:alt" content="Image description">
  <meta property="og:locale" content="en_GB">
  <meta property="og:type" content="website">
  <meta name="twitter:card" content="summary_large_image">
  <meta property="og:url" content="https://www.mywebsite.com/page">
  <link rel="canonical" href="https://www.mywebsite.com/page">

  <link rel="icon" href="/favicon.ico">
  <link rel="icon" href="/favicon.svg" type="image/svg+xml">
  <link rel="apple-touch-icon" href="/apple-touch-icon.png">
  <link rel="manifest" href="/my.webmanifest">
  <meta name="theme-color" content="#FF00FF">
</head>

<body>
  <!-- Content -->
  <script src="/assets/js/xy-polyfill.js" nomodule></script>
  <script src="/assets/js/script.js" type="module"></script>
</body>
</html>

2 重点解释

2.1 lang 属性

lang 属性是一个常常被忽视的重要属性。你可以阅读 On Use of the lange Attribute 和 The lange attribute: browsers telling lies, telling sweet little lies 来阅读更多的细节。

这里我还给 html 标签添加了 no-js 类，这是为了方便渲染不支持 JavaScript 的环境下的元素的。在支持 JavaScript 的条件下这个类会被移除（模板中的内嵌 js 脚本实现）。

2.2 viewport

viewport meta 标签定义了“视窗”的大小，这里采用的设置是让网页宽度和设备宽度相等，初始缩放大小 initial-scale 为 1，即无任何缩放。这个设置与响应式网页功能有密切关系。

viewport 的相关设置应该尽可能放在前面以确保渲染正确。

2.3 og

以 og: 开头的属性是供社交媒体的爬虫使用的。Facebook 和 Twitter 的爬虫可以获取这些属性。

2.4 主题色

theme-color meta 标签设置了网页主题颜色，这一信息可以被浏览器捕获并可能调整对应浏览器 UI 颜色。

2.5 图标

2.5.1 SVG favicons

现代浏览器支持使用 svg 图像作为网页的 favicon。并且，我们可以向这个 SVG 中添加 HTML 以及 CSS，从而可以对其样式进行调整。例如我们可以用这个功能实现 favicon 的深色模式。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<style>
  path {
    fill: #153a51;
  }

  @media (prefers-color-scheme: dark) {
    path {
      fill: #FFFFFF;
    } 
  }
</style>
<path d="M397.8 117.9v290h-76.4V273.5h-.8l-46.4 97.2h-36.8l-46-96.8h-.8v134h-76.4v-290h80.4l60.8 150.8h.8l61.2-150.8h80.4z"/>
</svg>

2.5.2 apple-touch-icon

苹果设备使用这一属性作为 Home 界面的图标。

2.5.3 .webmanifest

这个文件被 Android 设备使用，用来获取 Home 界面的图标以及 Splash 界面的图标。

关于 favicon 可以进一步阅读：How to Favicon in 2021: Six files that fit most needs

2.6 其他

canonical link 的作用是声明网页内容对应的“辨识” URL，这一避免 SEO 过程中多个 URL 下具有相同页面导致的重复问题。