html - 为什么不能在元素中放置内容？

问题描述

我的朋友试图编写这样的网站

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

他没有使用 <!DOCTYPE html> 并且他还把他的页眉放在了 <head> 元素中。当我试图告诉他你需要一个 <!DOCTYPE html> 并且你不能将内容放在 <head> 元素中时，他说它工作得很好，你仍然没有告诉我这样做有什么问题。我不知道向他解释，所以有人可以说你为什么不能这样做吗？

标签： html

你朋友提出的结构违反了 HTML 文档的全局结构；标签必须包含文档的<body>实际内容，而<head>标签必须只包含描述文档的信息。

该 <body>标签允许其中的任何流内容（例如<div>）：
而<head>标签是为元数据内容 （例如）保留的<meta>：
并且该<div>元素必须位于接受流内容的父级中：

不正确的标记实际上会在页面上正确呈现，因为大多数浏览器实际上足够智能，可以知道标记不正确，并自行纠正。如果您检查 DOM，您会发现它已自动更新以正确地将<div>元素（及其内容）移动到元素内<body>（就在之前 <nav>）：

html - 为什么不能在元素中放置内容？

问题描述

解决方案

推荐阅读