我已经完成了所有的 html 代码，但由于某种原因它只是显示一个空白页面答案

【问题标题】：I have done all of my html code, but for some reason it's just showing a blank page我已经完成了所有的 html 代码，但由于某种原因它只是显示一个空白页面
【发布时间】：2022-01-25 19:15:42
【问题描述】：

<!DOCTYPE html>
<html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Chat with ur friends!</title>

    <!-- Boostrap links-->
    <link rel="stylesheet"href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>

    <!-- font-family: 'Montserrat', sans-serif; basic -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Montserrat&display=swap"rel="stylesheet">

    <!-- font-family: 'Open Sans', sans-serif; header -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Open+Sans&display=swap" rel="stylesheet">

    <!-- Font awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
        
    <!-- Firebase links -->
    <script src="https://www.gstatic.com/firebasejs/7.6.2/firebase-app.js"></script>
    <script src="https://www.gstatic.com/firebasejs/7.6.2/firebase-firestore.js"></script>
    <script src="https://www.gstatic.com/firebasejs/live/3.1/firebase.js"></script>

    <link rel = "stylesheet" href = "../css/chat.css">
    </head>
    <body>
        <h2 id = "title"></h2>
        <canvas width = "800" height = "800" id = "myCanvas"></canvas>

        <div style = "display: flex;">
            <label>Width:</label>
            <input type = "number" id = "width" placeholder="Type in the width" class = "form-control">
            <div id = "color">
                <button id = "red" class = "square"></button>
                <button id = "blue" class = "square"></button>
                <button id = "green" class = "square"></button>
                <button id = "black" class = "square"></button>
                <button id = "pink" class = "square"></button>
                <button id = "orange" class = "square"></button>
                <button id = "yellow" class = "square"></button>
                <button id = "purple" class = "square"></button>
            </div>
            
        </div>

        <script src = "../js/chat.js"></script>
    </body>
</html>

这是代码，但它向我显示了一个空白页面，有人可以帮助我 我正在尝试解决此问题，但没有任何效果，请有人解释一下。我在 Visual Studio 上的实时重新加载显示相同的结果，我没有在此文件中执行任何 Java 脚本或 css。

【问题讨论】：

它显示了一些东西，但由于<canvas> 的大小，它位于页面底部。见这里：jsfiddle.net/2v8u1cb0
仅使用您提供的代码（即不加载 css 或 js 文件）我看到一个输入元素（向下滚动后）。请详细说明您希望看到的内容，如果您希望我们查看您的 CSS 或 JS 代码，您需要在您的问题中包含这些代码。例如，如果没有 JS，画布上就不会绘图。
我可以看到“宽度：”，一个带有“输入宽度”占位符的输入元素和页面底部的 8 个小按钮。你还期待别的吗？
谢谢你们，我并没有真正向下滚动，我只是觉得我的代码不起作用。我会更频繁地使用stackoverflow！

标签： javascript html css

【解决方案1】：

可能会有所帮助，我在第 10 行和第 17 行注意到以下内容无效：

 <link rel="stylesheet"href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
  <link href="https://fonts.googleapis.com/css2?family=Montserrat&display=swap"rel="stylesheet">

只需正确添加空间并提供服务器上的其他文件，这应该可以工作。如果在此之后它没有正确呈现，请查找其他文件并将其源链接回来。

【讨论】：

【解决方案2】：

显然，您的页面中没有任何“内容”。只有#width 输入。我的意思是，你已经创建了所有的 HTML 链接、标签、ID、类……但是这些标签中有任何内容。

事实上，如果我预览您的 HTML 代码，我看到的唯一内容就是页面底部的 #width 输入。 Your width input field that I can see at the bottom of the page

解决办法：

例如，尝试在 h2 标记中添加一些文本。您可以将您的 <h2 id = "title"></h2> 替换为 <h2 id = "title">Some sample text!</h2>，您应该能够开始在您的页面上看到内容。

【讨论】：

您的回答似乎是正确的。要获得更多支持，请尝试为其添加一些结构：从您的分析开始，分享您对解决方案的描述，然后将您的代码放入代码部分。