为什么HTML中script、div标签可存在多个，html、body标签仅允许一个

1. 核心原因来自HTML官方规范定义 #

HTML文档的底层是DOM树结构，规范对不同标签的定位有明确约束：

• <html>是整个HTML文档的唯一根节点，所有其他标签都必须是它的子节点，自然不允许存在多个
• <head>、<body>是<html>下仅有的两个一级子节点，分别承载页面元信息和页面可见内容，规范明确要求二者仅能出现一次
• 你写多个<head>、<body>的代码并非完全不能被浏览器读取，只是浏览器的HTML解析器触发了容错机制，会自动忽略重复的根级标签，最终渲染结果和你的预期不符，所以看起来像无法正常运行。

2. <script>、<div>等标签允许多个的原因 #

这类标签属于规范定义的可重复元素：

• <script>属于元数据内容分类，设计定位就是用来引入多段独立的脚本逻辑，没有数量限制，只要放置在<head>或<body>内，浏览器就会按顺序依次解析执行
• <div>属于流内容分类，设计定位就是用来拆分不同的页面内容区块，自然支持重复使用

3. 和浏览器底层的关系 #

浏览器的解析规则是对HTML官方规范的落地实现，并非浏览器厂商自行制定的规则。所有主流浏览器的HTML解析器都会严格遵守规范里的元素唯一性要求，对不符合规范的多根节点代码做容错处理，这就是你遇到的两类代码运行效果有差异的根本原因。

不符合规范的多根节点代码示例 #

<!DOCTYPE html>
<html lang="en">
<head>
</head>
<head>
</head>
<head>
</head>
<head>
</head>

<body></body>
<body></body>
<body></body>
<body></body>

</html>

该代码存在多个重复的<head>、<body>标签，不符合规范，运行结果不符合预期。

符合规范的多script标签代码示例 #

<!DOCTYPE html>
<html lang="en">

<head>
    <script type="text/javascript">
        document.write("Hello World!")
    </script>
    <script type="text/javascript">
        document.write("Hello World!")
    </script>
    <script type="text/javascript">
        document.write("Hello World!")
    </script>
    <script type="text/javascript">
        document.write("Hello World!")
    </script>
    <script type="text/javascript">
        document.write("Hello World!")
    </script>
</head>

<body></body>

</html>

该代码仅存在一组<html>、<head>、<body>标签，多个<script>符合规范，可正常运行。

内容的提问来源于stack exchange，提问作者user11414635