Question

<div id="header">应该在</div> 处结束，而应该在</div> 处结束。

我的div应该以注释结尾。唯一应在此div <div id="mySidebar">处结束的div。

为什么div以错误的</div>结尾标签？

（对不起，如果格式化格式很糟糕。我使用的频率不是很高，所以我的格式设置和问题可能很可怕。）

<!DOCTYPE html>
<html>
<head>
<title>Caleb Did This</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="Caleb.css">
</head>
<body>
<div id="header">
<div id="mySidebar">
<a href="javascript:hideMenu()"class="Links" id="close">Close <b>X</b></a>
<a href="" class="Links link">About</a>
<a href="index.html" class="Links link">Home</a>
<a href="" onclick="myAccFunc()" class="Links link">Websites</a>
</div> <!--  End of mySidebar Div  -->
<div id="notBar">
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAACZSURBVGhD7djBCcJAGETh1QpiKzakxViDYCtpwSKUNKIzh9wW/pziuLwP3jFhQgzCNgAAMLijuqq7eoTlTd7mjaWb+oTnjaWn6l2clDeWhnkjB5X8jVyUNwIAsk3qFJY3bXZWi+r9oyb0Vt5YmlXvBkl5Y2mYB/Fre6neDRLytk0/rdXff+wAgJ/ggG7HOKBLiwM6AACQr7UvP+370u9envwAAAAASUVORK5CYII=" alt="Menu Bar" style="width: 35px; height: 40px;" id="menu" onclick="showMenu()"> 
<center class="center">Caleb Did This</center>
</div> <!-- End of Header Div  -->
<img src="https://cdn.pixabay.com/photo/2016/10/25/12/28/iceland-1768744_960_720.jpg" id="Ice">
<footer>
<p class="pmargin"><span class="gray">Created and designed by</span>
<span class="names">Caleb</span></p>
<p><span class="gray">Lots of help from my uncle</span>
<span class="names">Jonathan</span></p>
<p class="icon"><span class="gray">All Icons were made by</span></p>
<a href="https://icons8.com" class="a"><span class="names">Icons8</span></a>
</footer>
</div> <!-- End of notBar Div-->
<script type="text/javascript" src="Caleb.js">
</script>
</body>
</html>

Answer 1

看来您的“ notBar” div在页脚之后而不是在“ header” div中关闭了。试试这个：

    <div id="header">
    <div id="mySidebar">
        <a href="javascript:hideMenu()"class="Links" id="close">Close <b>X</b></a>
        <a href="" class="Links link">About</a>
        <a href="index.html" class="Links link">Home</a>
        <a href="" onclick="myAccFunc()" class="Links link">Websites</a>
    </div> <!--  End of mySidebar Div  -->
    <div id="notBar">
        <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAACZSURBVGhD7djBCcJAGETh1QpiKzakxViDYCtpwSKUNKIzh9wW/pziuLwP3jFhQgzCNgAAMLijuqq7eoTlTd7mjaWb+oTnjaWn6l2clDeWhnkjB5X8jVyUNwIAsk3qFJY3bXZWi+r9oyb0Vt5YmlXvBkl5Y2mYB/Fre6neDRLytk0/rdXff+wAgJ/ggG7HOKBLiwM6AACQr7UvP+370u9envwAAAAASUVORK5CYII=" alt="Menu Bar" style="width: 35px; height: 40px;" id="menu" onclick="showMenu()"> 
        <center class="center">Caleb Did This</center>
    </div> <!-- End of notBar Div-->    
</div> <!-- End of Header Div  -->

<img src="https://cdn.pixabay.com/photo/2016/10/25/12/28/iceland-1768744_960_720.jpg" id="Ice">
<footer>

    <p class="pmargin"><span class="gray">Created and designed by</span> <span class="names">Caleb</span></p>
    <p><span class="gray">Lots of help from my uncle</span> <span class="names">Jonathan</span></p>
    <p class="icon"><span class="gray">All Icons were made by</span></p> <a href="https://icons8.com" class="a"><span class="names">Icons8</span></a>

</footer>

Answer 2

这是您的文档结构：

<!DOCTYPE html>
<html>
<head>
    <title>Caleb Did This</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" href="Caleb.css">
</head>
<body>

<div id="header">
     <div id="mySidebar">
            <a href="javascript:hideMenu()"class="Links" id="close">Close <b>X</b></a>
            <a href="" class="Links link">About</a>
            <a href="index.html" class="Links link">Home</a>
            <a href="" onclick="myAccFunc()" class="Links link">Websites</a>
    </div> <!--  End of mySidebar Div  -->
    <div id="notBar">
            <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAACZSURBVGhD7djBCcJAGETh1QpiKzakxViDYCtpwSKUNKIzh9wW/pziuLwP3jFhQgzCNgAAMLijuqq7eoTlTd7mjaWb+oTnjaWn6l2clDeWhnkjB5X8jVyUNwIAsk3qFJY3bXZWi+r9oyb0Vt5YmlXvBkl5Y2mYB/Fre6neDRLytk0/rdXff+wAgJ/ggG7HOKBLiwM6AACQr7UvP+370u9envwAAAAASUVORK5CYII=" alt="Menu Bar" style="width: 35px; height: 40px;" id="menu" onclick="showMenu()"> 
            <center class="center">Caleb Did This</center>
    </div> <!-- End of NotBar  -->

    <img src="https://cdn.pixabay.com/photo/2016/10/25/12/28/iceland-1768744_960_720.jpg" id="Ice">
    <footer>

            <p class="pmargin"><span class="gray">Created and designed by</span> <span class="names">Caleb</span></p>
            <p><span class="gray">Lots of help from my uncle</span> <span class="names">Jonathan</span></p>
            <p class="icon"><span class="gray">All Icons were made by</span></p> <a href="https://icons8.com" class="a"><span class="names">Icons8</span></a>

     </footer>
</div> <!-- End of header Div-->
<script type="text/javascript" src="Caleb.js">
</script>
</body>
</html>

我认为您想要这样的东西：

<!DOCTYPE html>
<html>
<head>
    <title>Caleb Did This</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" href="Caleb.css">
</head>
<body>

    <div id="header">
        <div id="mySidebar">
            <a href="javascript:hideMenu()"class="Links" id="close">Close <b>X</b></a>
            <a href="" class="Links link">About</a>
            <a href="index.html" class="Links link">Home</a>
            <a href="" onclick="myAccFunc()" class="Links link">Websites</a>
        </div> 
        <div id="notBar">
            <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAACZSURBVGhD7djBCcJAGETh1QpiKzakxViDYCtpwSKUNKIzh9wW/pziuLwP3jFhQgzCNgAAMLijuqq7eoTlTd7mjaWb+oTnjaWn6l2clDeWhnkjB5X8jVyUNwIAsk3qFJY3bXZWi+r9oyb0Vt5YmlXvBkl5Y2mYB/Fre6neDRLytk0/rdXff+wAgJ/ggG7HOKBLiwM6AACQr7UvP+370u9envwAAAAASUVORK5CYII=" alt="Menu Bar" style="width: 35px; height: 40px;" id="menu" onclick="showMenu()"> 
            <center class="center">Caleb Did This</center>
        </div> 
    </div>
        <img src="https://cdn.pixabay.com/photo/2016/10/25/12/28/iceland-1768744_960_720.jpg" id="Ice">
    <footer>
            <p class="pmargin"><span class="gray">Created and designed by</span> <span class="names">Caleb</span></p>
            <p><span class="gray">Lots of help from my uncle</span> <span class="names">Jonathan</span></p>
            <p class="icon"><span class="gray">All Icons were made by</span></p> <a href="https://icons8.com" class="a"><span class="names">Icons8</span></a>
    </footer>
<script type="text/javascript" src="Caleb.js">
</script>
</body>
</html>

Answer 3

我已经采用了您的代码，并用HTML5标记替换了一些div，这些标记将显示出哪里出错了（有关详细信息，请参见HTML中的评论）：

<!DOCTYPE html>
<html>
<head>
<title>Caleb Did This</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="Caleb.css">
</head>
<body>
<header> <!-- div class="header" replaced with HTML5 element -->
<aside> <!-- div class="mySidebar" replaced with aside element -->
<!-- WARNING: Header element still open! -->
<a href="javascript:hideMenu()"class="Links" id="close">Close <b>X</b></a>
<a href="" class="Links link">About</a>
<a href="index.html" class="Links link">Home</a>
<a href="" onclick="myAccFunc()" class="Links link">Websites</a>
</aside> <!-- aside element closed -->
<main> <!-- div class="notBar" replaced with main element -->
<!-- WARNING: Header element still open! -->
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAACZSURBVGhD7djBCcJAGETh1QpiKzakxViDYCtpwSKUNKIzh9wW/pziuLwP3jFhQgzCNgAAMLijuqq7eoTlTd7mjaWb+oTnjaWn6l2clDeWhnkjB5X8jVyUNwIAsk3qFJY3bXZWi+r9oyb0Vt5YmlXvBkl5Y2mYB/Fre6neDRLytk0/rdXff+wAgJ/ggG7HOKBLiwM6AACQr7UvP+370u9envwAAAAASUVORK5CYII=" alt="Menu Bar" style="width: 35px; height: 40px;" id="menu" onclick="showMenu()"> 
<center class="center">Caleb Did This</center>
</header> <!-- Attempt to close page header with main element open... Oops! -->
<img src="https://cdn.pixabay.com/photo/2016/10/25/12/28/iceland-1768744_960_720.jpg" id="Ice">
<footer>
<p class="pmargin"><span class="gray">Created and designed by</span>
<span class="names">Caleb</span></p>
<p><span class="gray">Lots of help from my uncle</span>
<span class="names">Jonathan</span></p>
<p class="icon"><span class="gray">All Icons were made by</span></p>
<a href="https://icons8.com" class="a"><span class="names">Icons8</span></a>
</footer>
</main> <!-- Attempt to close main element although others have been closed prior to this - Oops...! -->
<script type="text/javascript" src="Caleb.js">
</script>
</body>
</html>

实际上，您已将各个div（尤其是结束元素）放错了位置。用本机HTML5元素替换它们应该可以显示正在发生的事情-有关发生的问题，请参阅我的评论。您需要清理并正确放置这些元素（不能在标题元素中嵌套一旁或主要部分）。这就需要将文档的各个部分旋转到正确的位置。

将end div标签附加到错误的head div标签上

3 个答案: