堆棧內存溢出
  簡體   English   中英

無效的HTML未封閉元素

[英]Invalid HTML Unclosed Element

 原文  2011-09-18 06:22:40  2   2    html/ css/ html5

問題描述

我收到以下驗證錯誤： 

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>

2 個解決方案

解決方案1
 1 已采納  2011-09-18 06:29:49

添加</section>上的正上方的另一條線48閉合標簽</section> 。 它在那里不見了

解決方案2
 0  2011-09-18 06:29:08

以下代碼部分似乎缺少結尾部分標簽： 

                <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>

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 未閉合元素形式的問題 修復未關閉的HTML標記 正則表達式為未關閉的HTML標記 如何找到未封閉的 html 標簽或將奇怪的樣式作為結果包含在一個元素中？ 未閉合的橫向 HTML 表邊框 用於查找未關閉的HTML標記的Java 在java中解析帶有“unclosed tags”的html xslt中未關閉的html標記 如何忽略XML或HTML中未關閉的標簽？ 未公開/錯誤的HTML標記擴展到其父級之外
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM