在<head>中对元素进行排序的最佳实践是什么？

90

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

这是最常用的，是最好的方法吗？

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

我使用具有SEO组件的CMS，该组件<meta>在所有js和CSS之后都添加了SEO。文件。可以按允许以任何顺序放置任何元素<head>影响文档兼容性和编码吗？

html  css  xhtml  w3c 
— Jitendra Vyas
source
所有评论都去了哪里？
— 佩卡
该站点（stackoverflow.com）确实设置了其编码集（设置为UTF-8），只是位于其所属的HTTP标头中。在meta标记中定义字符集是一种解决方法。
— jpsimons
2
对。最好在HTTP标头中定义字符集，但是在某些情况下，您不能设置这些字符集（例如，从本地磁盘加载文件），因此<meta>对于这些情况，标记是一种解决方法，但不是必需的。
— 布赖恩·坎贝尔
这里至少有九到十条评论。他们没什么特别的，但也没有什么冒犯性的。他们都去哪里了？谁有权删除评论，为什么？
— 佩卡
我们都有删除自己评论的权力；有人删除了自己的吗？我正忙着撰写答案，因此从未见过有关该问题的评论。您确定您没有考虑其他问题吗？
— 布赖恩·坎贝尔

Answers:

111

在HTML中，DOCTYPE必须先出现，然后是单个<html>元素，该元素必须包含一个包含<head>元素的<title>元素，然后是一个<body>元素。请参见HTML 4.01和HTML5草案中对HTML文档的全局结构的描述；实际要求与大致相同DOCTYPE，但对它们的描述有所不同。

实际的标签（<html>，</html>，<head>等）是可选的; 如果标签不存在，元素将自动创建。<title>是HTML中唯一需要的标签。有效的最短HTML 4.01文档（至少是我可以生成的）是（需要a，<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-TypeHTTP标头指定的资源的类型，以及Content-Type在未提供标头或不包含标头的情况下进行字符编码嗅探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重新排列内容，但屏幕阅读器通常会按源顺序读取内容，搜索索引将按源顺序提取内容，依此类推。

— 布莱恩·坎贝尔
source
5
TITLE是强制性的，这对我来说是个新闻，似乎有点奇怪。但是检查官方规格当然是绝对正确的。活到老，学到老！
— 卡尔·斯莫特里兹
令我感到惊讶的是，它是唯一的强制性标记...实际上，我认为它在HTML5中也应该是可选的（因为对于诸如小工具之类的东西，它永远iframe不会出现在标题中，并且永远都不会显示标题），但他们这次决定不更改该设置。
— 布赖恩·坎贝尔
@Brian-感谢brian的这个很好的解释。所以从来没有让我失望。这个网站有主谋。你还很理解问题，然后你很好地回答了。做得好。
— Jitendra Vyas 2010年
1
@Jitendra哈哈！我已经回答了您最近的一堆问题，不是吗？我在新年晚会上喝醉了。但是我可以尝试...但是，我只是不能保证我的答案会和最后一对一样好。
— Brian Campbell '01
3
现代方法是将<script>带有async或defer属性的标签放入中<head>。见stackoverflow.com/questions/436411/...
— joshreesjones
31

这是我使用的模板，只需删除您不需要的新项目。

<!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>
— 马捷（MatejJanovčík）
source
6
X-UA兼容的必须是头先标记由于stackoverflow.com/questions/3449286/...
— 丹尼斯
@Denis你知道什么<html class="default"> 意思吗？
— shaijut
3
@stom您的意思是为什么要有class属性？页面加载后，需要其他JavaScript代码才能删除该类。这样做-您将知道在浏览器中启用了JavaScript。如果此属性仍然存在-这意味着JavaScrips被禁用，因此您可以使用CSS显示一些信息给用户，如果你需要
— 丹尼斯
@Denis使用<noscript> </ noscript>检查是否启用了javascript
— TheCrazyProfessor
1
您能对此订单的理由发表评论吗？
— 2540625 '18
7

在Brian的回答中添加一些性能建议，从逻辑上说，最高优先级应该是需要下载的东西，因此浏览器可以尽快下载它们，并且会影响页面的呈现方式。所以我建议：

  • 会影响外观的元数据，例如字符集（规范早也需要），视口，支持apple-mobile-web-app的功能
  • 顶部附近的标题，以便浏览器可以尽快呈现它，并且用户可以感觉到正在发生什么
  • 图标和触摸图标
  • CSS（至少是首批CSS；如果您想花哨的话，也可以在页脚中加载其他CSS）。此步骤通常会阻止其他所有操作，这就是为什么我将前面的项目放在上面的原因，因为它们会在CSS延迟期间提供一些反馈。
  • 无法在页脚中加载的关键脚本（例如可能会影响布局的用户代理嗅探）
  • 其他所有内容（例如，链接和元标记形式的必要元数据）

您还可以考虑内联什么头加载的CSS和JS，尤其是如果根据您的典型访问者的个人资料，其小巧的外部脚本/表格不太可能被缓存的话。而且，如果要内联，则最好压缩它。

最后一件事：用户必须等待头部-以及其加载的任何阻塞资源-因此最好将其尽可能多地放在身体或页脚中。

— Mahemoff
source
7

根据W3应该是：

  • 元字符集
  • 标题
  • 元名称=“描述”
  • 元名称=“关键字”
  • 样式表
  • JavaScript文件
— 安德烈·布拉沃·费雷拉
source
链接的文章正在重定向，它似乎没有说明任何有关订单的信息。
— 2540625 '18
样式表是渲染阻止的，而是在CSS之前先加载js异步。
— 空'18
5

您首先要使用内容类型，因为它表示字符编码，否则，如果稍后出现，某些浏览器会尝试猜测该编码。（我不记得具体细节，但是我认为IE会猜测它是否在文档的前75个字符中找不到编码？）

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

我将CSS引用放在第二位，以便浏览器尽快下载它们。

JavaScript我不会放在首位，它应该放在页面的底部，因为下载它们会阻止页面的呈现。

— 瑞安·多尔蒂（Ryan Doherty）
source
0

IIRC，某些浏览器会在遇到content-type元素时重新加载文档。因此，该元素可能应该首先位于head文档的元素之内。

— 大卫·R·特里布尔
source
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.