HTML5模板：适用于任何项目的基本样板

2021-12-03 05:06:03

阅读 9367次标签：开发作者： yipinweike01

　　在学习HTML5并将新技术添加到工具箱时，您可能会想要构建自己的HTML样板，以开始所有以后的项目。我们鼓励这样做，本文可以帮助您构建自己的HTML模板。

　　在本文中，我们将研究如何入门。让我们从一个简单的HTML5页面开始：

　　 The HTML5 Herald < script src="js/scripts.js"> < /script>

　　有了该基本模板之后，现在让我们检查标记的一些重要部分，以及这些部分可能与HTML5之前的HTML编写方式有何不同。

　　Doctype

　　首先，我们有Document Type Declaration或doctype。这只是告诉浏览器(或任何其他解析器)正在查看的文档类型的一种方式。对于HTML文件，它表示HTML的特定版本和风格。doctype应该始终是任何HTML文件顶部的第一项。许多年前，doctype声明是一个丑陋且难以记忆的混乱。对于XHTML 1.0 Strict：

　　对于HTML4 Transitional：

　　尽管文档顶部的一长串文本并没有真正伤害我们(除了迫使我们站点的查看器下载一些额外的字节)，HTML5消除了那种难以理解的眼神。现在您需要的是：

　　很简单，而且很重要。可以使用大写，小写或大小写混合的doctype。您会注意到声明中明显缺少“ 5”。尽管当前的Web标记迭代被称为“ HTML5”，但它实际上仅是先前HTML标准的演进-将来的规范将仅仅是我们今天拥有的标准的发展。

　　由于通常要求浏览器支持Web上的所有现有内容，因此无需依赖doctype来告诉他们在给定文档中应支持哪些功能。换句话说，仅doctype不会使您的页面兼容HTML5。这完全取决于浏览器。实际上，您可以在页面上使用具有新HTML5元素的这两种旧文档类型之一，并且该页面将呈现与使用新doctype时相同的外观。

　　html元素

　　任何HTML文档中的下一个html元素是HTML5，该元素都没有发生太大变化。在我们的示例中，我们包含lang了值为的属性，该属性en指定文档为英语。在基于XHTML的语法中，需要包含一个xmlns属性。在HTML5中，不再需要此lang属性，甚至该属性对于文档验证或正常运行也是不必要的。

　　因此，这是到目前为止的内容，包括结束标记：

　　head元素

　　页面的下一部分是本节。内的第一行head是定义文档字符编码的行。自XHTML和HTML4以来，这是另一个已简化的元素，是可选功能，但建议使用。过去，您可能是这样写的：

　　HTML5通过将字符编码标记减少到最低限度来对此进行改进：

HTML5模板：适用于任何项目的基本样板

　　在几乎所有情况下，utf-8都是您将在文档中使用的值。字符编码的完整说明不在本文的讨论范围之内，您也可能不会那么感兴趣。尽管如此，如果您想更深入地研究，可以阅读有关W3C或WHATWG的主题。

　　注意：为确保所有浏览器正确读取字符编码，必须在文档的前512个字符中的某些位置包含整个字符编码声明。它也应该出现在任何基于内容的元素之前(例如在我们的示例站点中紧随其后的元素)。

　　关于这个主题，我们可以写很多东西，但是我们想让您保持清醒-因此，我们将为您省去那些细节!现在，我们很乐意接受此简化的声明，然后继续进行文档的下一部分：

　　The HTML5 Herald

　　在这些行中，HTML5与以前的语法几乎没有什么不同。页面标题(内的唯一必需元素head)被声明为与以前相同，并且我们包含的meta标签只是可选示例，用于指示将其放置在何处;您可以根据需要meta在此处放置尽可能多的有效元素。

　　此标记块的关键部分是样式表，该样式表是使用常规link元素包含的。link除href和外，没有其他必填属性rel。该type属性(在旧版HTML中是常见的)不是必需的，也不需要指示该样式表的内容类型。

　　公平竞争

　　引入HTML5时，它包含了许多新元素，例如article和section。您可能会认为这是较旧的浏览器对无法识别的元素的支持所面临的主要问题，但是您会错了。这是因为大多数浏览器实际上并不关心您使用什么标签。如果您有一个带有recipe标签(或ziggy标签)的HTML文档，并且CSS在该元素上附加了一些样式，则几乎每个浏览器都将像完全正常一样继续运行，而无需抱怨即可应用样式。

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

　　好消息是，最近几天，IE的使用率已经下降，IE11的全球使用率已下降到约2.7%(截至2018年)，而实际上之前的版本已下降。

　　但是，如果您确实需要支持古老的浏览器，则仍然可以使用可信赖的HTML5 Shiv，这是John Resig最初开发的非常简单的JavaScript。受Sjoerd Visscher的想法启发，它使新的HTML5元素可在IE的旧版本中进行样式设置。不过，确实，现在不需要了。正如我可以使用所指出的那样，所有现代浏览器甚至最新的旧版本都支持HTML5元素。(单击“显示全部”选项以查看所有浏览器版本。)一个例外是某些浏览器无法识别较新的main元素。但是，对于这些浏览器，只要添加适当的样式(例如将其设置为block元素)，您仍然可以使用此元素。

　　剩下的就是历史

　　查看开始模板的其余部分，我们具有常用body元素以及其结束标记和结束html标记。我们还在script元素内引用了JavaScript文件。

　　与link前面讨论的标签非常相似，该< script>标签不需要您声明type属性。如果您曾经编写过XHTML，则可能会记得script标签如下所示：

　　< script src="js/scripts.js" type="text/javascript"> < /script>

　　因为从实际上所有角度来看，JavaScript是Web上唯一使用的真正脚本语言，并且由于所有浏览器都假定您正在使用JavaScript，即使您没有明确声明这一事实，因此type在HTML5文档中该属性也是不必要的：

　　< script src="js/scripts.js"> < /script>

　　我们已将script元素放在页面底部，以符合嵌入JavaScript的最佳做法。这与页面加载速度有关。当浏览器遇到脚本时，它将在解析脚本时暂停下载并呈现页面的其余部分。如果在页面顶部任何内容之前都包含大型脚本，这将导致页面加载速度大大降低。这就是为什么大多数脚本应放在页面的最底部，以便仅在页面其余部分加载后才进行解析的原因。

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

　　好了，由于时间关系，今天我小编给大家介绍到这里了，如果觉得有用，就请多多关注我们一品威客平台(epwk.com)哦!