Sustie

主页 所有文章 文章检索

现代HTML的最简模板

下面是使用 Vite 创建的前端项目的默认index.html文件内容：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" href="/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite App</title>
  </head>

  <body></body>
</html>

下面对这里面的一些关键点进行解说。

<!DOCTYPE html>

这一行表示该文件采用的是 HTML 5 标准。

<html lang="en"></html>

lang="en"表示这个网页是英文网页，如果是大陆的中文网页，可以写lang="zh-CN"。

<meta charset="UTF-8" />

这一行表示源文件使用的编码是 UTF-8。

<link rel="icon" href="/favicon.ico" />

这一行指定了网页的图标。

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

这一行是对网页的 viewport 进行设置，使得网页在移动设备上浏览时不会缩放。由于早期大部分网页没有针对移动设备的小屏幕进行适配，因此移动设备访问网页时，默认会渲染一个大于屏幕尺寸的网页，然后用户可以通过手指触摸操作来移动网页的显示区域。由于现在很多网页都是原生适配移动端的，在这种情况下缩放就没有必要了，可以通过这个设置来禁用缩放。

<title>Vite App</title>

这一行指定了网页的标题。