Question

可以按任何顺序使用任何内容吗？在<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>

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

Answer 1

在HTML中，DOCTYPE必须首先出现，后跟一个<html>元素，该元素必须包含<head>元素，其中包含<title>元素，后跟{ {1}}元素。请参阅HTML 4.01和the HTML5 draft中HTML文档的全局结构说明;除了<body>之外，实际要求大致相同，但它们的描述不同。

实际代码（DOCTYPE，<html>，</html>等）是可选的;如果标签不存在，将自动创建元素。 <head>是HTML中唯一必需的标记。最短的有效HTML 4.01文档（至少，我可以生成）是（需要<title>，因为<p>中的某些内容需要有效）：

<body>

最短的有效HTML5文档：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd"><title></title><p>

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

浏览器在某些情况下执行内容类型嗅探，以确定使用<!DOCTYPE html><title></title> HTTP标头尚未指定的资源类型，如果Content-Type标头没有，则还会进行字符编码嗅探已提供或不包含Content-Type（您通常应尝试包含这些标头，并确保它们是正确的，但在某些情况下您不能，例如本地文件不通过HTTP传输）。但是，出于这些目的，它们仅在文档开头嗅探有限数量的字节，因此任何旨在影响内容嗅探或字符编码嗅探的内容都应该靠近文档的开头。

出于这个原因，HTML5 specifies用于指定字符集（charset或简称meta）的任何<meta http-equiv="Content-type" content="text/html; charset=...">标记必须在前1024字节内的文件，以使其生效。因此，如果要在文档中包含字符编码信息，则应将标记尽早放在文件中，甚至可能在<meta charset=...>元素之前。但请记住，如果您正确指定<title>标题，则无需使用此标记。

在CSS中，later style declarations take precedence over earlier ones，其他条件相同。因此，您通常应该放置最早可以覆盖的通用样式表，以及稍后更具体的样式表。

出于性能原因，在Content-type之前将脚本放在页面底部是个好主意，因为加载脚本会阻止页面的呈现。

显然，应该对</body>标签进行排序，以便依赖于每个订单的脚本首先加载依赖项。

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

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

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

Answer 3

根据W3应该是：

Meta charset
标题
元名称=＆＃34;描述＆＃34;
元名称=＆＃34;关键字＆＃34;
样式表
JavaScript文件

Answer 4

Most browsers不介意如何订购元素，但应始终先指定charset。

Best practices for IE7+ require charset，X-UA-Compatible和base声明发生在head之前的其他任何内容之前，否则浏览器会重新开始并重新解析之前发生的一切。

Answer 5

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

影响外观的Metas，例如charset（规格早期需要），viewport，apple-mobile-web-app-capable
标题靠近顶部，因此浏览器可以尽快呈现它，用户可以感觉到正在发生的事情
Favicon和触摸图标
CSS（至少CSS用于上层;如果你想获得花哨的话，可以在页脚中加载其他CSS）。这个步骤通常会阻止其他所有操作，因此我将之前的项目置于其上方，因为它们在CSS延迟期间提供了一些反馈。
无法在页脚中加载的关键脚本（例如可能影响布局的用户代理嗅探）
其他所有内容（例如链接和元标记形式的必要元数据）

您可能还会考虑内联加载任何CSS和JS，特别是如果根据您的典型访问者的个人资料，它的小和外部脚本/表格不太可能被缓存。如果你内联它，你理想地想要压缩它。

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

Answer 6

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

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

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

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

Answer 7

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

订购元素的最佳做法是什么？

7 个答案: