revit2014项目样板
As you learn HTML5 and add new techniques to your toolbox, you’re likely going to want to build yourself an HTML boilerplate to start off all your future projects. We encourage this, and there are many starting points online to help you build your own HTML template.
在学习HTML5并将新技术添加到工具箱时，您可能会想要构建自己HTML样板，以开始所有以后的项目。
我们鼓励这样做，并且有许多在线起点可以帮助您构建自己HTML模板。
In this article, we’ll look at how to get started with this. 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?v=1.0">
</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编写方式有何不同。
Doctype
(
The Doctype
)
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时相同的外观。
html
元素
(
The
html
Element
)
html
html
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 syntax, you’d be 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>
head
元素
(
The
head
Element
)
head
head
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 article, 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
上的主题。
Note: 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 (like 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?v=1.0">
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中很常见)，也不需要指示样式表的内容类型。
公平竞争
(
Leveling the Playing Field
)
When HTML5 was introduced, it included a number of new elements, such as
article
and
section
. 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 that, these days, usage of IE has dropped right off, with IE11 having fallen to around 2.7% global usage (as of 2018), and versions prior to that virtually having dropped off the map. (You can view stats on browser usage and support for HTML5 features in heneral on the
Can i use
site.)
好消息是，最近几天，IE的使用率已经下降，IE11的全球使用率下降到了约2.7％(截至2018年)，而实际上之前的版本已经下降。 (您可以在“
我可以使用”
网站上查看有关浏览器使用情况的统计信息，以及对亨利尔语言中HTML5功能的支持。)
If you
really
need to support ancient browsers, though, you can still use the trusty
HTML5 Shiv
, a very simple piece of JavaScript originally developed by John Resig. Inspired by an idea by Sjoerd Visscher, it made the new HTML5 elements styleable in older versions of IE. Really, though, this shouldn’t be needed now. As indicated by
Can i use
, HTML5 elements are supported across all modern browsers and even even their most recent older versions. (Click the “Show all” option to see all browser versions.) The one exception is that some browsers don’t recognize the newer
main
element. However, for those browsers you can still use this element, as long as you add approraite styling (such as setting it to be a block element.)
但是，如果
确实
需要支持古老的浏览器，则仍然可以使用可信赖的
HTML5 Shiv
，这是John Resig最初开发的非常简单JavaScript。 受Sjoerd Visscher的想法启发，它使新HTML5元素可在IE的旧版本中进行样式设置。 不过，确实，现在不需要了。 正如
我可以使用
所指出的那样，所有现代浏览器甚至最新的旧版本都支持HTML5元素。 (单击“显示全部”选项以查看所有浏览器版本。)一个例外是某些浏览器无法识别较新的
main
元素。 但是，对于这些浏览器，只要添加适当的样式(例如将其设置为block元素)，您仍然可以使用此元素。
剩下的就是历史
(
The Rest is History
)
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)，脚本可能
需要
放置在文档的开头，因为您希望脚本在浏览器开始呈现页面之前生效。
下一步
(
Next Steps
)
One way to take your HTML5 to the next level is to try out the
HTML5 Boilerplate
. This regularly updated resource provides a handy starting point for your projects, containing all the latest best practices established by hundreds of the world’s best programmers. It’s worth downloading and checking out even if you just want to pick through the code and look at how certain elements are being used these days, such as the various meta elements found in the document’s head.
使
HTML5迈上
新台阶的一种方法是尝试
HTML5 Boilerplate
。 这个定期更新的资源为您的项目提供了方便的起点，其中包含由数百个世界上最好的程序员建立的所有最新最佳实践。 即使您只是想看一遍代码，看看这些天如何使用某些元素，例如文档头中的各种元元素，也值得下载和签出。
You can focus on your page layout and design skills by building our curriculum of suggested
modern CSS projects
. These will give you a solid grounding in the most recent techniques.
通过构建建议的
现代CSS项目
课程，您可以专注于页面布局和设计技能。 这些将为您提供最新技术的坚实基础。
Another way to take your website or web app development to the next level is to try one of the modern technologies that are in wide use today. For example, check out SitePoint’s extensive resources on
JavaScript
and
React
.
使您的网站或Web应用程序开发更上一层楼的另一种方法是尝试使用当今广泛使用的一种现代技术。 例如，查看
JavaScript
和
React
上SitePoint的大量资源。
This article, updated in 2020, was originally based on a chapter from
HTML5 & CSS3 for the Real World
, by Alexis Goldstein, Louis Lazaris and Estelle Weyl.
本文于2020年更新，最初基于Alexis Goldstein，Louis Lazaris和Estelle Weyl撰写的
有关真实世界HTML5和CSS3中的
一章。
revit2014项目样板