web前端开发注册的HTML5常见问题

在对HTML5标记进行了快速介绍之后，您可能会想到很多问题。以下是一些可能答案的一些答案。

为什么这些更改在旧版浏览器中仍然有效？

为了理解为什么这不是问题，我们可以将HTML5与CSS3中添加的一些新功能进行比较，我们将在后面的章节中进行讨论。

在CSS中，当添加了新功能（例如，border-radius将圆角添加到元素的属性）时，该功能也必须添加到浏览器的渲染引擎中，因此较旧的浏览器将无法识别它。如果用户在不支持的浏览器上查看页面border-radius，则圆角将显示为正方形。发生这种情况是因为默认情况下是四角，浏览器将忽略该border-radius声明。其他CSS3功能的行为类似，导致体验在一定程度上降低。

许多开发人员期望HTML5以类似的方式工作。尽管对于某些高级功能和API可能是正确的，我们将在本书的后面部分进行讨论，但到目前为止，我们所做的更改并非如此。也就是说，语法更简单，多余的属性更少以及新的doctype。

新建一个前端学习qun438905713，在群里大多数都是零基础学习者，大家相互帮助，相互解答，并且还准备很多学习资料，欢迎零基础的小伙伴来一起交流。

在仔细研究了旧版浏览器可以处理和不能处理的内容之后，或多或少定义了HTML5的语法。例如，组成HTML5中的doctype声明的15个字符是使每个浏览器以标准模式显示页面所需的最少字符。

同样，尽管XHTML需要更长的字符编码声明和html元素上的额外属性以进行验证，但浏览器实际上并不需要它们才能正确显示页面。再次，仔细检查了较旧的浏览器的行为，并确定可以简化字符编码并xmlns删除属性-并且浏览器仍将以相同的方式查看页面。

与对CSS3和JavaScript的更改不同，CSS3和JavaScript的更改仅在浏览器制造商实际实现时才受支持，而无需使用HTML5的标记语法来等待新浏览器版本的发布。在使用新的语义元素时，只需使用一小段JavaScript即可使所有真正的旧浏览器都可以使用。

注意：标准模式与怪癖模式

当基于标准的网页设计处于起步阶段时，浏览器制造商便面临一个问题：在许多情况下，支持新兴标准将破坏与旨在用于较旧的非标准浏览器实现的现有网页的向后兼容性。浏览器制造商需要一个信号，该信号指示要按照标准呈现给定的页面。他们在doctype中发现了这样的信号：新的符合标准的页面包括格式正确的doctype，而较旧的非标准页面通常没有。使用doctype作为信号，浏览器可以在标准模式（尝试以呈现元素的方式遵循字母的标准）和怪癖模式（尝试模仿旧版浏览器的“怪异”渲染功能）之间进行切换。确保页面呈现预期的效果）。

可以肯定地说，在当前的开发环境中，几乎每个网页都具有适当的doctype，因此将以标准模式呈现。因此，您几乎不必处理以怪癖模式呈现的页面。当然，如果用户正在使用非常老的浏览器（例如IE4）查看网页，则将使用该浏览器的呈现模式来呈现该页面。这就是怪癖模式所模仿的，无论使用哪种doctype，它都会这样做。

尽管XHTML和较旧的HTML文档类型包含有关它们所引用规范的确切版本的信息，但是浏览器从未真正使用过该信息。只要存在看似正确的文档类型，它们就会以标准模式呈现页面。因此，HTML5的doctype已被精简到触发任何浏览器中的标准模式所需的最低限度。可以在Wikipedia上找到更多信息以及概述导致不同浏览器以怪癖模式呈现的内容的图表。您还可以在SitePoint的CSS参考上阅读有关标准和怪异模式的完整概述。

是否应该关闭所有标签？

在XHTML中，要求所有元素都必须关闭-使用相应的结束标记（例如html），或者在void元素的情况下，在标记末尾使用正斜杠。空隙元素是元素不能包含子元素（例如input，img或link）。

您仍然可以在HTML5中使用该样式的语法（出于一致性和可维护性的原因，您可能会更喜欢它），但是验证不再需要在void元素上添加斜杠。继续以“减少脂肪”为主题，HTML5允许您省略此类元素的尾部斜杠，可以说是使标记更整洁且不那么混乱。

 

新建一个前端学习qun438905713，在群里大多数都是零基础学习者，大家相互帮助，相互解答，并且还准备很多学习资料，欢迎零基础的小伙伴来一起交流。

值得注意的是，在HTML5中，大多数可以包含嵌套元素的元素（但恰好是空的）仍然需要与相应的结束标记配对。此规则有例外（例如p标签和li标签），但是假设它是通用的则更简单。

其他基于XHTML的语法习惯又如何呢？

当我们讨论这个主题时，省略斜杠只是基于HTML5的语法的一个方面，与XHTML不同。实际上，HTML5验证程序完全忽略了语法样式问题，只会对可能以某种方式破坏文档的代码错误抛出错误。

这意味着在验证者的眼中，以下五行标记是相同的：

