<head>中元素的最佳排列顺序是什么？

Question

<head>中元素的最佳排列顺序是什么？

103

可以任意顺序使用吗？在<title>之前放置<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">重要吗？

这是最常用的方法，但是否是最好的方法呢？

<!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>

这个网站 http://stackoverflow.com 没有任何编码和 <meta>

我使用的 CMS 有一个SEO组件，它在所有js和css文件之后添加每个用于SEO的<meta>标签。在<head>中放置任何元素并改变它们的顺序是否会影响文档的兼容性和编码？

- Jitendra Vyas

所有的评论都去哪了？ - Pekka

这个网站（stackoverflow.com）确实已经设置了它的编码（为UTF-8），只是在HTTP头中。在meta标签中定义字符集有点像是一种hacky解决方法。 - jpsimons

2

正确。最好在HTTP头中定义字符集，但在某些情况下您无法设置它们（例如从本地磁盘加载文件），因此<meta>标签是这些情况下的解决方法，但不是必需的。 - Brian Campbell

我非常确定，其中一个来自NSD，一个来自Jitendra，还有两个是我自己的，我没有删除它们，但它们也不再出现在我的活动选项卡中。我知道这是同一个问题，因为我已经点赞了它，以抵消两个踩（如果您检查一下，您会发现它总共有三个踩），而我的橙色点赞也在那里。并不是说那些评论有任何重要性，但我想知道它们为什么被删除了。 - Pekka

嗯，这很奇怪。也许可以在http://meta.stackoverflow.com/上发布一个问题来询问一下？这可能是一个错误或管理员犯的错误；听起来值得问一下。 - Brian Campbell

显示剩余3条评论

7个回答

35

这是我使用的模板，只需删除您在新项目中不需要的任何内容即可。

<!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>

- Matej Janovčík

6

由于https://dev59.com/ZnA75IYBdhLWcg3wJFiY#XqaeEYcBWogLw_1b9Cw-，X-UA-Compatible 必须是 head 中的第一个标签。 - Denis

@Denis，你知道<html class="default">是什么意思吗？ - Shaiju T

3

@stom，你的意思是为什么需要类属性吗？这需要额外的JavaScript代码在页面加载后删除该类。通过这样做，你可以知道浏览器中是否启用了JavaScript。如果该属性仍然存在，则表示JavaScript已禁用，因此你可以使用CSS向用户显示一些消息（如果需要）。 - Denis

1

@Denis使用<noscript></noscript>来检查JavaScript是否启用。 - TheCrazyProfessor

1

请问您能否评论一下您制定这个顺序的原因？ - 2540625

9

根据W3的要求，应该包括以下内容：

字符集
标题
描述
关键词
样式表
JavaScript文件

- André Bravo Ferreira

链接的文章正在重定向，似乎没有提到任何关于顺序的内容。 - 2540625

样式表会阻塞渲染，最好在加载 CSS 之前异步加载 JS。 - Null

8

将一些性能建议添加到Brian的答案中，逻辑上最高优先级应该是需要下载的内容，这样浏览器就可以尽快开始下载它们，并且会影响页面呈现的内容。所以我建议：

影响外观的元标记，例如charset（规范中也要求尽早使用），viewport，apple-mobile-web-app-capable
靠近顶部的标题，以便浏览器可以尽快呈现它并让用户感到有事情正在发生
Favicon和touch图标
CSS（至少是above-the-fold的CSS；如果您想变得花哨，其他CSS可以在页脚加载）。此步骤通常会阻塞其他所有操作，这就是为什么我将前面的项目放在它之上的原因，因为它们在CSS延迟期间提供了一些反馈。
关键脚本（例如可能影响布局的用户代理嗅探）无法在页脚中加载
其他所有内容（例如必要的链接和元标记中的元数据）

您还可以考虑内联在head中加载的任何CSS和JS，特别是如果它很小并且外部脚本/表格不太可能根据您典型的访问者配置进行缓存。如果您内联它，最好压缩它。

最后一件事：用户必须等待head以及它加载的任何阻塞资源，因此最好将尽可能多的内容放在正文或页脚中。

- mahemoff

6

大多数浏览器不在意元素的顺序，但你应该始终首先指定charset。

IE7+ 的最佳实践要求在 head 中，charset、X-UA-Compatible 和 base 声明必须出现在任何其他内容之前，否则浏览器将重新开始解析之前的所有内容。

- jayrobinson

5

你需要先设置 content-type，这表示字符编码。否则，如果它出现在后面，一些浏览器会尝试猜测编码。（我记不清具体情况了，但我认为 IE 如果在文档的前75个字符中没有找到编码，就会猜测？）

大多数 Web 服务器都会在 HTTP 标头中发送编码，但如果用户保存您的页面，则标头不会保存。

我建议把 CSS 引用放在第二位，这样浏览器就可以尽快下载它们。

JavaScript 不应该放在 head 中，而应该放在页面底部，因为下载它们会阻止页面的渲染。

- Ryan Doherty

0

据我所知，一些浏览器在遇到 content-type 元素时会重新加载文档。因此，该元素应该放在文档的 head 元素中的第一位。

- David R Tribble

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Brian Campbell · Accepted Answer

在HTML中，DOCTYPE必须位于最前面，紧随其后的是一个单独的<html>元素，其中必须包含一个<head>元素，该元素包含一个<title>元素，然后是一个<body>元素。请参见HTML 4.01和HTML5草案中HTML文档的全局结构描述；除了DOCTYPE之外，实际要求大体相同，但有所不同。

实际标签（如<html>、</html>、<head>等）是可选的；如果没有这些标签，则会自动创建这些元素。在HTML中，<title>是唯一必需的标签。至少我能生成的最短有效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>

最短的有效HTML5文档：

<!DOCTYPE html><title></title>

请注意，在XHTML中，必须明确指定所有标签；不会隐式插入任何元素。

浏览器在某些情况下执行内容类型嗅探，以确定未使用Content-Type HTTP头指定的资源的类型，并且如果未提供或不包括charset（通常应尽量包括这些头，并确保它们是正确的，但有些情况下无法如此，例如本地文件未通过HTTP传输）。然而，它们仅在文档开头嗅探有限数量的字节，因此任何旨在影响内容嗅探或字符编码嗅探的内容都应该靠近文档开头。

因此，HTML5规定，用于指定字符集的任何meta标签（<meta http-equiv="Content-type" content="text/html; charset=...">或<meta charset=...>）必须在文件的前1024个字节内才能生效。因此，如果您要在文档中包含字符编码信息，则应将标签放置在文件的早期位置，甚至可能在<title>元素之前。但请注意，如果您正确指定了Content-type头，则不需要此标签。

在CSS中，稍后的样式声明优先于早期的声明，其他条件相等。因此，通常应该将可能被覆盖的最通用的样式表放在前面，将更具体的样式表放在后面。

出于性能原因，将脚本放在页面底部，在</body>之前可能是一个好主意，因为加载脚本会阻止页面的渲染。

显然，<script>标签应该按照依赖关系的顺序排序，以便首先加载依赖项的脚本。

总的来说，除了我已经指定的约束外，在<head>中标签的顺序不应太重要，除了可读性。我倾向于在顶部看到<title>，并按某种逻辑顺序放置其他<meta>标签。

大多数情况下，您应该按照它们应该显示或访问的顺序将事物放入HTML文档的正文中。您可以使用CSS重新排列事物，但屏幕阅读器通常会按照源顺序阅读事物，搜索索引将以源顺序提取事物等。