97

可以按任何顺序使用任何东西吗？之前的放置<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>影响文档兼容性和编码的元素吗？

4

7 回答 7

113

在 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标头未提供或不包含 a 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 重新排列内容，但屏幕阅读器通常会按源顺序阅读内容，搜索索引会按源顺序提取内容，等等。

于 2009-12-31T21:46:39.057 回答
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>
于 2015-06-10T19:54:07.650 回答
9

根据W3应该是：

  • 元字符集
  • 标题
  • 元名称="描述"
  • 元名称="关键字"
  • 样式表
  • JavaScript 文件
于 2014-10-22T10:45:10.603 回答
8

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

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

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

最后一件事：用户必须等待头部 - 以及它加载的任何阻塞资源 - 所以最好尽可能多地放在正文或页脚中。

于 2014-08-30T10:04:17.517 回答
6

大多数浏览器不介意您如何排序元素，但您应该始终charset先指定。

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

于 2012-03-24T23:18:15.867 回答
5

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

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

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

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

于 2009-12-31T21:48:04.737 回答
0

content-typeIIRC，一些浏览器会在遇到元素时重新加载文档。因此，该元素可能应该首先head出现在文档元素中。

于 2009-12-31T22:23:05.153 回答