<span style="color:#000000"><code class="language-markup"><span style="color:#990055"><span style="color:#990055"><span style="color:#999999"><</span>link</span> <span style="color:#669900">rel</span><span style="color:#0077aa"><span style="color:#999999">=</span><span style="color:#999999">"</span>stylesheet<span style="color:#999999">"</span></span> <span style="color:#669900">href</span><span style="color:#0077aa"><span style="color:#999999">=</span><span style="color:#999999">"</span>css/styles.css<span style="color:#999999">"</span></span> <span style="color:#999999">/></span></span>
<span style="color:#990055"><span style="color:#990055"><span style="color:#999999"><</span>link</span> <span style="color:#669900">rel</span><span style="color:#0077aa"><span style="color:#999999">=</span><span style="color:#999999">"</span>stylesheet<span style="color:#999999">"</span></span> <span style="color:#669900">href</span><span style="color:#0077aa"><span style="color:#999999">=</span><span style="color:#999999">"</span>css/styles.css<span style="color:#999999">"</span></span><span style="color:#999999">></span></span>
<span style="color:#990055"><span style="color:#990055"><span style="color:#999999"><</span>LINK</span> <span style="color:#669900">REL</span><span style="color:#0077aa"><span style="color:#999999">=</span><span style="color:#999999">"</span>stylesheet<span style="color:#999999">"</span></span> <span style="color:#669900">HREF</span><span style="color:#0077aa"><span style="color:#999999">=</span><span style="color:#999999">"</span>css/styles.css<span style="color:#999999">"</span></span><span style="color:#999999">></span></span>
<span style="color:#990055"><span style="color:#990055"><span style="color:#999999"><</span>Link</span> <span style="color:#669900">Rel</span><span style="color:#0077aa"><span style="color:#999999">=</span><span style="color:#999999">"</span>stylesheet<span style="color:#999999">"</span></span> <span style="color:#669900">Href</span><span style="color:#0077aa"><span style="color:#999999">=</span><span style="color:#999999">"</span>css/styles.css<span style="color:#999999">"</span></span><span style="color:#999999">></span></span>
<span style="color:#990055"><span style="color:#990055"><span style="color:#999999"><</span>link</span> <span style="color:#669900">rel</span><span style="color:#0077aa"><span style="color:#999999">=</span>stylesheet</span> <span style="color:#669900">href</span><span style="color:#0077aa"><span style="color:#999999">=</span>css/styles.css</span><span style="color:#999999">></span></span></code></span>

在HTML5中，您可以使用小写，大写或大小写混合的标记名称或属​​性，以及带引号或不带引号的属性值（只要这些值不包含空格或其他保留字符），它们都将仅验证精细。

在XHTML中，所有属性都必须具有值，即使这些值是多余的也是如此。例如，在XHTML中，您经常会看到这样的标记：

<span style="color:#000000"><code class="language-markup"><span style="color:#990055"><span style="color:#990055"><span style="color:#999999"><</span>input</span> <span style="color:#669900">type</span><span style="color:#0077aa"><span style="color:#999999">=</span><span style="color:#999999">"</span>text<span style="color:#999999">"</span></span> <span style="color:#669900">disabled</span><span style="color:#0077aa"><span style="color:#999999">=</span><span style="color:#999999">"</span>disabled<span style="color:#999999">"</span></span> <span style="color:#999999">/></span></span></code></span>

在HTML5中，可以简单地将“ on”或“ off”属性（称为布尔属性）指定为没有值。因此，上述input元素可以编写为：

<span style="color:#000000"><code class="language-markup"><span style="color:#990055"><span style="color:#990055"><span style="color:#999999"><</span>input</span> <span style="color:#669900">type</span><span style="color:#0077aa"><span style="color:#999999">=</span><span style="color:#999999">"</span>text<span style="color:#999999">"</span></span> <span style="color:#669900">disabled</span><span style="color:#999999">></span></span></code></span>

因此，至少就语法而言，HTML5对验证的要求非常宽松。这是否意味着您应该疯了，并在任何给定元素上使用想要的任何语法？不，我们当然不建议这样做。

我们鼓励开发人员选择语法风格并坚持使用它-尤其是在团队环境中，其中代码维护和可读性至关重要。我们还建议您（尽管这是可选的）选择一种简约的编码样式，同时保持一致。

以下是供您考虑使用的一些准则：

• 像在XHTML中一样，对所有元素和属性使用小写字母。

• 尽管某些元素不需要关闭标签，但我们建议关闭所有包含内容的元素（如中所述<p>Text</p>）。

• 尽管您可以保留属性值不带引号，但很有可能您将拥有需要用引号引起来的属性（例如，声明多个用空格分隔的类时，或将查询字符串值附加到URL时）。因此，为了保持一致，建议您始终使用引号。

• 省略void元素（例如meta或input）的结尾斜杠。

• 避免为布尔属性提供冗余值（例如，使用<input type="checkbox" checked>而不是<input type="checkbox" checked="checked">）。

同样，这些建议绝不是普遍接受的；但是，我们认为它们是实现纯净，易于阅读的可维护标记的合理语法建议。

如果确实使用代码样式运行amok，包括太多不必要的操作，则无缘无故地添加了额外的字节。您还可能使代码难以维护，尤其是如果您在同一代码库上与其他开发人员一起工作时。