html5常见问题_HTML5常见问题

html5常见问题

After this quick introduction to HTML5 markup, you probably have a bunch of questions swirling in your head. Here are some answers to a few of the likely ones.

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

为什么这些更改在旧版浏览器中仍然有效？ (Why do these changes still work in older browsers?)

To understand why this isn’t a problem, we can compare HTML5 to some of the new features added in CSS3, which we’ll be discussing in later chapters.

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

In CSS, when a new feature is added (for example, the border-radius property that adds rounded corners to elements), that feature also has to be added to browsers’ rendering engines, so older browsers will fail to recognize it. If a user is viewing the page on a browser with no support for border-radius, the rounded corners will appear square. This happens because square corners are the default and the browser will ignore the border-radius declaration. Other CSS3 features behave similarly, causing the experience to be degraded to some degree.

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

Many developers expect that HTML5 will work in a similar way. While this might be true for some of the advanced features and APIs we’ll be considering later in the book, it’s not the case with the changes we’ve covered so far; that is, the simpler syntax, fewer superfluous attributes, and the new doctype.

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

HTML5’s syntax was more or less defined after a careful study of what older browsers can and can’t handle. For example, the 15 characters that comprise the doctype declaration in HTML5 are the minimum characters required to make every browser display a page in standards mode.

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

Likewise, while XHTML required a lengthier character-encoding declaration and an extra attribute on the html element for the purpose of validation, browsers never actually required them in order to display a page correctly. Again, the behavior of older browsers was carefully examined, and it was determined that the character encoding could be simplified and the xmlns attribute removed—and browsers would still see the page the same way.

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

Unlike changes to CSS3 and JavaScript, where additions are only supported when browser makers actually implement them, there’s no need to wait for new browser versions to be released before using HTML5’s markup syntax. And when it comes to using the new semantic elements, a small snippet of JavaScript is all that’s required to bring any really old browsers into line.

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

注意：标准模式与怪癖模式 (Note: Standards Mode versus Quirks Mode)

When standards-based web design was in its infancy, browser makers were faced with a problem: supporting emerging standards would, in many cases, break backwards compatibility with existing web pages that were designed to older, nonstandard browser implementations. Browser makers needed a signal indicating that a given page was meant to be rendered according to the standards. They found such a signal in the doctype: new standards-compliant pages included a correctly formatted doctype, while older nonstandard pages generally didn’t. Using the doctype as a signal, browsers could switch between standards mode (in which they try to follow standards to the letter in the way they render elements) and quirks mode (where they attempt to mimic the “quirky” rendering capabilities of older browsers to ensure that the page renders how it was intended).

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

It’s safe to say that in the current development landscape, nearly every web page has a proper doctype, and thus will render in standards mode; it’s therefore unlikely that you’ll ever have to deal with a page rendered in quirks mode. Of course, if a user is viewing a web page using a very old browser (such as IE4), the page will be rendered using that browser’s rendering mode. This is what quirks mode mimics, and it will do so regardless of the doctype being used.

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

Although the XHTML and older HTML doctypes include information about the exact version of the specification they refer to, browsers have never actually made use of that information. As long as a seemingly correct doctype is present, they’ll render the page in standards mode. Consequently, HTML5’s doctype has been stripped down to the bare minimum required to trigger standards mode in any browser. Further information, along with a chart that outlines what will cause different browsers to render in quirks mode, can be found on Wikipedia. You can also read a good overview of standards and quirks mode on SitePoint’s CSS reference.

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

是否应该关闭所有标签？ (Shouldn’t all tags be closed?)

In XHTML, all elements were required to be closed—either with a corresponding closing tag (such as html) or in the case of void elements, a forward slash at the end of the tag. Void elements are elements that can’t contain child elements (such as input, img, or link).

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

