HTML5模板:启动你的下一个项目的基本代码模板

WebFX总统。Bill在互联网营销行业有超过25年的经验,擅长SEO, UX,信息架构,营销自动化等。William在希彭斯堡和麻省理工学院的科学计算和教育背景为MarketingCloudFX和WebFX的其他关键研发项目提供了基础。

如果你正在寻找一个既免费又易于使用的基本HTML5模板,那么你就来对地方了。

我们的简单模板为您提供了一个基本结构,您可以定制以满足您的网站需求。下载还包括一个注释的HTML5文件,其中有您的web项目的有用细节。你在下面的图片中看到的是支持html5的网页的样板标记(一个空白的HTML文档模板)。

Sublime Text中的HTML5模板截图点击下载按钮获得你的HTML5模板,然后继续阅读以理解文件夹中的内容以及如何使用所有内容。点击下载HTML5模板在您使用的任何程序中打开HTML5代码模板,然后填写空白。

理解HTML5模板的注释版本

在这个版本的HTML5代码模板中突出显示的注释将告诉您文档中的每一项。

          HTML5评论版

对基本HTML5模板的解释

在我看来,这个HTML5模板是实用的支持HTML5的文档的最低要求。我想详细说明我使用这个模板所做的一些决定。

放置脚本

最好的做法是将呈现阻塞脚本放置在HTML文档的末尾,也就是关闭之前身体< / >标记(或者一开始就选择不使用它们)。这样做可以让视觉内容、CSS和文档对象模型首先呈现,提高网页的感知速度和性能。

但是在末尾引用脚本并不总是可能的,因此如果需要的话,可以将脚本引用移到HTML文档的上端。此外,作为渐进式增强的一种形式,您应该优先使用HTML5异步属性与你<脚本>引用,以便它们可以异步和并行加载,至少在能够这样做的web浏览器中。

例子:

          < script src =< script>' width="534" height="84">

重要提示:如果您不熟悉浏览器如何加载、呈现和执行JavaScript,这两种脚本放置实践可能会严重破坏您的web页面。

我知道这一点的原因,确实是因为我过去破坏过很多网页。

“viewport”元标签

以下是小屏幕专用的:

          <meta name=

如果没有这个meta标签,网页可能是这样的:在手机上加载的HTML5页面没有viewport meta标签如上所示,Mobile Safari将尝试使用设备的本机PPI将页面渲染为默认宽度980px。然而,使用这个模板中使用的“viewport”元标签,我们告诉浏览器缩放内容以匹配设备的宽度。

这将导致以下结果:带有viewport meta标签的HTML5页面后者更容易阅读。

使用HTML5模板支持IE 9及以下版本

尽管IE团队为让用户更新到最新版本做出了值得称赞的努力,但现实情况是仍然有很多人在使用IE 9及以下版本。

为了能够呈现新的HTML5元素和媒体查询,该模板有一个用于服务的条件注释html5shiv亚历山大·法卡斯和Respond.js斯科特·杰尔。

他们将通过一个可靠的公共CDN服务。条件注释只会将这些脚本加载到ie9及以下版本的用户。

此外,这个标记模板有以下元标记:

          < meta http-equiv =“X-UA-Compatible”内容=“IE =边缘”>

这明确指示Internet Explorer使用用户机器中可用的最新布局引擎。当我们前进到未来,使用过时的IE浏览器不再是一个问题,我希望能够从模板中删除这些特定于浏览器的项目。

许多人会和我争论,特定于浏览器的标记不属于通用的样板,但在这个例子中,我更倾向于实用性/实用主义而不是语义。

为了能够使用HTML5元素和媒体查询,添加一点额外的标记并有条件地为两个小脚本提供服务是一种合理的妥协。

HTML5代码模板的Android和iOS主屏幕图标

大约36%的HTML5模板是为了支持特定的浏览器系列,所以我决定默认不包含主屏幕图标引用。然而,为你的网页添加Android和iOS主屏幕图标是个好主意,因为这是两种非常流行的移动操作系统。

下面是我建议的标记:

          <meta name=   ." width="685" height="160">

以上内容将帮助你了解Android主屏幕和iOS主屏幕(从最低分辨率的iOS设备到带有Retina显示屏的iPad)。现在。

注意:别忘了填空href引用指向图标的URI。

关于图标尺寸的更多信息,请阅读以下文档:

  • 为安卓
  • iOS

说句题外话,我希望在不久的将来,我们都能同意一种非私有的方式,包括使用开源图像格式的书签图标。

HTML缩进风格

的第一个子元素开始缩进,这是我对HTML文档的偏好身体< >元素。对于开发人员来说,这更加实用和可读,因为在设置了样板项之后,在开发前端标记时它们很少会更改。

然而,在我们开发前端的过程中经常会发生变化身体< >元素。例如,在构建布局和内容结构时,我倾向于非常频繁地更新元素层次结构、元素类型和嵌套结构。

如果我从缩进开始< >头元素,这是语义上的事情,当我读到文档的核心时,我已经在第二个制表位了。

          

在处理深层层次结构、大量嵌套和大量内容时,这两个额外的制表符停止加起来会导致大量的重缩进。

此外,我有时在小屏幕上工作,这种类型的缩进模式使代码难以阅读和滚动。相反,我更喜欢这样做:

          

这个HTML5模板适合上面的标记缩进样式。这种风格让我可以忽略样板内容,同时也让它更容易处理正在开发的元素。

如果您被我的缩进样式所困扰——如果您有,我完全理解,因为这些类型的东西也困扰着我——您可以轻松地自定义这个模板来实现您首选的源代码格式化系统。

或者,更好的是,使用繁重与可以在投入生产之前为您自动缩进或缩小的库结合使用。

HTML5空白模板许可:公共领域奉献

如果您想使用这个HTML5模板,不需要请求许可。

更明确地说:该模板不受任何版权限制。您可以使用、销售、修改和分发模板,而无需请求许可、提供属性或任何其他要求。HTML标记在CC0 1.0 Universal下。

注意:我不拥有模板中引用的外部脚本,因此公共域奉献只引用我编写的标记。

在GitHub上查看HTML5模板信息

WebFX职业

加入我们的使命,为全球的企业提供业界领先的数字营销服务,同时建立您的个人知识和个人成长。

我们招聘! 视图30 +职位空缺!