html验证器中的“Stray start tag footer”？答案

【问题标题】："Stray start tag footer" in html validator?html验证器中的“Stray start tag footer”？
【发布时间】：2013-09-22 02:29:10
【问题描述】：

我无法弄清楚为什么会出现此错误：

杂散的开始标签页脚。

这是代码（我把内容拿出来了，这只是标签）

<!doctype html>

<head>
    <title>title</title>
    <meta charset="UTF-8">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="stylesheet" type="text/css" href="stylesheet.css">
</head>
<body>
    <img src="heading.jpg" width="840" alt="pic">
    <!--<div id="container"></div> used ot set width of page -->
    <nav>
        <div id="columns">
            <a href="index.html">Home</a>
            <a href="products.html">Products</a>
            <a href="gift_ideas.html">Gift Ideas</a>
        </div>
        <br>
        <div id="link">
            <a href="link1.html">link1</a>|<a href="link2.html">link2</a>|<a href="link3.html">link 3</a>
        </div>
    </nav>
    <section>
        <br>
        <div id="homePage">
            <h1>Welcome</h1>
            <br>
            <div id="cart">
                <img src>
            </div>
        </div>
    </section>
</body>
<footer>
    <br>
    <h2>Contact Us</h2>
    Email: <a href="email@example.co.nz">email@example.co.nz</a>
    <img src>
</footer>

我确定我已经关闭了每个标签，那么页脚有什么问题？

【问题讨论】：

我没有看到<html></html>，但您的页脚看起来还不错。
页脚位于<body> 标记之外也可能无济于事。

标签： html css validation

【解决方案1】：

您需要将</body> 结束标记移到最后，因为footer 元素不能出现在body 元素之后，而是出现在其中。这遵循根元素html element 的语法：它包含一个head 元素和一个body 元素，仅此而已。

验证器显示“Stray start tag footer”，因为开始标签出现在不能启动任何元素的上下文中 - 在 </body> 标签之后，其中只有可选的 </html> 标签可能出现。

【讨论】：

【解决方案2】：

添加了缺少的<html> 标签，<footer> 带入了<body> 标签。虽然与您的问题没有直接关系，但您似乎也在使用 <br> 标签在各种元素之间留出空间。我建议你停止这样做，并使用 CSS 来调整这些元素的 margin 属性。

完整代码如下：

<!doctype html>
<html>
<head>
    <title>title</title>
    <meta charset="UTF-8">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="stylesheet" type="text/css" href="stylesheet.css">
</head>
<body>
    <img src="heading.jpg" width="840" alt="pic">
    <!--<div id="container"></div> used ot set width of page -->
    <nav>
        <div id="columns">
            <a href="index.html">Home</a>
            <a href="products.html">Products</a>
            <a href="gift_ideas.html">Gift Ideas</a>
        </div>
        <br>
        <div id="link">
            <a href="link1.html">link1</a>|<a href="link2.html">link2</a>|<a href="link3.html">link 3</a>
        </div>
    </nav>
    <section>
        <br>
        <div id="homePage">
            <h1>Welcome</h1>
            <br>
            <div id="cart">
                <img src>
            </div>
        </div>
    </section>
    <footer>
        <br>
        <h2>Contact Us</h2>
        Email: <a href="email@example.co.nz">email@example.co.nz</a>
        <img src>
    </footer>
</body>
</html>

【讨论】：