且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

《HTML5与CSS3实战指南》——2.3 HTML5常见问题

更新时间:2022-10-12 22:42:30

本节书摘来自异步社区《HTML5与CSS3实战指南》一书中的第2章,第2.3节,作者: 【美】Estelle Weyl , Louis Lazaris , Alexis Goldstein 更多章节内容可以访问云栖社区“异步社区”公众号查看。

2.3 HTML5常见问题

在简要介绍了HTML5标记以后,您可能会有一些问题。以下是一些常见问题的答案。

2.3.1 为什么这些变更仍能够在旧版浏览器中工作
这是许多开发人员难于接受HTML5的地方。其实这根本不是问题,为了便于读者理解,我们会将HTML5和CSS3的一些新功能(后面章节将介绍)进行对比。

在CSS中,在添加新功能时(例如,border-radius属性将圆角添加到元素中),同时也需要将它添加到浏览器呈现引擎中,因此旧版浏览器无法识别它。所以,用户在使用不支持border-radius的浏览器浏览网页时,圆角就变成了方形。CSS3的其他功能也与其类似,所以在某种程度上降低了它的使用性能。

许多开发人员认为HTML5与CSS的工作方式类似。某些高级功能及我们在本书中稍后介绍的API可能是这样的,但并不是所有的更改都是如此,比如更简单的语法、减少的冗余和新文档类型。

在精心研究了旧版浏览器可以处理及不可以处理什么之后,才对HTML5语法进行了定义。例如,在HTML5中,至少需要15个字符组成文档类型声明,以便所有浏览器以标准模式显示页面。

同样,XHTML需要在html元素中包含更长的字符编码声明和其他的属性来用于验证,浏览器并不需要他们来正确显示页面。再次声明,旧版浏览器经过了精心检测,最后决定简化字符编码并删除xmlns属性,浏览器仍将正确显示页面。

经过简化的script和link元素也属于“简化但不破坏旧页面”这一类别。我们上面看到的Boolean属性同样也属于此类别,浏览器通常忽略像checked和disabled这样的属性值,那为什么还要提供这些属性呢?

如第1章所述,您不应害怕使用HTML5。设计该语言时,已经考虑到向后兼容性的问题,并以尽可能支持现有内容为目标。

与CSS3和JavaScript中的更改不同,必须在浏览器制造商确实对此进行支持以后,新添加部分才可得到执行。使用HTML5语法则不需要等待新版浏览器的发行。此外,当使用新的语义元素时,只需少量JavaScript代码即可与旧版浏览器兼容。

什么是标准模式?

当基于标准的Web设计处于起步阶段时,浏览器制造商们就面临着一个问题:支持新标准,在许多情况下,将会打破为旧版非标准浏览器设计的现有网页的向后兼容性。浏览器制造商需要一个信号来指示既定网页能够按照标准来呈现。他们在文档类型中发现这样一个信号:新的、符合标准的网页包含格式正确的文档类型,旧版非标准网页通常则没有。

将文档类型作为信号使用,浏览器可以在标准模式(它们尝试按照标准以呈现字母的方式呈现元素)和quirks模式(它们试图模仿旧版浏览器“离奇”的呈现能力,以确保页面按照意图呈现)之间进行切换。

可以肯定地说,在目前的开发领域,几乎每一个网页都有一个适当的文档类型,因此将以标准模式呈现;因此,您将不太可能要处理一个由quirks模式呈现的页面。当然,如果一个用户使用非常古老的浏览器(比如Internet Explorer 4)浏览网页,将会使用该浏览器的呈现模式显示页面。这就是quirks模式所要模仿的,而且无论是否使用文档类型,它都将这样运行。

尽管XHTML和旧版的HTML文档类型包含了所引用规范的确切版本信息,但是浏览器并没有真正利用这种信息。只要呈现了一个看似正确的文档类型,它们就将以标准模式呈现页面。因此,HTML5的文档类型已经精简到了启动任何浏览器标准模式所需的最低限度。

有关更多信息及一张概述了不同浏览器以quirks模式呈现的原因的图表,请参见Wikipedia1。您也可以在SitePoint的CSS参考资料2中阅读关于标准模式和quirks模式的概述。
2.3.2 是否需要关闭所有标签
在基于XHTML的语法中,需要关闭所有元素,即使已经有了相应的结束标记(比如</html>)或在void元素的情况下,在标签结尾处有一个正斜杠。后者是不包含子元素(比如input、img或link)的元素。

您仍可以在HTML5中使用该语法样式,您更喜欢它可能是由于为了保持编码的一致性和可维护性,但已不需要添加尾部反斜杠以用于void元素验证。继续我们的“精简”主题,HTML5允许您在此类元素后面删除尾部反斜杠,这样您的标记看起来更加干净、整洁。

值得一提的是,在HTML5中,大多数元素可以包含嵌套元素,但如果恰巧是空的,仍然需要有一个相应的结束标记配对。此规则虽有例外,但是可以简单地认为这就是它的普遍性。

2.3.3 关于其他的基于XHTML的语法使用习惯
关于这个问题,其实省略结尾斜线仅是基于HTML5语法与XHTML不同的一方面。实际上,HTML5验证完全忽略了语法风格问题,它只在编码错误以某种方式终止文件运行时才报错。

这就意味着如果能够通过验证,那么下面5行代码就是完全等同的:


《HTML5与CSS3实战指南》——2.3 HTML5常见问题https://yqfile.alicdn.com/1ed26f1b182b7be205c5f2de9fc24128bfc88f4c.png" >

在HTML5中,您可以使用小写、大写或大小写混合的标记名称或属性,同样也可以使用引用或未引用的属性值(只要这些值不包含空格或其他保留字符),都能通过验证。

在XHTML中,所有属性都必须有值,即使它们是多余的。例如,您经常会看到类似下面的标记:


《HTML5与CSS3实战指南》——2.3 HTML5常见问题

在HTML5中,属性是“开”或“关”(称为布尔属性)可以不用指定任何值。因此上述input元素可以写成下列代码:


《HTML5与CSS3实战指南》——2.3 HTML5常见问题

因此,至少就语法而言,HTML5的验证要求宽松了许多。这是否就意味着您可以无所顾忌并在任意指定元素上使用任何语法呢?不,我们当然不建议这样做。

我们鼓励开发人员选择一种语法风格,并坚持下去—特别是如果您在一个团队中工作,代码维护和可读性都是非常重要的。我们还建议(虽然这不是必须的)您选择最简单的编码风格,并保持一致。

以下是一些准则,您可以考虑使用。

  • 所有元素和属性都小写,就像您使用XHTML一样。
  • 除去那些不要求用结束标记的元素,我们建议关闭所有包含内容的元素 (比如<p>Text</p>)。
  • 尽管您可以不给属性值添加引号,但是极有可能您所编写的属性要求添加引号(例如,当声明由空格分开的多个类时,或在URL上附加查询字符串值时)。因此,为了保持统一性,我们建议您使用引号。
  • 元素没有任何内容,可删除尾部反斜杠(比如meta或input)。
  • 避免为布尔属性提供多余值(例如,使用<input type="checkbox"checked>,而不使用<input type="checkbox" checked="chec-ked">`)。

并不是要求大家全部接受以上建议,但我们相信这些合理的语法建议能够实现干净标记,并易于阅读和维护。

如果您滥用编码风格,包含大量没有必要的东西,就是对HTML5创始者在力求语言简化所取得的进展方面加以否定。