在本文中，我们将了解如何开始。让我们从一个简单的，基本的HTML5页面：开始

！doctypehtml

超文本标记语言

头

metacharset='utf-8 '

标题5先驱/标题

元名称='描述'内容='头条新闻'

meta name=' author ' content=' SitePoint '

linkrel='样式表' href=' CSS/style . CSS？v=1.0 '

/head

身体

script src=' js/scripts . js '/script

/body

/html

有了基本的模板，让我们来检查一下标签的一些重要部分，以及它们与HTML5之前编写HTML的方式有何不同。

文档类型

首先，我们有一个“文档类型声明”或doctype。这只是告诉浏览器(或任何其他解析器)您正在查看的文档类型的一种方式。对于HTML文件，它代表了HTML的一个特定版本和样式。

Doctype应该始终是任何HTML文件顶部的项。很多年前，doctype的声明是一个丑陋而难忘的烂摊子。对于XHTML 1.0严格：

！DOCTYPEhtmlPUBLIC '-//W3C//DTDXHTML 1.0 strict//EN '

http://www . w3 . org/TR/XHTML 1/DTD/XHTML 1-strict . DTD '

HTML4转换：

！' DOCTYPEHTMLPUBLIC '-//W3C//DTDHTML 4.01 transitional//EN '

http://www . w3 . org/TR/html 4/los . dtd '

虽然文档顶部的长长的文本列表并没有真正伤害到我们(除了强迫我们网站的访问者下载一些额外的字节)，HTML5已经消除了难以辨认的眼中钉。你现在需要的是：

！doctypehtml

简单扼要。Doctype可以写成大写、小写或大小写混合。你会注意到声明中明显遗漏了“5”。虽然现在的web标记迭代叫“HTML5”，但其实只是之前HTML标准的演变。未来的规范只会是我们今天的发展。

因为浏览器通常需要支持网络上所有现有的内容，所以没有必要依赖文档类型来告诉他们给定的文档应该支持什么功能。换句话说，单靠doctype并不能让你的页面兼容HTML5。这完全取决于浏览器。

实际上，您可以在页面上使用这两种旧文档类型之一和新的HTML5元素，页面将呈现与使用新文档类型时相同的外观。

HTML元素

下一个HTML文档是一个HTML元素，在HTML5中没有显著变化。在我们的例子中，我们将lang属性的值设置为en，它指定文档是英文的。基于xhtml的语法中需要包含Xmlns属性。在HTML5中，这已不再是必需的，甚至连lang属性对于文档验证或正确操作都是不必要的。

这是我们目前的成果，包括闭/html标签:

！doctypehtml

htmllang='en '

/html

头部元件

页面的下一部分是头部。标题中的行定义了文档的字符编码。这是自XHTML和HTML4以来被简化的另一个元素。这是一个可选功能，但推荐使用。以前可以这样写：

meta http-equiv=' Content-TYPe ' Content=' text/html；charset=utf-8 '

HTML5通过将字符编码的元标签减少到至少：来改进这一点

metacharset='utf-8 '

几乎在所有情况下，utf-8都是您将在文档中使用的值。对字符编码的完整解释超出了本文的范围，您可能也不感兴趣。不过如果想更深入的学习，可以看看关于W3C或者WHATWG的话题。

注意：为了确保所有浏览器都能正确读取字符编码，整个字符编码语句必须包含在文档的前512个字符中。它还应该出现在任何基于内容的元素之前(比如在我们的示例站点中跟随它的title元素)。

关于这个话题，我们还有很多要写的，但是我们想让你保持清醒，所以我们不会告诉你那些细节！现在，我们满足于接受这个简化的陈述，然后进入文档：的下一部分

标题5先驱/标题

元名称='描述'内容='头条新闻'

meta name=' author ' content=' SitePoint '

linkrel='样式表' href=' CSS/style . CSS？v=1.0 '

在这几行中，HTML5几乎和前面的语法一样。页面标题的声明(表头必须的元素)和之前一样，我们包含的元标签只是一些可选的例子，用来表示这些标签的位置；您可以在这里放置任意多的有效元元素。

这个标记块的关键部分是样式表，它是用通常的链接元素包含的。除了href和rel，link不需要其他属性。类型属性(在旧版本的HTML中很常见)不是必需的，也不需要用来指示样式表的内容类型。

公平竞争

HTML5推出的时候，包含了很多新元素，比如文章、小节。你可能认为这是旧浏览器支持未识别元素的主要问题，但你错了。这是因为大多数浏览器并不真正关心你使用什么标签。

如果你有一个带有菜谱标签(甚至是瑞格标签)的HTML文档，你的CSS在这个元素上附加了一些样式，几乎每个浏览器都会把它当成完全正常的操作，毫无怨言地应用你的样式。

当然，这样一个假设性的文档是不会被验证的，可能存在可访问性问题，但在几乎所有浏览器中都会被正确呈现——除了旧版的——互联网浏览器(IE)。在版本9之前，IE阻止无法识别的元素接收样式。

这些神秘元素被渲染引擎视为“未知元素”，你无法改变它们的外观或行为。这不仅包括我们想象的元素，还包括在开发浏览器版本时没有定义的任何元素。这意味着一个新的HTML5元素。

好消息是IE使用率下降，IE11全球使用率下降到2.7%左右(截止2018年)，之前的版本几乎从地图上消失。

但是如果真的需要支持老浏览器，还是可以使用可信的HTML5Shiv，这是一个非常简单的JavaScript，最初由JohnResig开发。受SjoerdVisscher想法的启发，它使新的HTML5元素能够在旧版本的IE中进行样式化。

但其实现在不需要了。所有的现代浏览器，甚至是最新和旧版本，都支持HTML5元素。一个例外是一些浏览器不能识别较新的主要元素。但是，对于这些浏览器，只要添加适当的样式(例如，将其设置为块元素)，您仍然可以使用该元素。

然后是历史

看看开始模板的其余部分，我们有一个公共的主体元素及其结束标记和结束html标记。我们还在脚本元素中引用了一个JavaScript文件。

很像前面讨论的链接标签，脚本标签不需要声明类型属性。如果你曾经写过XHTML，你可能记得你的脚本标签是这样的：

script src=' js/scripts . js ' type=' text/JavaScript '/script

因为JavaScript实际上是Web上真正使用的脚本语言，所有的浏览器都假设你在使用JavaScript，即使你没有明确声明这个事实，在HTML5文档中类型属性也是不必要的。

script src=' js/scripts . js '/script

我们将脚本元素放在页面的底部，以符合嵌入JavaScript的更佳实践。这和页面加载速度有关。当浏览器遇到脚本时，它会暂停下载，并在解析脚本时呈现页面的其余部分。

这将导致页面在加载任何内容之前在页面顶部包含一个大脚本时加载速度慢得多。这就是为什么大多数脚本应该放在页面的底部，这样它们只有在页面的其余部分被加载后才会被解析。

但是，在某些情况下(例如使用HTML5shiv)，脚本可能需要放在文档的开头，因为您希望它在浏览器开始呈现页面之前生效。

下一步

将HTML5提升到新水平的一种方法是尝试html 5样板。这个定期更新的资源为您的项目提供了一个方便的起点，包括由世界上数百名更好的程序员建立的所有最新的更佳实践。

即使只是想看一遍代码，看看这些天有些元素是怎么用的，比如文档头里的各种元元素，也值得下载看看。

另一种通过爬上一段楼梯来开发网站或网络应用程序的方法是尝试使用当今广泛使用的现代框架。

本文转载自中文网站