Html 在 <head> 中对元素进行排序的最佳做法是什么？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1987065/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
What are best practices to order elements in <head>?
提问by Jitendra Vyas
can use anything in any order? does placing of <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">is important before <title>
可以按任何顺序使用任何东西吗？放置<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">之前很重要吗<title>
this is most used, is it best way?
这是最常用的，是最好的方法吗？
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Title Goes Here</title>
<link rel="stylesheet" href="http://sstatic.net/so/all.css?v=5912">
<link rel="shortcut icon" href="http://sstatic.net/so/favicon.ico">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
$("#wmd-input").focus();
$("#title").focus();
$("#revisions-list").change(function() { window.location = '/posts/1987065/edit/' + $(this).val(); });
});
</script>
</head>
<body>
<p>This is my web page</p>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/mootools.js"></script>
</body>
</html>
this site http://stackoverflow.comdoesn't have any encoding and <meta>
这个网站http://stackoverflow.com没有任何编码和<meta>
I use a CMS which has SEO component which adds every <meta>for SEO after all js and css. files. can placing of any elements in any order which are allowed in <head>affect document compatibility and encoding?
我使用具有 SEO 组件的 CMS，它<meta>在所有 js 和 css 之后为 SEO添加了每个组件。文件。是否可以按允许<head>影响文档兼容性和编码的任何顺序放置任何元素？
回答by Brian Campbell
In HTML, the DOCTYPEmust come first, followed by a single <html>element, which must contain a <head>element containing a <title>element, followed by a <body>element. See the description of the global structure of an HTML document in HTML 4.01and the HTML5 draft; the actual requirements are mostly the same other than the DOCTYPE, but they are described differently.
在 HTML 中，DOCTYPE必须先出现，然后是单个<html>元素，其中必须包含一个包含<head>元素的<title>元素，然后是一个<body>元素。参见HTML 4.01和HTML5 草案中HTML 文档的全局结构的描述；除了 之外，实际要求大多相同DOCTYPE，但对它们的描述不同。
The actual tags (<html>, </html>, <head>, etc) are optional; the elements will be created automatically if the tags don't exist. <title>is the only required tag in HTML. The shortest valid HTML 4.01 document (at least, that I could generate) is (needs a <p>because there needs to be something in the <body>to be valid):
实际的标签（<html>，</html>，<head>等）是可选的; 如果标签不存在，将自动创建元素。<title>是 HTML 中唯一需要的标签。最短的有效 HTML 4.01 文档（至少，我可以生成）是（需要一个，<p>因为需要有一些东西<body>才能有效）：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd"><title></title><p>
And the shortest valid HTML5 document:
最短的有效 HTML5 文档：
<!DOCTYPE html><title></title>
Note that in XHTML, all tags must be specified explicitly; no elements will be inserted implicitly.
请注意，在 XHTML 中，必须明确指定所有标签；不会隐式插入任何元素。
Browsers perform content type sniffing in some circumstances to determine the type of a resource that hasn't been specified using a Content-TypeHTTP header, and also character encoding sniffing if the Content-Typeheader hasn't been supplied or doesn't include a charset(you should generally try to include these headers, and make sure that they are correct, but there are some circumstances in which you cannot, such as local files not transferred over HTTP). They only sniff a limited number of bytes at the beginning of the document for these purposes, though, so anything that is intended to affect the content sniffing or character encoding sniffing should be near the beginning of the document.
浏览器在某些情况下执行内容类型嗅探以确定尚未使用Content-TypeHTTP 标头指定的资源的类型，如果Content-Type标头尚未提供或不包含一个字符编码嗅探charset（您通常应该尝试包括这些标头，并确保它们是正确的，但在某些情况下你不能，例如本地文件不是通过 HTTP 传输的）。但是，出于这些目的，它们仅在文档开头嗅探有限数量的字节，因此任何旨在影响内容嗅探或字符编码嗅探的内容都应位于文档开头附近。
For this reason, HTML5 specifiesthat any metatag which is used to specify the character set (either <meta http-equiv="Content-type" content="text/html; charset=...">or simply <meta charset=...>) must be within the first 1024 bytes of the file in order to take effect. So, if you are going to include character encoding information within your document, you should put the tag early in the file, possibly even before the <title>element. But recall that this tag is unnecessary if you properly specify a Content-typeheader.
为此，HTML5 规定任何meta用于指定字符集（<meta http-equiv="Content-type" content="text/html; charset=...">或只是<meta charset=...>）的标签必须在文件的前 1024 个字节内才能生效。因此，如果您打算在文档中包含字符编码信息，则应该将标记放在文件的前面，甚至可能放在<title>元素之前。但是请记住，如果您正确指定了Content-type标题，则此标记是不必要的。
In CSS, later style declarations take precedence over earlier ones, all else being equal. So, you should generally put the most generic style sheets that may be overridden earlier, and the more specific style sheets later.
在 CSS 中，后面的样式声明优先于前面的样式声明，其他一切都是平等的。因此，您通常应该先放置可能被覆盖的最通用的样式表，然后再放置更具体的样式表。
For performance reasons, it can be a good idea to put scripts at the bottom of the page, right before the </body>, because loading scripts blocks the rendering of the page.
出于性能原因，最好将脚本放在页面底部，就在 之前</body>，因为加载脚本会阻止页面的呈现。
Obviously, <script>tags should be ordered so that scripts that depend on each order have the dependencies loaded first.
显然，<script>应该对标签进行排序，以便依赖于每个顺序的脚本首先加载依赖项。
On the whole, other than the constraints I have already specified, the ordering of tags within <head>shouldn't matter too much, other than for readability. I tend to like to see the <title>towards the top, and put the other <meta>tags in some sort of logical order.
总的来说，除了我已经指定的约束<head>之外，除了可读性之外，标签的顺序应该没有太大关系。我倾向于看到<title>顶部，并按<meta>某种逻辑顺序放置其他标签。
Most of the time, the order you should put things into the body of an HTML document should be the order they should be displayed in, or the order they should be accessed. You can use CSS to rearrange things, but screen readers will generally read things in source order, search indexes will extract things in source order, and so on.
大多数情况下，将内容放入 HTML 文档正文的顺序应该是它们的显示顺序，或者它们的访问顺序。您可以使用 CSS 重新排列内容，但屏幕阅读器通常会按源顺序读取内容，搜索索引会按源顺序提取内容，等等。
回答by Matej Janov?ík
This is the template I use, just delete whatever you dont need for a new project.
这是我使用的模板，只需删除新项目不需要的任何内容。
<!doctype html>
<html class="no-js" lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title></title>
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="author" content="">
<meta name="robots" content="index, follow">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="default">
<link rel="stylesheet" href="scss/style.css" />
<!-- http://realfavicongenerator.net/ -->
<meta property="fb:page_id" content="">
<meta property="og:title" content="">
<meta property="og:image" content="">
<meta property="og:description" content="">
<meta property="og:url" content="">
<meta property="og:site_name" content="">
<meta property="og:type" content="website">
<meta name="twitter:card" content="summary">
<meta name="twitter:url" content="">
<meta name="twitter:title" content="">
<meta name="twitter:description" content="">
<meta name="twitter:image" content="">
<meta name="twitter:site" content="">
<script src="js/vendor/modernizr.js"></script>
</head>
<body>
</body>
</html>
回答by André Bravo Ferreira
回答by jayrobinson
Most browsersdon't mind how you order your elements, but you should always specify charsetfirst.
大多数浏览器不介意您如何对元素进行排序，但您应该始终charset首先指定。
Best practices for IE7+ requirethat the charset, X-UA-Compatible, and basedeclarations occur before anything else in the head, otherwise the browser starts over and re-parses everything that came before.
针对IE7 +最佳实践要求的charset，X-UA-Compatible以及base申报的任何事情之前出现head，否则浏览器会从头开始，它以前重新解析一切。
回答by mahemoff
Adding a few performance suggestions to Brian's answer, highest priority should logically be things that will need to be downloaded, so the browser can start downloading them asap, and things that will affect how the page is presented. So I'd suggest:
在 Brian 的答案中添加一些性能建议，从逻辑上讲，最高优先级应该是需要下载的内容，以便浏览器可以尽快开始下载它们，以及会影响页面呈现方式的内容。所以我建议：
- Metas affecting appearance, such as charset (required early by the spec too), viewport, apple-mobile-web-app-capable
- Title near the top so the browser can render it asap and user has a sense something is happening
- Favicon and touch icons
- CSS (at least CSS for above-the-fold; other CSS can be loaded in the footer if you want to get fancy). This step typically blocks everything else from proceeding, which is why I put the previous items above it, as they provide some feedback during the CSS delay.
- Critical scripts (such as user-agent sniffing that may affect layout) which can't be loaded in the footer
- Everything else (e.g. necessary metadata in the form of links and meta tags)
- 影响外观的元数据，例如字符集（规范早期也需要）、视口、apple-mobile-web-app-capable
- 标题靠近顶部，以便浏览器可以尽快呈现它，并且用户可以感觉到正在发生的事情
- Favicon 和触摸图标
- CSS（至少是首屏的 CSS；如果您想花哨的话，可以在页脚中加载其他 CSS）。这一步通常会阻止其他所有内容的进行，这就是我将前面的项目放在它上面的原因，因为它们在 CSS 延迟期间提供了一些反馈。
- 无法在页脚中加载的关键脚本（例如可能影响布局的用户代理嗅探）
- 其他所有内容（例如链接和元标记形式的必要元数据）
You might also consider inlining whatever CSS and JS is loaded in head, especially if its small and the external script/sheet is unlikely to be cached according to your typical visitor's profile. And if you do inline it, you'll ideally want to compress it.
您还可以考虑内联在 head 中加载的任何 CSS 和 JS，特别是如果它很小并且外部脚本/表不太可能根据您的典型访问者的个人资料进行缓存。如果你内联它，你最好想压缩它。
Last thing: The user has to wait around for head - and any blocking resources it loads - so it's best to put as much as possible in the body or footer.
最后一件事：用户必须等待头部 - 以及它加载的任何阻塞资源 - 所以最好将尽可能多的内容放在正文或页脚中。
回答by Ryan Doherty
You want your content-type first as this denotes the character encoding, otherwise if it comes later on, some browsers attempt to guess the encoding. (I can't remember the specifics, but I think IE will guess if it doesn't find an encoding in the first 75 characters of the document?)
您首先需要您的内容类型，因为这表示字符编码，否则如果稍后出现，某些浏览器会尝试猜测编码。（我不记得具体细节，但我认为 IE 会猜测它是否在文档的前 75 个字符中找不到编码？）
Most webservers send the encoding in the HTTP headers, but if a user saves your page, the headers aren't saved with it.
大多数网络服务器在 HTTP 标头中发送编码，但如果用户保存您的页面，标头不会与它一起保存。
I'd put CSS references second so the browser downloads them as soon as possible.
我将 CSS 引用放在第二位，以便浏览器尽快下载它们。
JavaScript I wouldn't put in the head, it should go at the bottom of your pages as downloading them blocks rendering of pages.
JavaScript 我不会放在头上，它应该放在页面的底部，因为下载它们会阻止页面呈现。
回答by David R Tribble
IIRC, some browsers will re-load the document upon encountering a content-typeelement. So that element should probably come first within the headelement of the document.
IIRC，一些浏览器会在遇到content-type元素时重新加载文档。因此，该元素可能应该head在文档元素中排在第一位。
