当你建立一个新的网站，这些天你会希望它是HTML5兼容。但你也不想花不必要的时间从头开始学习HTML5的复杂性，是吗？

幸运的是，HTML5样板模板可以提供帮助。这是一个简单的前端模板，您可以使用它在几分钟内创建一个HTML5网站。但它也足够强大，你可以使用它作为一个复杂的，充分特色的网站的基础。

本HTML5样板教程将介绍模板中包含的内容、您需要了解的有关如何使用模板的基本知识，以及一些用于进一步学习的资源。我还将向您展示如何使用模板创建一个只有几行HTML的非常基本的站点。

html5样板模板

当您从HTML5样板下载模板时，您会得到许多文件夹和文件。以下是ZIP文件的内容：

我们不会在这里检查模板中的每个元素，只检查基本元素。不过，为了确保您拥有使用所有文件的资源，我们将从帮助文档开始。

html5样板帮助文档

样板有一个托管在GitHub中的帮助文档集合。当你有技术问题或者想知道为什么要这样设计的时候，这是一个很大的帮助。

文档中的几乎所有内容都包含在模板的doc文件夹中。您将看到许多Markdown（.md）文件，这些文件对了解如何构建样板文件站点有很大帮助。

如果你想通读所有的东西，从总经理并按照链接从那里到其他降价文件。如果你正在寻找关于某个特定问题的帮助，找到听起来可能相关的文件；用法.md是个好的开始。

从html5样板文件的css开始

HTML5样板模板附带两个CSS文件：主.css以及normalize.css.

第二个文件，规范化.css，帮助不同的浏览器以一致的方式呈现元素。要进一步了解它的工作原理，请查看规范化.cssGitHub项目。

与此同时，主.css在这里你可以输入任何你需要的代码来用CSS格式化你的网站。模板中包含的标准CSS是开发人员和HTML5样板社区进行研究的结果。它可读性强，可以在不同的浏览器中很好地显示。

如果您想添加自己的CSS，可以将其添加到作者的自定义样式部分。我将为示例页面添加一些链接样式：

基本CSS中还包含许多有用的助手类。其中一些对标准浏览器和屏幕阅读器（或某些组合）隐藏项目。

也在主.css您将找到对响应式设计和有用的打印设置的支持。

CSS中的注释清楚地解释了所有这些项目：

一般来说，您可以从基本CSS开始。

将自己的html添加到模板

样板文件包括两个HTML文件：404.HTML和索引.html.

索引页是您创建主页的地方（如果您要创建一个简单的单页机，则是您唯一的页面）。

如果在浏览器中打开索引页，将看到一行文本。但是查看HTML会发现更多隐藏在代码中的东西。唯一你真正需要担心的是谷歌分析代码（找到文本“UA-XXXXX-Y”并替换为你自己的跟踪代码）。

索引页上其余的HTML包括web应用程序的信息、旧浏览器的通知和有用的JavaScripts。当你开始的时候，你不应该把这些都搞砸。

但是，预先填充它们是确保您的站点准备充分利用HTML5的一个好方法。

要创建页面，请在文件中的标记之间**HTML。以下是我将补充的一些关于我自己的基本信息：

要创建更多页面吗？创建此文件的副本并重命名它们，这样就不必复制和粘贴所有HTML。然后添加内容。

如果您想自定义404页面，只需修改HTML文件。不知道在404页上放什么？看看这些伟大的404页面设计的例子。

添加favicon（和其他图标）

想替换你的favicon吗？那么favicon.ico公司是您需要替换的文件。

如果你还没有，你需要创建一个。您可以使用在线favicon生成器或自行设计。只需确保它是16 x 16像素，并且具有.ico文件类型。

把一些想法放进你的favicon是个好主意。用这些著名的技巧来指导你的头脑风暴。确保添加新favicon时图标文件.

您可能会注意到，在站点的根目录中还有三个其他图像：图标.png, 平铺.png、和平铺-宽.png. 这些是干什么用的？

• 图标.png用于Apple touc**标。如果你构建了一个web应用程序，当iPhone或iPad用户将应用程序添加到主屏幕时，就会使用这个图标。
• 平铺.png和瓷砖-宽.png用于Windows的“pin”功能，并将显示在windows10中。

为所有这些情况提供图标是一个好主意——但是如果你不构建一个web应用程序，它的优先级可能会降低。

添加更多功能

一旦你添加了你的HTML和favicon（以及任何你想要包含的CSS），你的站点就可以发布了。这就是HTML5样板文件的易用性。上传到你的服务器，你就完成了！

我们的页面是这样的：

正如你所看到的，仅仅几行文字就创建了一个功能齐全（如果有点乏味的话）的网站。不多，但只花了几分钟。而且它具有HTML5的高度可扩展性。这就是样板模板的威力。

但是如果您愿意，还可以使用样板模板做更多的事情。如果您要查找特定的内容，很有可能在帮助文档中找到它。

如果你不确定你能用HTML5做什么，但是你想知道，有很多网页设计教程可以帮助你。