Question

我收到以下验证错误：

Line 63, Column 7: End tag for body seen but there were unclosed elements.
</body>

Line 19, Column 25: Unclosed element section.<section id="content"

我正在使用HTML5验证器，我怀疑这个错误是我的侧边栏没有对齐的原因。

CSS：

html{
    height:100%;
}
body{
    width:960px;
    height:100%;
    margin:0 auto;
}
p,h1,h2{
    margin:25px;
}
header{
    width:100%;
    border-bottom:1px solid green;
}
header #logo{
    height:90px;
    width:150px;
    border:1px solid red;
}

header nav{
    width:100%;
    height:45px;
    border:1px solid red;
}
header nav ul{
    float:left;
}
header nav ul li{
    display:inline;
}
header nav li a{
    float:left;
    text-decoration: none;
    margin-left:15px;
}

#content{
    float:left;
    width:705px;
    height:100%;
    border:1px solid red;
}
#showcase{
    position: relative;
    width:705px;
    padding:20px 0px 20px 20px;
}
#showcase ul{
    float:left;
    display:block;
    margin-left:-20px;
    margin-bottom:20px;
    width:200px;
    border:1px solid green;
    list-style:none;
}
#showcase ul li h3{
    margin: 0 0 0 -15px;
    letter-spacing: -0.25px;
    margin: 4px 0px 3px 0px;
    text-indent: 3px;
}

#showcase ul li h3 a {
    color: #010101;
    text-decoration: none;
}
#showcase ul li h3 a:hover {
    color: #4fbcd8;
}

#showcase ul p {
    height:70px;
    margin:0 0 0 -15px;
    line-height: 1.6em;
    padding-left: 3px;
}
#showcase ul img{
width:175px;
height:137px;
background-color:pink;
}
#sidebar{
    float:right;
    height:100%;
    width:225px;
    border:1px solid red;   
}
#box_one, #box_two, #box_three{
    height:100px;
    border-bottom:1px solid #ccc;
}
footer{
    clear:both;
    height:24px;
    border:1px solid red;
}

HTML：

<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <title>Template 2011</title>
    <link rel="stylesheet" href="_assets/css/style.css">
</head>
    <body>
        <header>
            <div id="logo">Template Here</div>
                <nav>
                    <ul>
                        <li><a href="#">Page One</a></li>
                        <li><a href="#">Page Two</a></li>
                        <li><a href="#">Page Three</a></li>
                        <li><a href="#">Page Four</a></li>
                        </ul>
                </nav>
        </header>
            <section id="content">
                <h1>Main Content Section</h1>
                    <p>Content</p>
                        <section id="showcase">
                            <h1>My Work</h1>
                                <ul><!-- Showcase One -->
                                    <li>
                                        <a href="#"><img src="#" alt="#" /></a>
                                        <br/>
                                        <h3><a href="#">Photography</a></h3>
                                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sem massa, auctor ac tempor at, congue quis erat. Fusce at adipiscing magna. Duis iaculis quam vel ante aliquam eget faucibus nisi pretium. Aenean varius tempus vulputate. Cras ipsum nisi, vehicula id aliquam a, blandit iaculis felis. Sed viverra diam purus. Nam tempor, risus feugiat auctor tristique, arcu massa gravida diam, scelerisque luctus dolor magna eget sapien.</p>
                                    </li>
                                </ul>
                                <ul><!-- Showcase Two -->
                                    <li>
                                        <a href="#"><img src="#" alt="#" /></a>
                                        <br/>
                                        <h3><a href="#">Photography</a></h3>
                                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sem massa, auctor ac tempor at, congue quis erat. Fusce at adipiscing magna. Duis iaculis quam vel ante aliquam eget faucibus nisi pretium. Aenean varius tempus vulputate. Cras ipsum nisi, vehicula id aliquam a, blandit iaculis felis. Sed viverra diam purus. Nam tempor, risus feugiat auctor tristique, arcu massa gravida diam, scelerisque luctus dolor magna eget sapien.</p>
                                    </li>
                                </ul>
                                <ul><!-- Showcase Three -->
                                    <li>
                                        <a href="#"><img src="#" alt="#" /></a>
                                        <br/>
                                        <h3><a href="#">Photography</a></h3>
                                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sem massa, auctor ac tempor at, congue quis erat. Fusce at adipiscing magna. Duis iaculis quam vel ante aliquam eget faucibus nisi pretium. Aenean varius tempus vulputate. Cras ipsum nisi, vehicula id aliquam a, blandit iaculis felis. Sed viverra diam purus. Nam tempor, risus feugiat auctor tristique, arcu massa gravida diam, scelerisque luctus dolor magna eget sapien.</p>
                                    </li>
                                </ul>           
            </section>
                <section id="sidebar">
                    <div id="box_one">
                        <p>Box One</p>
                    </div>
                    <div id="box_two">
                        <p>Box Two</p>
                    </div>
                    <div id="box_three">
                        <p>Box Three</p>
                    </div>
                </section>
            <footer>
                <p>This is the footer</p>
            </footer>
</body>

Answer 1

在第48行上方添加</section>结束标记，位于另一个</section>的正上方。它缺少那里

Answer 2

以下代码部分似乎缺少结束部分标记：

                <p>Content</p>
                    <section id="showcase">
                        <h1>My Work</h1>
                            <ul><!-- Showcase One -->
                                <li>
                                    <a href="#"><img src="#" alt="#" /></a>
                                    <br/>
                                    <h3><a href="#">Photography</a></h3>
                                    <p>Lorem ipsum...</p>
                                </li>
                            </ul>
                            <ul><!-- Showcase Two -->
                                <li>
                                    <a href="#"><img src="#" alt="#" /></a>
                                    <br/>
                                    <h3><a href="#">Photography</a></h3>
                                    <p>Lorem ipsum....</p>
                                </li>
                            </ul>
                            <ul><!-- Showcase Three -->
                                <li>
                                    <a href="#"><img src="#" alt="#" /></a>
                                    <br/>
                                    <h3><a href="#">Photography</a></h3>
                                    <p>Lorem ipsum...</p>
                                </li>
                            </ul>

无效的HTML Unclosed元素

2 个答案: