【问题标题】:What are best practices to order elements in <head>?在 <head> 中排序元素的最佳实践是什么?
【发布时间】:2009-12-31 20:49:46
【问题描述】:

可以按任何顺序使用任何东西吗?在&lt;title&gt; 之前放置&lt;meta http-equiv="Content-Type" content="text/html;charset=UTF-8"&gt; 是否重要

这是最常用的,是不是最好的方法?

<!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没有任何编码和&lt;meta&gt;

我使用具有 SEO 组件的 CMS,它在所有 js 和 css 之后为 SEO 添加每个 &lt;meta&gt;。文件。以&lt;head&gt; 中允许的任何顺序放置任何元素会影响文档兼容性和编码吗?

【问题讨论】:

  • 所有的cmets都去哪儿了?
  • 这个站点 (stackoverflow.com) 确实有它的编码集(到 UTF-8),它只是在它所属的 HTTP 标头中。在元标记中定义字符集是一种 hacky 解决方法。
  • 对。最好在 HTTP 标头中定义字符集,但在某些情况下您无法设置这些(例如从本地磁盘加载文件),因此 &lt;meta&gt; 标记是这些情况的解决方法,但不是必需的。
  • 这里有一堆cmets,至少九个或十个。它们没有什么特别之处,但它们也没有任何冒犯性。他们都去哪里了?谁有权删除 cmets,为什么?
  • 我们都有权删除自己的 cmets;有些人删除了自己的吗?由于我正忙于撰写答案,因此我从未见过有关此问题的 cmets。你确定你不是在想另一个问题吗?

标签: html css xhtml w3c


【解决方案1】:

在 HTML 中,DOCTYPE 必须先出现,然后是单个 &lt;html&gt; 元素,该元素必须包含一个包含 &lt;title&gt; 元素的 &lt;head&gt; 元素,然后是 &lt;body&gt; 元素。参见HTML 4.01the HTML5 draft中对HTML文档全局结构的描述;除了DOCTYPE之外,实际要求基本相同,但描述不同。

实际标签(&lt;html&gt;&lt;/html&gt;&lt;head&gt; 等)是可选的;如果标签不存在,将自动创建元素。 &lt;title&gt; 是 HTML 中唯一需要的标记。最短的有效 HTML 4.01 文档(至少,我可以生成)是(需要&lt;p&gt;,因为&lt;body&gt; 中需要有一些东西才能有效):

<!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 标头指定的资源的类型,如果尚未提供或未提供 Content-Type 标头,则还会执行字符编码嗅探'不包含charset(您通常应尝试包含这些标头,并确保它们正确,但在某些情况下您不能,例如本地文件未通过 HTTP 传输)。但是,出于这些目的,它们仅在文档开头嗅探有限数量的字节,因此任何旨在影响内容嗅探或字符编码嗅探的内容都应位于文档开头附近。

因此,HTML5 specifies 任何用于指定字符集的meta 标签(&lt;meta http-equiv="Content-type" content="text/html; charset=..."&gt; 或简单的&lt;meta charset=...&gt;)必须在文件的前 1024 个字节内才能生效.因此,如果要在文档中包含字符编码信息,则应将标记放在文件的开头,甚至可能在 &lt;title&gt; 元素之前。但是请记住,如果您正确指定了 Content-type 标头,则不需要此标记。

在 CSS 中,later style declarations take precedence over earlier ones,其他条件相同。因此,您通常应该将可能被覆盖的最通用的样式表放在更早的位置,而将更具体的样式表放在后面。

出于性能原因,最好将脚本放在页面底部,就在&lt;/body&gt; 之前,因为加载脚本会阻止页面的呈现。

显然,&lt;script&gt; 标签应该是有序的,这样依赖于每个顺序的脚本首先加载依赖项。

总的来说,除了我已经指定的约束之外,&lt;head&gt; 中标签的顺序应该没有太大关系,除了可读性。我倾向于将&lt;title&gt; 放在顶部,并将其他&lt;meta&gt; 标签按某种逻辑顺序放置。

大多数时候,您将内容放入 HTML 文档正文的顺序应该是它们应该显示的顺序,或者应该是访问它们的顺序。您可以使用 CSS 重新排列内容,但屏幕阅读器通常会按源顺序阅读内容,搜索索引会按源顺序提取内容,等等。

【讨论】:

  • TITLE 是强制性的,这对我来说是个新闻,看起来有点奇怪。但是检查官方规范,你当然是绝对正确的。生活和学习!
  • 令我惊讶的是,它是唯一的强制性标签......我实际上认为它应该在 HTML5 中也是可选的(因为它对于像小工具这样永远是在iframe 中并且从来没有可见的标题),但他们决定这次不改变它。
  • @Brian - 感谢 brian 的精彩解释。所以从来没有让我失望过。这个网站有策划者。还有一件事你很好地理解了问题然后你给出了很好的答案。伟大的工作。
  • @Jitendra 哈哈!我已经回答了你最近的一些问题,不是吗?我在新年晚会上有点醉了。但我可以试试……不过,我只是不能保证我的答案会和上一对一样好。
  • 现代方法是将带有asyncdefer 属性的&lt;script&gt; 标签放在&lt;head&gt; 中。见stackoverflow.com/questions/436411/…
【解决方案2】:

这是我使用的模板,只需删除新项目不需要的任何内容。

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

【讨论】:

  • X-UA-Compatible 必须是 head 中的第一个标签,因为 stackoverflow.com/questions/3449286/…
  • @Denis 你知道&lt;html class="default"&gt; 是什么意思吗?
  • @stom 你的意思是为什么会有class属性?一旦页面加载,它需要额外的 JavaScript 代码来删除该类。这样做 - 你会知道 JavaScript 是在浏览器中启用的。如果此属性仍然存在 - 这意味着 JavaScrips 已禁用,因此您可以根据需要使用 CSS 向用户显示一些消息
  • @Denis 使用 检查是否启用了 javascript
  • 请您评论一下您对此订单的理由吗?
【解决方案3】:

根据W3应该是:

  • 元字符集
  • 标题
  • 元名称="描述"
  • 元名称="keywords"
  • 样式表
  • JavaScript 文件

【讨论】:

  • 链接的文章正在重定向,而且似乎没有说任何关于订单的内容。
  • 样式表是渲染阻塞的,而不是在 CSS 之前异步加载 js。
【解决方案4】:

在 Brian 的回答中添加一些性能建议,逻辑上最高优先级应该是需要下载的内容,以便浏览器可以尽快开始下载它们,以及会影响页面呈现方式的内容。所以我建议:

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

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

最后一件事:用户必须等待 head - 以及它加载的任何阻塞资源 - 所以最好将尽可能多的放在 body 或 footer 中。

【讨论】:

    【解决方案5】:

    Most browsers 不介意如何排序元素,但您应该始终先指定 charset

    Best practices for IE7+ requirecharsetX-UA-Compatiblebase 声明出现在 head 中的任何其他内容之前,否则浏览器将重新开始并重新解析之前的所有内容。

    【讨论】:

      【解决方案6】:

      您首先需要您的内容类型,因为这表示字符编码,否则如果稍后出现,某些浏览器会尝试猜测编码。 (具体的我记不得了,不过我想IE会猜测它是否在文档的前75个字符中找不到编码?)

      大多数网络服务器在 HTTP 标头中发送编码,但如果用户保存您的页面,则标头不会与它一起保存。

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

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

      【讨论】:

        【解决方案7】:

        IIRC,一些浏览器会在遇到content-type 元素时重新加载文档。因此,该元素可能应该位于文档的 head 元素中。

        【讨论】:

          猜你喜欢
          • 2019-10-28
          • 1970-01-01
          • 2011-06-07
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          • 2021-11-27
          • 2015-07-20
          相关资源
          最近更新 更多