在<head>中订购元素的最佳做法是什么？

Question

在<head>中订购元素的最佳做法是什么？

可以按任何顺序使用任何东西？放置<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>

Run Code Online (Sandbox Code Playgroud)

这个网站http://stackoverflow.com没有任何编码和<meta>

我使用一个具有SEO组件的CMS,它<meta>在所有js和css之后为SEO 添加了每个组件.文件.可以在<head>影响文档兼容性和编码中允许的任何顺序放置任何元素吗？

Answer 1

Bri*_*ell 106

在HTML中,DOCTYPE必须首先是一个<html>元素,后面必须包含<head>一个<title>元素,后面跟一个<body>元素.请参阅HTML 4.01和HTML5草案中 HTML文档的全局结构说明; 实际要求大致相同DOCTYPE,但它们的描述不同.

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

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

Run Code Online (Sandbox Code Playgroud)

最短的有效HTML5文档:

<!DOCTYPE html><title></title>

Run Code Online (Sandbox Code Playgroud)

请注意,在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重新排列内容,但屏幕阅读器通常会按源顺序读取内容,搜索索引将按源顺序提取内容,依此类推.

TITLE是强制性的对我来说是个新闻,看起来有点奇怪.但是检查官方规格你当然是绝对正确的.活到老,学到老! (5认同)
现代的方法是在`<head>`中添加``script>`标签和`async`或`defer`属性.请参阅http://stackoverflow.com/questions/436411/where-is-the-best-place-to-put-script-tags-in-html-markup (3认同)
@Jitendra 哈哈！我已经回答了你最近的一堆问题，不是吗？我在新年聚会上有点醉了。但是我可以尝试...不过，我不能保证我的答案会像最后一对一样好。 (2认同)

Answer 2

Mat*_*čík 26

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

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

Run Code Online (Sandbox Code Playgroud)

由于http://stackoverflow.com/questions/3449286/force-ie-compatibility-mode-off-using-tags#comment26890406_3449338,X-UA兼容必须是第一个标记. (6认同)
@stom你的意思是为什么有类属性？一旦页面加载,它需要额外的JavaScript代码才能删除该类.这样做 - 您将知道在浏览器中启用了JavaScript.如果此属性仍然存在 - 这意味着JavaScrips已禁用,因此如果需要,您可以使用CSS向用户显示一些消息 (3认同)
@Denis 使用 <noscript></noscript> 检查 JavaScript 是否已启用 (2认同)

Answer 3

小智 8

根据W3应该是:

Meta charset
标题
元名="描述"
元名称="关键字"
样式表
JavaScript文件

Answer 4

小智 6

大多数浏览器并不介意您如何订购元素,但您应该charset首先指定.

针对IE7 +最佳实践要求的charset,X-UA-Compatible以及base申报的任何事情之前出现head,否则浏览器会从头开始,重新解析它以前的一切.

Answer 5

mah*_*off 6

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

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

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

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

Answer 6

Rya*_*rty 5

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

大多数Web服务器都会在HTTP标头中发送编码,但如果用户保存了您的页面,则标头不会随之保存.

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

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

归档时间：	15 年，10 月前
查看次数：	47082 次
最近记录：	8 年，7 月前