致敬技术先驱
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，第二版 》一书。 副本在世界各地的商店中都有出售，或者您可以在此处以电子书形式购买 。
Now that we’ve given you a bit of a history primer, along with some compelling reasons to learn HTML5 and start using it in your projects today, it’s time to introduce you to the sample site that we’ll be progressively building in this book.
现在，我们为您提供了一些历史入门知识，以及一些令人信服的理由来学习HTML5并立即在您的项目中使用它，现在是时候向您介绍我们将在本书中逐步构建的示例站点。 。
After we briefly cover what we’ll be building, we’ll discuss some HTML5 syntax basics, along with some suggestions for best-practice coding. We’ll follow that with some important info on cross-browser compatibility, and the basics of page structure in HTML5. Lastly, we’ll introduce some specific HTML5 elements and see how they’ll fit into our layout.
在简要介绍了要构建的内容之后，我们将讨论一些HTML5语法基础知识，以及一些有关最佳实践编码的建议。 接下来，我们将提供一些有关跨浏览器兼容性的重要信息，以及HTML5中页面结构的基础知识。 最后，我们将介绍一些特定HTML5元素，并了解它们如何适合我们的布局。
So let’s get into it!
因此，让我们开始吧！
For the purpose of this book, we’ve put together a sample website project that we’ll be building from scratch. The website is already built—you can check it out now at thehtml5herald.com. It’s an old-time newspaper-style website called The HTML5 Herald. The home page of the site contains some media in the form of video, images, articles, and advertisements. There’s also another page comprising a registration form.
出于本书的目的，我们整理了一个示例网站项目，该项目将从头开始构建。 该网站已建立-您现在可以在thehtml5herald.com上进行查看。 这是一个旧报纸风格的网站，名为HTML5 Herald 。 该站点的主页包含一些媒体，包括视频，图像，文章和广告。 还有另一个页面包含注册表。
Go ahead and view the source, and try some of the functionality if you like. As we proceed through the book, we’ll be working through the code that went into making the site. We’ll avoid discussing every detail of the CSS involved, as most of it should already be familiar to you—float layouts, absolute and relative positioning, basic font styling, and the like. We’ll primarily focus on the new HTML5 elements, along with the APIs, plus all the CSS3 techniques being used to add styles and interactivity to various elements.
继续查看源代码，然后根据需要尝试一些功能。 在阅读本书时，我们将研究制作该网站的代码。 我们将避免讨论所涉及CSS的每个细节，因为大多数CSS细节应该已经为您所熟悉，包括浮动布局，绝对和相对位置，基本字体样式等。 我们将主要关注新HTML5元素以及API，以及用于向各种元素添加样式和交互性的所有CSS3技术。
The figure below shows a bit of what the finished product looks like.
下图显示了成品的外观。
While we build the site, we’ll do our best to explain the HTML5 elements, APIs, and CSS3 features, and aim to recommend some best practices. Of course, some of these technologies are still new and in development, so we’ll try not to be too dogmatic about what you can and can’t do.
在构建网站时，我们将尽力解释HTML5元素，API和CSS3功能，并力图推荐一些最佳实践。 当然，其中一些技术仍然是新技术，并且还在开发中，因此我们将尽量不要对您可以做什么和不能做什么做什么过于教条。
As you learn HTML5 and add new techniques to your toolbox, you’re likely to want to build yourself a boilerplate, from which you can begin all your HTML5-based projects. We encourage this, and you may also consider using one of the many online sources that provide a basic HTML5 starting point for you.[4]
在学习HTML5并将新技术添加到工具箱中时，您可能想要构建一个样板，从中可以开始所有基于HTML5的项目。 我们鼓励这样做，您也可以考虑使用许多在线资源中的一种，为您提供基本HTML5起点。 [4]
In this project, however, we want to build our code from scratch and explain each piece as we go along. Of course, it would be impossible for even the most fantastical and unwieldy sample site we could dream up to include every new element or technique, so we’ll also explain many new features that don’t fit into the project. This way, you’ll be familiar with a wide set of options when deciding how to build your HTML5 and CSS3 websites and applications, enabling you to use this book as a quick reference for a number of features and techniques.
但是，在这个项目中，我们希望从头开始构建代码，并逐步解释每一部分。 当然，即使是我们梦dream以求的最梦幻，最笨拙的示例站点也不可能包含所有新元素或新技术，因此我们还将说明许多不适合该项目的新功能。 这样，在决定如何构建HTML5和CSS3网站和应用程序时，您会熟悉各种选项，从而使您可以将本书用作许多功能和技术的快速参考。
Let’s start simple, with a bare-bones HTML5 page:
让我们从一个简单HTML5页面开始简单：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>The HTML5 Herald</title> <meta name="description" content="The HTML5 Herald"> <meta name="author" content="SitePoint"> <link rel="stylesheet" href="css/styles.css"> <!--[if lt IE 9]> <script src="js/html5shim.js"></script> <![endif]--> </head> <body> <script src="js/scripts.js"></script> </body> </html>With that basic template in place, let’s now examine some of the significant parts of the markup and how these might differ from how HTML was written prior to HTML5.
有了该基本模板后，现在让我们检查标记的一些重要部分，以及这些部分可能与HTML5之前HTML编写方式有何不同。
First, we have the Document Type Declaration, or doctype. This is simply a way to tell the browser—or any other parser—what type of document it’s looking at. In the case of HTML files, it means the specific version and flavor of HTML. The doctype should always be the first item at the top of any HTML file. Many years ago, the doctype declaration was an ugly and hard-to-remember mess. For XHTML 1.0 Strict:
首先，我们有Document Type Declaration或doctype 。 这只是告诉浏览器(或任何其他解析器)正在查看的文档类型的一种方式。 对于HTML文件，它表示HTML的特定版本和风格。 doctype应该始终是任何HTML文件顶部的第一项。 许多年前，doctype声明是一个丑陋且难以记忆的混乱。 对于XHTML 1.0 Strict：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">And for HTML4 Transitional:
对于HTML4 Transitional：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "https://www.w3.org/TR/html4/loose.dtd">Although that long string of text at the top of our documents hasn’t really hurt us (other than forcing our sites’ viewers to download a few extra bytes), HTML5 has done away with that indecipherable eyesore. Now all you need is this:
尽管文档顶部的一长串文本并没有真正伤害我们(除了强迫网站的查看者下载一些额外的字节)，但HTML5消除了这种难以理解的麻烦。 现在您需要的是：
<!DOCTYPE html>Simple, and to the point. The doctype can be written in uppercase, lowercase, or mixed case. You’ll notice that the “5” is conspicuously missing from the declaration. Although the current iteration of web markup is known as “HTML5,” it really is just an evolution of previous HTML standards—and future specifications will simply be a development of what we have today.
很简单，而且很重要。 可以使用大写，小写或大小写混合的doctype。 您会注意到声明中明显缺少“ 5”。 尽管当前的Web标记迭代被称为“ HTML5”，但它实际上只是先前HTML标准的演进-将来的规范将仅仅是我们现有内容的发展。
Because browsers are usually required to support all existing content on the Web, there’s no reliance on the doctype to tell them which features should be supported in a given document. In other words, the doctype alone is not going to make your pages HTML5-compliant. It’s really up to the browser to do this. In fact, you can use one of those two older doctypes with new HTML5 elements on the page and the page will render the same as it would if you used the new doctype.
由于通常要求浏览器支持Web上的所有现有内容，因此无需依赖doctype来告诉他们在给定文档中应支持哪些功能。 换句话说，仅doctype不会使您的页面兼容HTML5。 这实际上取决于浏览器。 实际上，您可以在页面上使用具有新HTML5元素的这两个旧文档类型之一，并且该页面将呈现与使用新doctype时相同的外观。
Next up in any HTML document is the html element, which has not changed significantly with HTML5. In our example, we’ve included the lang attribute with a value of en, which specifies that the document is in English. In XHTML-based markup, you were required to include an xmlns attribute. In HTML5, this is no longer needed, and even the lang attribute is unnecessary for the document to validate or function correctly.
任何HTML文档中的下一个都是html元素，对于HTML5来说并没有太大变化。 在我们的示例中，我们包含了lang属性，其值为en ，该值指定文档为英语。 在基于XHTML的标记中，要求您包括xmlns属性。 在HTML5中，不再需要此属性，甚至lang属性对于文档验证或正常运行也是不必要的。
So here’s what we have so far, including the closing html tag:
因此，这是到目前为止的内容，包括html结束标记：
<!DOCTYPE html> <html lang="en"> </html>The next part of our page is the head section. The first line inside the head is the one that defines the character encoding for the document. This is another element that’s been simplified since XHTML and HTML4, and is an optional feature, but recommended. In the past, you may have written it like this:
我们页面的下一部分是head 。 内部的第一行head是一个定义的字符编码的文件。 自XHTML和HTML4以来，这是另一个已简化的元素，是可选功能，但建议使用。 在过去，您可能会这样写：
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">HTML5 improves on this by reducing the character-encoding meta tag to the bare minimum:
HTML5通过将字符编码meta标记减少到最低限度来对此进行改进：
<meta charset="utf-8">In nearly all cases, utf-8 is the value you’ll be using in your documents. A full explanation of character encoding is beyond the scope of this book, and it probably won’t be that interesting to you, either. Nonetheless, if you want to delve a little deeper, you can read up on the topic on W3C or WHATWG.
在几乎所有情况下， utf-8都是您将在文档中使用的值。 字符编码的完整说明不在本书的讨论范围内，您也可能不会那么感兴趣。 但是，如果您想更深入地研究，则可以阅读有关W3C或WHATWG 的主题 。
To ensure that all browsers read the character encoding correctly, the entire character-encoding declaration must be included somewhere within the first 512 characters of your document. It should also appear before any content-based elements (such as the title element that follows it in our example site).
为确保所有浏览器正确读取字符编码，必须在文档的前512个字符中的某些位置包括整个字符编码声明。 它也应该出现在任何基于内容的元素之前(例如，在我们的示例站点中，紧随其后的title元素)。
There’s much more we could write about this subject, but we want to keep you awake—so we’ll spare you those details! For now, we’re content to accept this simplified declaration and move on to the next part of our document:
关于这个主题，我们可以写很多书，但是我们想让您保持清醒，因此我们将为您省去那些细节！ 现在，我们很乐意接受此简化的声明，然后继续进行文档的下一部分：
<title>The HTML5 Herald</title> <meta name="description" content="The HTML5 Herald"> <meta name="author" content="SitePoint"> <link rel="stylesheet" href="css/styles.css">In these lines, HTML5 barely differs from previous syntaxes. The page title (the only mandatory element inside the head) is declared the same as it always was, and the meta tags we’ve included are merely optional examples to indicate where these would be placed; you could put as many valid meta elements here as you like.
在这些行中，HTML5与以前的语法几乎没有什么不同。 页面标题( head内唯一的强制性元素)被声明为与以前相同，并且我们包含的meta标签只是可选示例，用于指示将其放置在何处； 您可以根据需要在此处放置尽可能多的有效meta元素 。
The key part of this chunk of markup is the stylesheet, which is included using the customary link element. There are no required attributes for link other than href and rel. The type attribute (which was common in older versions of HTML) is not necessary, nor was it ever needed to indicate the content type of the stylesheet.
标记的这一部分的关键部分是样式表，它是使用常规link元素包含的。 除href和rel之外， link没有其他必需的属性。 不需要type属性(在旧版本HTML中很常见)，也不需要指示样式表的内容类型。
The next element in our markup requires a bit of background information before it can be introduced. HTML5 includes a number of new elements, such as article and section, which we’ll be covering later on. You might think this would be a major problem for older browser support for unrecognized elements, but you’d be wrong. This is because the majority of browsers don’t actually care what tags you use. If you had an HTML document with a recipe tag (or even a ziggy tag) in it, and your CSS attached some styles to that element, nearly every browser would proceed as if this were totally normal, applying your styling without complaint.
标记中的下一个元素在引入之前需要一些背景信息。 HTML5包含许多新元素，例如article和section ，我们将在稍后介绍。 您可能会认为这是较旧的浏览器对无法识别的元素的支持所面临的主要问题，但是您会错了。 这是因为大多数浏览器实际上并不关心您使用什么标签。 如果您有一个带有recipe标签(甚至是ziggy标签)HTML文档，并且CSS在该元素上附加了一些样式，则几乎每个浏览器都将像完全正常一样进行操作，而无需抱怨即可应用样式。
Of course, such a hypothetical document would fail to validate and may have accessibility problems, but it would render correctly in almost all browsers—the exception being old versions of Internet Explorer (IE). Prior to version 9, IE prevented unrecognized elements from receiving styling. These mystery elements were seen by the rendering engine as “unknown elements,” so you were unable to change the way they looked or behaved. This includes not only our imagined elements, but also any elements that had yet to be defined at the time those browser versions were developed. That means (you guessed it) the new HTML5 elements.
当然，这样的假设的文件将无法验证，可能有可访问性问题，但它会在几乎所有的浏览器，唯一的例外是的Internet Explorer(IE)的旧版本正确呈现。 在版本9之前，IE阻止无法识别的元素接收样式。 这些神秘元素被渲染引擎视为“未知元素”，因此您无法更改它们的外观或行为方式。 这不仅包括我们想象的元素，还包括那些浏览器版本开发时尚未定义的任何元素。 这意味着(您猜对了)新HTML5元素。
The good news is, at the time of writing, most people still using a version of IE are using version 9 or higher, and very few are on version 9, so this is not a big problem for most developers anymore; however, if a big chunk of your audience is still using IE8 or earlier, you’ll have to take action to ensure your designs don’t fall apart.
好消息是，在撰写本文时，大多数仍在使用IE版本的人都在使用版本9或更高版本，而很少有人使用版本9，因此对于大多数开发人员而言，这不再是大问题； 但是，如果很大一部分受众仍在使用IE8或更早版本，则必须采取措施以确保设计不会崩溃。
Fortunately, there’s a solution: a very simple piece of JavaScript originally developed by John Resig. Inspired by an idea by Sjoerd Visscher, it can make the new HTML5 elements styleable in older versions of IE.
幸运的是，有一个解决方案： 最初由John Resig开发的非常简单JavaScript 。 受Sjoerd Visscher的想法启发，它可以使新HTML5元素在IE的较早版本中成为样式。
We’ve included this so-called “HTML5 shiv”[5] in our markup as a script tag surrounded by conditional comments. Conditional comments are a proprietary feature implemented in Internet Explorer in version 9 and earlier. They provide you with the ability to target specific versions of that browser with scripts or styles.[6] The following conditional comment is telling the browser that the enclosed markup should only appear to users viewing the page with Internet Explorer prior to version 9:
我们已经包含了所谓的“ HTML5 shiv” [5]在我们的标记中为脚本标记，周围有条件注释。 条件注释是Internet Explorer 9和更早版本中实现的专有功能。 它们使您能够使用脚本或样式来定位该浏览器的特定版本。 [6]以下条件注释告诉浏览器，仅对于使用版本9之前的Internet Explorer查看页面的用户，应包含所附的标记：
<!--[if lt IE 9]> <script src="js/html5shim.js"></script> <![endif]-->It should be noted that if you’re using a JavaScript library that deals with HTML5 features or the new APIs, it’s possible that it will already have the HTML5-enabling script present; in this case, you could remove reference to the script. One example of this would be Modernizr, a JavaScript library that detects modern HTML and CSS features. Modernizr gives you the option to include code that enables the HTML5 elements in older versions of IE, so the shiv would be redundant. We take a closer look at Modernizr in Appendix A.
应该注意的是，如果您使用的是处理HTML5功能或新APIJavaScript库，则可能已经存在支持HTML5的脚本。 在这种情况下，您可以删除对该脚本的引用。 一个示例就是Modernizr，这是一个可检测现代HTML和CSS功能JavaScript库。 Modernizr使您可以选择在较旧版本的IE中包含启用HTML5元素的代码，因此shiv将是多余的。 我们在附录A中仔细研究了Modernizr。
Of course, there’s still a group of users unable to benefit from the HTML5 shiv: those who have for one reason or another disabled JavaScript and are using IE8 or lower. As web designers, we’re constantly told that the content of our sites should be fully accessible to all users, even those without JavaScript. But it’s not as bad as it seems. A number of studies have shown that the number of users who have JavaScript disabled is low enough to be of little concern, especially when you factor in how few of those will be using IE8 or lower.
当然，仍然有一群用户无法从HTML5 shiv中受益：由于某种原因或其他原因禁用JavaScript并使用IE8或更低版本的用户。 作为Web设计师，我们经常被告知，所有用户都应该完全访问我们网站的内容，即使没有JavaScript的用户也是如此。 但这并没有看起来那么糟。 大量研究表明，禁用JavaScript的用户数量已经足够少，几乎不用担心，特别是当您考虑将要使用IE8或更低版本的用户中的很少时。
In a study published in October, 2013, the UK Government Digital Service determined that users browsing government web services in the UK with JavaScript disabled or unavailable was 1.1%. In another study conducted on the Yahoo Developer Network (published in October 2010), users with JavaScript disabled amounted to around 1% of total traffic worldwide.
在2013年10月发布的一项研究中，英国政府数字服务部门确定在禁用或不支持JavaScript的情况下浏览英国政府网络服务的用户为1.1％。 在Yahoo开发人员网络 (2010年10月发布) 上进行的另一项研究中，禁用JavaScript的用户约占全球总流量的1％。
Looking at the rest of our starting template, we have the usual body element along with its closing tag and the closing html tag. We also have a reference to a JavaScript file inside a script element.
查看开始模板的其余部分，我们具有通常的body元素及其关闭标记和html标记。 我们在script元素中也有对JavaScript文件的引用。
Much like the link tag discussed earlier, the script tag does not require that you declare a type attribute. If you ever wrote XHTML, you might remember your script tags looking like this:
就像前面讨论的link标记一样， script标记不需要您声明type属性。 如果您曾经编写过XHTML，则可能会记得如下所示的script标签：
<script src="js/scripts.js" type="text/javascript"></script>Since JavaScript is, for all practical purposes, the only real scripting language used on the Web, and since all browsers will assume that you’re using JavaScript even when you don’t explicitly declare that fact, the type attribute is unnecessary in HTML5 documents:
由于从实际上所有角度来看，JavaScript是Web上唯一使用的真正脚本语言，并且由于所有浏览器都假定您正在使用JavaScript，即使您没有明确声明这一事实，因此HTML5文档中也不需要type属性。 ：
<script src="js/scripts.js"></script>We’ve put the script element at the bottom of our page to conform to best practices for embedding JavaScript. This has to do with the page-loading speed; when a browser encounters a script, it will pause downloading and rendering the rest of the page while it parses the script. This results in the page appearing to load much more slowly when large scripts are included at the top of the page before any content. It’s why most scripts should be placed at the very bottom of the page, so that they’ll only be parsed after the rest of the page has loaded.
我们已将script元素置于页面底部，以符合嵌入JavaScript的最佳做法。 这与页面加载速度有关。 当浏览器遇到脚本时，它将在解析脚本时暂停下载并呈现页面的其余部分。 如果在页面顶部任何内容之前都包含大型脚本，这将导致页面加载速度大大降低。 这就是为什么大多数脚本应放在页面的最底部，以便仅在页面其余部分加载后才进行解析的原因。
In some cases, however, (such as with the HTML5 shiv) the script may need to be placed in the head of your document, because you want it to take effect before the browser starts rendering the page.
但是，在某些情况下(例如，使用HTML5 shiv)，脚本可能需要放置在文档的开头，因为您希望脚本在浏览器开始呈现页面之前生效。
[4] A few you might want to look into can be found at html5boilerplate.com and https://github.com/murtaugh/HTML5-Reset.
[4]您可能要研究的一些内容可以在html5boilerplate.com和https://github.com/murtaugh/HTML5-Reset中找到。
[5] You might be more familiar with its alternative name: the HTML5 shim. Whilst there are identical code snippets out there that go by both names, we’ll be referring to all instances as the HTML5 shiv, its original name.
[5]您可能更熟悉其替代名称：HTML5填充程序。 尽管两个名称都有相同的代码片段，但我们将所有实例称为HTML5 shiv，它的原始名称。
[6] For more information see the SitePoint Reference.
[6]有关更多信息，请参见SitePoint参考 。
翻译自: https://www.sitepoint.com/145702-2/
致敬技术先驱