You can still use that style of syntax in HTML5—and you might prefer it for consistency and maintainability reasons—but adding a trailing slash on void elements is no longer required for validation. Continuing with the theme of “cutting the fat,” HTML5 allows you to omit the trailing slash from such elements, arguably leaving your markup cleaner and less cluttered.

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

It’s worth noting that in HTML5, most elements that can contain nested elements—but simply happen to be empty—still need to be paired with a corresponding closing tag. There are exceptions to this rule (such as p tags and li tags), but it’s simpler to assume that it’s universal.

值得注意的是，在HTML5中，大多数可以包含嵌套元素的元素(但恰好是空的)仍然需要与相应的结束标记配对。 该规则有一些例外情况(例如p标签和li标签)，但是更容易假定它是通用的。

其他基于XHTML的语法习惯又如何呢？ (What about other XHTML-based syntax customs?)

While we’re on the subject, omitting closing slashes is just one aspect of HTML5-based syntax that differs from XHTML. In fact, syntax style issues are completely ignored by the HTML5 validator, which will only throw errors for code mistakes that threaten to disrupt your document in some way.

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

What this means is that through the eyes of the validator, the following five lines of markup are identical:

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

<link rel="stylesheet" href="css/styles.css" />
<link rel="stylesheet" href="css/styles.css">
<LINK REL="stylesheet" HREF="css/styles.css">
<Link Rel="stylesheet" Href="css/styles.css">
<link rel=stylesheet href=css/styles.css>

In HTML5, you can use lowercase, uppercase, or mixed-case tag names or attributes, as well as quoted or unquoted attribute values (as long as those values don’t contain spaces or other reserved characters), and it will all validate just fine.

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

In XHTML, all attributes were required to have values, even if those values were redundant. For example, in XHTML you’d often see markup like this:

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

<input type="text" disabled="disabled" />

In HTML5, attributes that are either “on” or “off” (called Boolean attributes) can simply be specified with no value. So, the aforementioned input element can be written as follows:

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

<input type="text" disabled>

Hence, HTML5 has very loose requirements for validation, at least as far as syntax is concerned. Does this mean you should just go nuts and use whatever syntax you want on any given element? No, we certainly don’t recommend that.

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

We encourage developers to choose a syntax style and stick to it—especially if you are working in a team environment where code maintenance and readability are crucial. We also recommend (though this is optional) that you choose a minimalist coding style while staying consistent.

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

Here are some guidelines for you to consider using:

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

• Use lowercase for all elements and attributes as you would in XHTML.

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

• Despite some elements not requiring closing tags, we recommend that all elements containing content be closed (as in <p>Text</p>).

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

• Although you can leave attribute values unquoted, it’s highly likely that you’ll have attributes that require quotes (for example, when declaring multiple classes separated by spaces, or when appending a query string value to a URL). As a result, we suggest that you always use quotes for the sake of consistency.

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

• Omit the trailing slash from void elements (such as meta or input).

  省略void元素(例如meta或input )的结尾斜杠。

• Avoid providing redundant values for Boolean attributes (for instance, use <input type="checkbox" checked> rather than <input type="checkbox" checked="checked">).

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

Again, these recommendations are by no means universally accepted; however, we believe that they’re reasonable syntax suggestions for achieving clean, easy-to-read maintainable markup.

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

If you do run amok with your code style, including too much that’s unnecessary, you’re just adding extra bytes for no reason. You’re also potentially making your code harder to maintain, especially if you work with other developers on the same code base.

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

The following is an extract from our book, HTML5 & CSS3 for the Real World, 2nd Edition, written by Alexis Goldstein, Louis Lazaris, and Estelle Weyl. Copies are sold in stores worldwide, or you can buy it in ebook form here.

以下摘自Alexis Goldstein，Louis Lazaris和Estelle Weyl编写的《现实世界HTML5和CSS3，第二版 》一书。 副本在世界各地的商店中都有出售，或者您可以在此处以电子书形式购买 。

翻译自: https://www.sitepoint.com/an-html5-faq/

html5常见问题