HTML5模板：任何项目的基本入门HTML样板-css教程-PHP中文网

首页

web前端

css教程

HTML5模板：任何项目的基本入门HTML样板

Joseph Gordon-Levitt

Feb 08, 2025 am 08:50 AM

构建你自己的HTML5模板：一份简明指南

HTML5 Template: A Base Starter HTML Boilerplate for Any Project

本文将指导您如何创建自己的HTML5模板。我们将逐步讲解HTML基础模板的关键要素，最终提供一个您可以拿来使用并进一步构建的简单模板。

阅读完本文后，您将拥有自己的HTML5模板。如果您想现在就获取HTML模板代码，稍后再阅读本文，这里提供我们最终完成的HTML5模板。

关键要点

HTML5模板作为可重用的模板，包含必要的HTML元素，有助于避免在每个项目开始时重复编写代码。
一个基本的HTML5模板应包含文档类型声明、带有语言属性的元素、通过<meta charset="utf-8">的字符编码以及用于响应式设计的视口设置。
HTML5模板部分的关键元素通常包含用于SEO的元数据、CSS样式表的链接以及可选的JavaScript文件。
为了进行社交媒体优化，加入Open Graph元标记可以增强内容在社交平台上共享时的显示效果。
在模板中包含favicon和Apple touch图标有助于建立品牌标识并改善跨设备的用户体验。
将JavaScript文件放在闭合的标签之前可以提高页面加载速度，因为它允许浏览器通过延迟加载脚本更快地呈现页面。

什么是HTML模板？

每个网站都不同，但从一个网站到另一个网站，许多东西基本上是相同的。与其一遍遍地编写相同的代码，不如创建一个自己的“模板”。模板是一个每次启动项目时都会用到的模板，可以避免您从头开始。

维基百科将模板描述为：

代码片段在多个地方重复出现，几乎没有变化。

随着您学习HTML5并将新技术添加到您的工具箱中，您可能希望为自己构建一个HTML模板来启动所有未来的项目。这绝对值得去做，并且网上有很多起点可以帮助您构建自己的HTML5模板。

一个非常简单的HTML5模板示例

本文末尾提供的完整模板包含很多内容。但是，您不必做得那么花哨——尤其是在您刚开始学习的时候。这是一个非常简单的“入门”HTML5模板，这可能是您唯一需要的：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>HTML5 Boilerplate</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <h1 id="Page-Title">Page Title</h1>
  <🎜>
</body>
</html>

如果您将上面的代码粘贴到一个.html文件中，您将拥有一个网页！这个基本的HTML5模板包含下一节中列出的一些元素，以及一个将在您的网络浏览器中显示的简单标题元素。

让我们更详细地了解一下它的结构。

HTML5模板的结构

HTML模板通常包含以下部分：

文档类型声明（或doctype）
元素
字符编码
视口元元素
<title></title>、描述和作者
用于社交卡片的Open Graph元元素
Favicon和touch图标
CSS样式表链接
JavaScript文件链接

除了文档类型声明和元素外，上面列出的元素大多位于HTML模板的部分中。

HTML5文档类型声明

您的HTML5模板需要以文档类型声明或doctype开头。doctype只是告诉浏览器或任何其他解析器它正在查看什么类型的文档的一种方式。对于HTML文件，这意味着HTML的特定版本和类型。doctype应该始终是任何HTML文件顶部的第一项。许多年前，doctype声明是一个难看且难以记住的混乱，通常指定为“XHTML Strict”或“HTML Transitional”。

随着HTML5的出现，那些难以理解的令人讨厌的东西消失了，现在您只需要这个：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>HTML5 Boilerplate</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <h1 id="Page-Title">Page Title</h1>
  <🎜>
</body>
</html>

简单明了。“5”从声明中明显消失了。尽管当前版本的Web标记被称为“HTML5”，但它实际上只是先前HTML标准的演变——未来的规范将只是我们今天所拥有的发展。永远不会有“HTML6”，因此通常将当前状态的Web标记简单地称为“HTML”。

因为浏览器需要支持Web上的旧内容，所以不依赖doctype来告诉浏览器在给定文档中应支持哪些功能。换句话说，仅仅是doctype并不会使您的页面符合现代HTML功能。实际上，无论使用哪种doctype，浏览器都将逐个案例确定功能支持。事实上，您可以将旧的doctype与页面上的新HTML5元素一起使用，并且页面的呈现方式与使用新doctype时相同。

元素

元素是HTML文件中的顶级元素——这意味着它包含文档中除doctype之外的所有内容。元素分为两部分——和部分。网页文件中的所有其他内容都将放置在元素中或元素内部。下面的代码显示了元素，它位于doctype声明之后，并包含和元素：

<!DOCTYPE html>

如何在HTML中使用标签

部分包含有关文档的重要信息，这些信息不会显示给最终用户——例如字符编码以及CSS文件的链接，可能还有JavaScript文件。这些信息由浏览器、搜索引擎和屏幕阅读器等机器使用：

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

上面…标签之间包含的所有元素都很重要，但最终用户看不到——除了<title></title>文本，它将出现在在线搜索和浏览器标签中。

如何在HTML中使用标签

部分包含在浏览器中显示的所有内容——例如文本、图像等等。如果您想向最终用户展示某些内容，请确保将其放在打开和关闭…标签之间：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>HTML5 Boilerplate</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <h1 id="Page-Title">Page Title</h1>
  <🎜>
</body>
</html>

HTML5 Template: A Base Starter HTML Boilerplate for Any Project

lang属性是什么？

元素理想情况下应包含lang属性，如上面的代码所示（）。其主要目的是告诉屏幕阅读器等辅助技术在朗读时如何发音。（此属性对于页面验证不是必需的，但如果您不包含它，大多数验证器会发出警告。）

上面显示的lang属性的值为en，这指定文档是用英语编写的。所有其他口语都有值，例如法语的fr、德语的de、印地语的hi等等。（您可以在维基百科上找到语言代码的完整列表。）

HTML文档字符编码

HTML文档部分的第一行是定义文档字符编码的行。我们在网页上阅读的字母和符号被定义为一系列数字，有些字符（如字母）以多种方式编码。因此，告诉您的计算机您的网页应该参考哪个编码很有用。指示字符编码是一个可选功能，不会在验证器中导致任何警告，但对于大多数HTML页面来说，它是推荐的：

<!DOCTYPE html>

注意：为了确保某些旧版浏览器正确读取字符编码，整个字符编码声明必须包含在文档的前512个字符中的某处。它也应该出现在任何基于内容的元素（如我们示例中稍后出现的<title></title>元素）之前。

为什么在HTML5模板中使用UTF-8字符编码？

上面的字符编码示例使用UTF-8字符集。在几乎所有情况下，utf-8都是您应该在文档中使用的值。此编码涵盖了其他编码中未包含的各种字符。您可能在Web上遇到过奇怪的字符——例如�——这显然是一个错误。这通常是因为浏览器无法在文档中指定的字符集中找到预期的字符。

UTF-8涵盖了各种字符，包括全球各种语言的许多字符，以及许多有用的符号。正如万维网联盟所解释的那样：

基于Unicode的编码（如UTF-8）可以支持多种语言，并且可以适应任何语言混合的页面和表单。它的使用还可以消除服务器端逻辑，从而单独确定为每个服务页面或每个传入表单提交的字符编码。这大大降低了处理多语言网站或应用程序的复杂性。

字符编码的完整解释超出了本文的范围，但如果您想更深入地研究，您可以阅读HTML规范中的字符编码。

X-UA-Compatible是什么意思？

您有时会在HTML文档的中看到这一行：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>HTML5 Boilerplate</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <h1 id="Page-Title">Page Title</h1>
  <🎜>
</body>
</html>

此元标记允许Web作者选择应呈现页面的Internet Explorer版本。现在Internet Explorer在很大程度上只是一个糟糕的回忆，您可以安全地将此行从代码中删除。（我们已将其从HTML5模板中删除。）如果您确定您的网页可能会在旧版本的IE中查看，那么可能值得包含它。您可以在Microsoft网站上阅读更多关于此元标记的信息。

视口元元素

视口元元素是您几乎在每个HTML5模板中都会看到的特性。它对于响应式Web设计和移动优先设计非常重要：

<!DOCTYPE html>

此<meta>元素包含两个作为名称/值集一起工作的属性。在这种情况下，名称设置为viewport，值为width=device-width, initial-scale=1。这仅供移动设备使用。您会注意到该值有两个部分：

width=device-width：您希望网站呈现的视口的像素宽度。
initial-scale：这应该是一个介于0.0和10.0之间的正数。“1”的值表示设备宽度和视口大小之间存在1:1的比率。

您可以在MDN上阅读更多关于这些元元素特性的信息，但现在只要知道，在大多数情况下，此元元素及其设置最适合移动优先的响应式网站。

<title></title>、描述和作者

HTML基础模板的下一部分包含以下三行：

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

<title></title>是在浏览器标题栏中显示的内容（例如，当您将鼠标悬停在浏览器选项卡上时），它也显示在搜索结果中。此元素是部分中唯一必需的元素。描述和作者元元素是可选的，但它们确实为搜索引擎提供了重要信息。在搜索结果中，上面代码示例中的标题和描述将如下所示。

HTML5 Template: A Base Starter HTML Boilerplate for Any Project

您可以在中放置任意数量的有效元元素。

用于社交卡片的Open Graph元元素

如上所述，所有元元素都是可选的，但许多元元素对SEO和社交媒体营销都有好处。HTML5模板的下一部分包含其中一些元元素选项：

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>HTML5 Boilerplate</title>
  <link rel="stylesheet" href="styles.css">
  <🎜>  
</head>

这些<meta>元素利用了所谓的Open Graph协议，还有许多其他您可以使用的元素。这些是您最常使用的元素。您可以在Open Graph网站上查看可用Open Graph元选项的完整列表。

这里包含的那些元素将在链接到社交媒体帖子时增强网页的外观。例如，这里包含的五个<meta>元素将出现在嵌入以下数据的社交卡片中：

内容的标题
提供的内容类型
内容的规范URL
内容的描述
与内容关联的图像

当您看到在社交媒体上共享的帖子时，您通常会看到这些数据位会自动添加到社交媒体帖子中。例如，如果您包含指向GitHub主页的链接，则会在推文中显示以下内容。

HTML5 Template: A Base Starter HTML Boilerplate for Any Project

Favicon和Touch图标

HTML5模板的下一部分包含<link>元素，这些元素指示要包含为favicon和Apple touch图标的资源：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>HTML5 Boilerplate</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <h1 id="Page-Title">Page Title</h1>
  <🎜>
</body>
</html>

当有人查看您的网站时，favicon将出现在浏览器选项卡中。favicon.ico文件用于旧版浏览器，不必包含在代码中。只要您的favicon.ico文件包含在项目的根目录中，浏览器就会自动找到它。favicon.svg文件用于支持SVG图标的现代浏览器。您也可以使用.png文件代替。

最后一个元素引用在将页面添加到用户的家庭屏幕时在Apple设备上使用的图标。

您可以在这里包含其他选项，包括引用其他图标的Web应用程序清单文件。有关完整的讨论，我们建议您阅读Andrey Sitnik关于此主题的文章。但是这里包含的那些对于简单的HTML入门模板就足够了。

包含CSS样式表和JavaScript文件

HTML入门模板的最后两个重要部分是对一个或多个样式表以及可能还有JavaScript文件的引用。当然，两者都是可选的，尽管很少有网站没有至少一些CSS样式。

在HTML模板中包含CSS样式表

样式表可以包含在文档中的任何位置，但您通常会在部分看到它：

<!DOCTYPE html>

<link>元素将Web浏览器指向外部样式表，以便它可以将这些CSS样式应用于页面。<link>元素需要rel属性为stylesheet。过去，通常还会包含type属性，但实际上它从未真正需要，因此如果您在Web上找到包含它的旧代码，只需将其删除即可。

请注意，我们在CSS链接的末尾添加了?v=1.0查询字符串。这是完全可选的。当您更新样式表以更新此查询字符串（例如，更新为1.1或2.0）时，这是一个方便的技巧，因为这样做可以确保浏览器会丢弃任何旧的、缓存的CSS文件副本并加载新的版本。

值得注意的是，您不必使用<link>元素来在网页上包含CSS，因为您可以改为将所有样式放在页面本身的<style></style>…标签内，位于部分。这在试验布局时非常方便，但通常不建议在活动站点上这样做，因为这些样式在其他页面上将不可访问，从而导致低效和/或重复的代码。

在HTML模板中包含JavaScript文件

JavaScript代码通常通过⋮ <p> </p>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>HTML5 Boilerplate</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <h1 id="Page-Title">Page Title</h1>
  <🎜>
</body>
</html>

将

标签内来嵌入脚本：

关于旧版浏览器和新元素的说明<article></article><aside></aside> <recipe></recipe>当HTML5引入时，它包含许多新元素，例如<ziggy></ziggy>和。您可能会认为对未识别元素的支持对于旧版浏览器来说是一个主要问题——但事实并非如此！大多数浏览器实际上并不关心您使用什么标签。如果您有一个HTML文档，其中包含元素（甚至元素），并且您的CSS将某些样式附加到该元素，几乎每个浏览器都会像这完全正常一样进行处理，而不会抱怨地应用您的样式。

当然，这样的假设文档将无法验证，并且可能存在可访问性问题，但它会在几乎所有浏览器中正确呈现——例外情况是旧版本的Internet Explorer (IE)。在第9版之前，IE阻止未识别的元素接收样式。渲染引擎将这些神秘元素视为“未知元素”，因此您无法更改它们的外观或行为。这不仅包括我们想象的元素，还包括在开发这些浏览器版本时尚未定义的任何元素，包括新的HTML5元素。

幸运的是，不支持新元素样式的旧版浏览器如今几乎不存在，因此您几乎可以在任何项目中安全地使用任何新HTML元素而无需担心。

也就是说，如果您

确实需要支持古老的浏览器，您仍然可以使用可靠的HTML5 Shiv，这是一个最初由John Resig开发的简单的JavaScript片段。它受到Sjoerd Visscher作品的启发，它使新HTML5元素在旧版本的IE中可设置样式。不过，实际上，今天不需要这样做。正如caniuse.com所示，HTML5元素在所有正在使用的浏览器中都受支持。

完整的HTML5模板