将 CSS 放在文档头部但我没有头部？答案

【问题标题】：Put CSS in the document head but i don't have a head?将 CSS 放在文档头部但我没有头部？
【发布时间】：2012-05-25 22:55:49
【问题描述】：

根据 google 的风格指南，您应该省略可选标签，例如 <head>

http://google-styleguide.googlecode.com/svn/trunk/htmlcssguide.xml#Optional_tags

但是，这样做会导致 google pagespeed 告诉我：

文档正文中的 CSS 会对渲染性能产生不利影响。 http://site.com 在文档正文中有 CSS：1 个样式块在正文应移动到文档头部。

对了，那该怎么办呢？

谢谢。

【问题讨论】：

标签： html pagespeed

【解决方案1】：

PageSpeed 在这种情况下是不可靠的。您应该分析自己的文档结构是否正确。使用 HTML 4.01 和验证器，您将立即看到 style 元素是否出现在 body 中，因为它是那里的标记错误（尽管它也可以在那里工作）。

您引用的页面http://site.com 没有这个问题（它是XHTML，没有标签遗漏）。请发布一个真实的 URL，或者至少使用 .example 伪域来表明一个 URL 是虚拟的。

没有看到实际的页面，是无法分析问题的，但总的来说，Google PageSpeed 似乎发出了虚假的 cmets。它似乎工作不一致，但至少在某些情况下，它显然会错误地解析文档。例如，以下代码触发了该消息：

<!doctype html>
<title>foo</title>
<style></style>
<h1>foo</h1>

这里没有歧义：style 元素在 head 元素中（这就是浏览器解析文档的方式，搜索引擎在这里并不重要），尽管 PageSpeed 声称并非如此。

我尝试添加省略的标签，但没有任何效果，直到突然，PageSpeed 停止发出消息，现在上面的文档得到了一个干净的报告。我得出的结论是，PageSpeed 的工作方式不确定，可能是由于其积极的缓存。

【讨论】：

谢谢我基本上有你的例子。所以pagespeed是错误的？很高兴知道我认为。

【解决方案2】：

此链接告诉您在哪些条件下可以省略某些标签。

http://www.whatwg.org/specs/web-apps/current-work/multipage/syntax.html#syntax-tag-omission

但请注意，省略标签并不意味着省略元素

在您的情况下是可选的（甚至是 html）。做吧

<!DOCTYPE html>     
  <link rel="stylesheet" href="pathTo.css">

你可以看看

Is it necessary to write HEAD, BODY and HTML tags?

对于可能想要尝试的读者，将以下代码保存到文件并阅读并使用 firebug 之类的工具进行检查

<!DOCTYPE html>     
 <meta http-equiv="Content-type" content="text/html; charset=utf-8">
 <title>Page Title</title>
 <link rel="stylesheet" href="pathTo.css">
 <script>var a = 0;</script><!-- placed in head -->

 <div>any html text or tags</div>
 <script> var b = 1</script> <!-- placed in body -->

【讨论】：

【解决方案3】：

来自规范：

如果元素为空，或者主体元素内的第一件事不是空格字符或注释，则可以省略主体元素的开始标记，除非主体元素内的第一件事是脚本或样式元素。

这似乎是您的问题的最可能原因，因为这使得起始正文标记非可选。

（这是假设您按照说明删除了所有可选标签，而不仅仅是选择）

【讨论】：