Question

我的朋友试图对这样的网站进行编码

<html>
  <head>
    <style>
      h1 {
        color: red;
      }
    </style>
    <div>
      <h1>
        My Website
      </h1>
    </div>
  </head>
  <body>
    <nav>
      <a>example link</a>
    </nav>
</body>

他没有使用<！DOCTYPE html>，并且他还将页面标题放置在元素中。当我尝试告诉他您需要一个<！DOCTYPE html>且您不能将内容放入元素时，他说这很好，并且您仍然没有告诉我这样做有什么问题。我不知道要向他解释，所以有人可以说为什么你不能这样做吗？

Answer 1

您的朋友建议的结构违反了the global structure of an HTML document； <body>标签必须包含文档的实际内容，而<head>标签必须仅包含描述文档的信息。

<body> tag允许其中包含任何 flow content （例如为<div>）：
<head> tag保留用于 metadata content （例如<meta>）
<div> element必须位于接受流内容的父级中：

错误的标记实际上将在页面上正确呈现，因为大多数浏览器实际上足够聪明，可以知道标记是错误的，并且自己可以正确。如果您检查DOM，则会发现它已自动更新，可以将<div>元素（及其内容）正确地移到{strong>内 <body>元素（只是< em>之前 <nav>）：

Answer 2

HTML5中引入了

<！DOCTYPE html>。我相信HTML标准的早期版本也没有指定很多此类元素，因此大多数浏览器仍会在没有它们的情况下呈现页面，以保持向后兼容性。

请参阅：https://en.wikipedia.org/wiki/Quirks_mode。

为什么不能将<body>内容放在<head>元素中？

2 个答案: