HTML页面文本不显示，疑似Script标签引发问题求助

问题根源 #

• HTML文档只能有一个<body>标签，你写了3个<body>，浏览器解析时会忽略多余标签，直接导致文本内容无法正常渲染。
• 你通过img.style.content给<body>设置图片，这个CSS属性会直接替换元素内容，把body内的文本完全覆盖，即使只有一个body，文本也会被图片取代。

修正方案 #

步骤1：重构HTML结构 #

只保留一个<body>，将上下文本和图片容器放在其中，用<img>标签承载随机图片（这是加载图片的标准方式）：

<!DOCTYPE html>
<html lang="en">
<body>
    Hello World <br><br>
    <!-- 用img标签展示随机图片，设置id用于JS操作 -->
    <img id="random-img" style="border: 2px solid #6b1148;" alt="随机图片">
    <br><br>
    Goodbye World <br>
    <script src="rand.js"></script>
</body>
</html>

步骤2：修改JavaScript代码 #

获取<img>元素，直接修改它的src属性加载随机图片，不会影响周围文本：

var images = [
  '1.png',
  '2.png',
  '3.png'
];

// 获取目标img元素
var img = document.getElementById("random-img");

function imgDisp() {
  // 用数组长度生成随机索引，避免硬编码数字，后续增减图片更灵活
  var num = Math.floor(Math.random() * images.length);
  img.src = images[num];
}

imgDisp();

关键说明 #

• 单<body>是HTML规范强制要求，多个body会引发浏览器解析异常，必须修正。
• 使用<img>标签的src属性是加载图片的标准做法，既能实现随机加载功能，又能保证文本与图片正常共存。

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