在<head>中定义元素的最佳实践是什么？
可以以任何顺序使用任何东西？ 在<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组件，它为所有js和css添加了每个<meta> SEO组件。 文件。 可以在<head>中允许的任何顺序放置任何元素，以影响文档的兼容性和编码？
在HTML中， DOCTYPE必须先出现，后面跟着一个<html>元素，后者必须包含一个包含<title>元素的<head> <title>元素，后跟一个<body>元素。 请参阅HTML 4.01中的HTML文档的全局结构和HTML5草稿的描述 ; 除了DOCTYPE以外，实际的要求大部分是相同的，但它们的描述是不同的。
实际的标签（ <html> ， </html> ， <head>等）是可选的; 如果标签不存在，元素将自动创build。 <title>是HTML中唯一必需的标记。 最短的有效的HTML 4.01文档（至less可以生成）是（需要一个<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中，所有标签都必须明确指定; 没有元素将被隐式插入。
浏览器在某些情况下执行内容types嗅探，以确定未使用Content-Type HTTP标头指定的资源Content-Type ，以及如果Content-Type标头尚未提供或不包含，则还包括字符编码嗅探一个charset （你通常应该尝试包含这些头文件，并确保它们是正确的，但是在某些情况下，你不能通过HTTP传输本地文件等）。 但是，为了达到这些目的，它们只能在文档的开始处嗅探有限数量的字节，因此任何旨在影响内容嗅探或字符编码嗅探的内容都应该靠近文档的开头。
由于这个原因， HTML5指定了用于指定字符集的任何meta标记（ <meta http-equiv="Content-type" content="text/html; charset=...">或简单地<meta charset=...> ）必须在文件的前1024个字节内才能生效。 因此，如果要在文档中包含字符编码信息，则应该尽早将标记放在文件中，甚至可能放在<title>元素之前。 但请记住，如果您正确指定Content-type标头，则此标记是不必要的。
在CSS中， 后面的样式声明优先于先前的声明 ，其他的都是平等的。 所以，你通常应该把最通用的样式表放在早些时候可能被覆盖的地方，以及后面更具体的样式表。
出于性能方面的原因，将脚本放在页面底部（ </body>之前）是一个好主意，因为加载脚本会阻止页面的呈现。
显然，应该对<script>标签进行sorting，以便依赖于每个订单的脚本首先加载相关性。
总的来说，除了我已经指定的约束之外， <head>中标签的顺序不应该太重要，除了可读性。 我倾向于看到顶部的<title> ，并以某种逻辑顺序放置其他<meta>标签。
大多数情况下，您应该将事情放入HTML文档的顺序应该是它们应该被显示的顺序，或者它们应该被访问的顺序。 您可以使用CSS重新排列事物，但是屏幕阅读器通常会以源顺序读取事物，search索引将按照源顺序提取事物，等等。
这是我使用的模板，只是删除你不需要的新项目。
<!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>
根据W3应该是：
- 元字符集
- 标题
- 元名称=“描述”
- 元名称=“关键字”
- 样式表
- JavaScript文件
您首先需要您的内容types，因为这表示字符编码，否则如果稍后出现，则某些浏览器尝试猜测编码。 （我不记得具体细节，但我认为IE浏览器会猜测它是否在文档的前75个字符中找不到编码？）
大多数networking服务器都会在HTTP头文件中发送编码，但是如果用户保存了网页，那么头文件不会随之保存。
我将CSS引用放在第二位，以便浏览器尽快下载它们。
JavaScript我不会把头放在页面底部，因为下载它们会阻止页面的渲染。
大多数浏览器不介意你如何sorting你的元素，但你应该总是指定charset 。
IE7 +的最佳实践要求 charset ， X-UA-Compatible和base声明在head任何其他部分之前发生，否则浏览器会重新开始并重新parsing之前发生的所有事情。
为Brian的答案增加一些性能build议，最高优先级应该在逻辑上是需要下载的东西，所以浏览器可以开始下载它们，并且会影响页面的呈现方式。 所以我build议：
- 影响外观的元素，比如charset（规范也要求太早），视口，支持apple-mobile-web-app-capable
- 标题附近的顶部，所以浏览器可以尽快呈现，用户有感觉的事情正在发生
- Favicon和触摸图标
- CSS（至lessCSS为上面的折叠;其他CSS可以加载在页脚，如果你想花哨）。 这一步通常会阻止所有其他的操作，这就是为什么我把之前的项目放在它之上，因为它们在CSS延迟期间提供了一些反馈。
- 严重的脚本（如可能影响布局的用户代理嗅探）不能在页脚中加载
- 其他一切（如链接和元标记forms的必要的元数据）
您可能还会考虑内联任何CSS和JS头文件，特别是如果根据您的典型访问者的configuration文件，它的小和外部脚本/表不可能被caching。 如果你把它内联，你最好想压缩它。
最后一件事：用户必须等待头部 – 并加载任何阻塞的资源 – 所以最好尽可能多地放在主体或页脚中。
IIRC，一些浏览器将在遇到content-type元素时重新加载文档。 所以这个元素应该在文档的head元素中最先出现。
