瞭解錯誤「在此上下文中元素div的子元素不允許爲元素圖例」。

以下是我的HTML標記。我使用Bootstrap，並遵循他們的許多例子。然而，當與W3C HTML驗證驗證，我得到了很多類型的錯誤：瞭解錯誤「在此上下文中元素div的子元素不允許爲元素圖例」。

"Element legend not allowed as child of element div in this context."

我不明白此錯誤消息。這是什麼意思？我應該如何更改我的HTML？

<!doctype html> 

<!-- Bootstrap customisations: 
    No responsiveness 
    @navbarBackground: #568FB6 
    @navbarBackgroundHighlight: lighten(#568FB6, 12%) 
--> 

<head> 
    <meta charset='utf-8'> 
    <meta http-equiv='X-UA-Compatible' content='IE=edge,chrome=1'> 
    <title>DeepFlow</title> 

    <link href='./img/favicon.ico' rel='icon'> 

    <link href='./css/bootstrap.css' rel='stylesheet'> 
    <link href='./css/font-awesome.css' rel='stylesheet'> 
    <link href='./css/global.css' rel='stylesheet'> 
    <link href='./css/login.css' rel='stylesheet'> 
    <link href='./css/custom.css' rel='stylesheet'> 

    <script src='./RGraph/libraries/RGraph.common.core.js'></script> 
    <script src='./RGraph/libraries/RGraph.common.annotate.js'></script> 
    <script src='./RGraph/libraries/RGraph.common.effects.js'></script> 
    <script src='./RGraph/libraries/RGraph.common.dynamic.js'></script> 
    <script src='./RGraph/libraries/RGraph.gauge.js'></script> 
    <script src='./RGraph/libraries/RGraph.line.js'></script> 

    <script src='./js/jquery.js'></script> 
    <script>jQuery.fx.speeds._default = 800;</script> 
    <script src='./js/underscore.js'></script> 
    <script src='./js/bootstrap.js'></script> 

    <script src='./js/ajax.js'></script> 
    <script src='./js/navbar.js'></script> 
    <script src='./js/login.js'></script> 

    <script src='./js/users.js'></script> 
    <script src='./js/editUser.js'></script> 
    <script src='./js/addUser.js'></script> 

    <script src='./js/statistics.js'></script> 
    <script src='./js/protocols.js'></script> 
    <script src='./js/export.js'></script> 
    <script src='./js/tuple.js'></script> 
    <script src='./js/network.js'></script> 
</head> 

<div class='navbar navbar-fixed-top' style='display:none'> 
    <div class='navbar-inner'> 
     <div class='container'> 
      <div class='brand'>DeepFlow</div> 
      <div id='navbar-container'> 
       <ul class='nav panes-nav'> 
        <li id='statistics-label'><a>Statistics</a></li> 
        <li id='protocols-label'><a>Protocols</a></li> 
        <li id='tuples-label'><a>Tuples</a></li> 
        <li id='exports-label'><a>Exports</a></li> 
        <li id='users-label'><a>Users</a></li> 
        <li id='network-label'><a>Network</a></li> 
       </ul> 
       <ul class='nav pull-right'> 
        <li id='sign-out'><a>Log out</a></li> 
       </ul> 
      </div> 
     </div> 
    </div> 
</div> 

<div id='wrap'> 
    <br> 
    <br> 
    <br> 

    <div class='container'> 
     <div class='alert alert-error' style='display:none'> 
      <span id='error-message'></span> 
      <button type='button' class='close' data-dismiss='alert'>×</button> 
     </div> 

     <div class='hero-unit' id='login-unit'> 
      <h2>Welcome to DeepFlow</h2> 
      <p>Please log in</p> 
      <center id='login-box' class='pull-right control-group'> 
       <div class='clearfix'> 
        <input type='text' placeholder='Username' id='login-username'/> 
       </div> 
       <div class='clearfix'> 
        <input type='password' placeholder='Password' id='login-password'/> 
       </div> 
       <button class='btn btn-primary' type='submit' id='login-button'>Log in</button> 
      </center> 
     </div> 

     <div class='row pane' id='statistics-pane' style='display:none'> 
      <legend>Network</legend> 

      <div class='form-horizontal well'> 
       <div class='offset1'> 
        <div class='control-group statistics-group'> 
         <label class='control-label graph-label'> 
          <div>Packets per second</div> 
          <p class='live-statistic' data-ending='' data-precision='0'></p> 
         </label> 
         <div class='controls'> 
          <canvas id='pps_graph' width='500' height='100'>[No canvas support]</canvas> 
         </div> 
        </div> 
        <div class='control-group statistics-group'> 
         <label class='control-label graph-label'> 
          <div>Throughput</div> 
          <p class='live-statistic' data-ending='&nbsp;kB/s' data-precision='0'></p> 
         </label> 
         <div class='controls'> 
          <canvas id='throughput_graph' width='500' height='100'>[No canvas support]</canvas> 
         </div> 
        </div> 
        <div class='statistics-group'> 
         <label class='control-label graph-label'id='packets-dropped-group'> 
          <div>Packets dropped</div> 
          <p class='live-statistic' data-ending='' data-precision='0'></p> 
         </label> 
         <div class='controls'> 
          <canvas id='packets_dropped_graph' width='500' height='100'>[No canvas support]</canvas> 
         </div> 
        </div> 
       </div> 
      </div> 

      <legend>System</legend> 
      <div class='form-horizontal well'> 
       <div class='offset1'> 
        <div class='control-group statistics-group'> 
         <label class='control-label graph-label'> 
          <div>CPU usage</div> 
          <p class='live-statistic' data-ending='&nbsp;%' data-precision='2'></p> 
         </label> 
         <div class='controls'> 
          <canvas id='cpu_graph' width='500' height='100'>[No canvas support]</canvas> 
         </div> 
        </div> 
        <div class='statistics-group'> 
         <label class='control-label graph-label'> 
          <div>Memory usage</div> 
          <p class='live-statistic' data-ending='&nbsp;k' data-precision='0'></p> 
         </label> 
         <div class='controls'> 
          <canvas id='memory_graph' width='500' height='100'>[No canvas support]</canvas> 
         </div> 
        </div> 
       </div> 
      </div> 
     </div> 

     <div class='row pane' id='protocols-pane' style='display:none'> 
      <legend>Protocol list</legend> 
      <table class='table table-hover table-condensed offset3' id='protocol-table'> 
       <thead> 
        <tr> 
         <th>Protocol</th> 
         <th id='protocol-status-column'></th> 
        </tr> 
       </thead> 
       <tbody id='protocol-rows'> 
       </tbody> 
      </table> 
     </div> 

     <div class='row pane' id='tuples-pane' style='display:none'> 
      <legend>List of tuples</legend> 
      <table class='table table-hover offset3' id='tuple-table'> 
       <thead> 
        <tr> 
         <th>Name</th> 
         <th>Total</th> 
         <th id='tuples-status-column'></th> 
        </tr> 
       </thead> 
       <tbody id='tuples-rows'> 
       </tbody> 
      </table> 
     </div> 

     <div class='row pane' id='exports-pane' style='display:none'> 
      <legend>Configure export destinations</legend> 
      <table class='table table-hover' id='exports-table'> 
       <thead> 
        <tr> 
         <th>Name</th> 
         <th>URL</th> 
         <th>IP</th> 
         <th>Port</th> 
         <th>Format</th> 
         <th id='exports-edit-column'></th> 
        </tr> 
       </thead> 
       <tbody id='exports-rows'> 
       </tbody> 
      </table> 

      <div class='modal hide fade' id='edit-export-modal'> 
       <div class='modal-header'> 
        <span type='button' class='close' data-dismiss='modal' aria-hidden='true'>&times;</span> 
        <h3>Edit export <code id='edit-export-old'></code></h3> 
       </div> 
       <div class='modal-body'> 
        <form class='form-horizontal'> 
         <div class='control-group'> 
          <label class='control-label'>New IP</label> 
          <div class='controls'> 
           <input type='text' id='edit-export-ip' placeholder='IP'/> 
          </div> 
         </div> 
         <div class='control-group'> 
          <label class='control-label'>New port</label> 
          <div class='controls'> 
           <input type='text' id='edit-export-port' placeholder='Port'/> 
          </div> 
         </div> 
         <label class='control-label'>New format</label> 
         <div class='controls'> 
          <input type='text' id='edit-export-format' placeholder='Format'/> 
         </div> 
        </form> 
       </div> 
       <div class='modal-footer'> 
        <span class='btn' id='edit-export-close'>Close</span> 
        <span class='btn btn-primary' id='edit-export-save'>Save changes</span> 
       </div> 
      </div> 
     </div> 

     <div class='row pane' id='users-pane' style='display:none'> 
      <div class='span6'> 
       <legend>List of users</legend> 
       <table class='table table-hover' id='users-table'> 
        <thead> 
         <tr> 
          <th>User</th> 
          <th>Rights</th> 
          <th id='users-edit-column'></th> 
         </tr> 
        </thead> 
        <tbody id='user-rows'> 
        </tbody> 
       </table> 
      </div> 

      <div id='new-user-box' class='span6'> 
       <legend>Add a new user</legend> 
       <form class='form-horizontal well'> 
        <div class='control-group'> 
         <label class='control-label'>Username</label> 
         <div class='controls'> 
          <input type='text' class='username' id='new-user-username' placeholder='Username'/> 
         </div> 
        </div> 
        <div class='control-group'> 
         <label class='control-label'>Password</label> 
         <div class='controls'> 
          <input type='password' class='password' id='new-user-password' placeholder='Password'/> 
         </div> 
        </div> 
        <div class='control-group'> 
         <label class='control-label'>Rights</label> 
         <div class='controls'> 
          <div class='btn-group' data-toggle='buttons-radio' id='new-user-rights'/> 
           <span class='btn'>Administrator</span> 
           <span class='btn' id='new-user-operator'>Operator</span> 
          </div> 
         </div> 
        </div> 
        <div class='controls'> 
         <span class='btn btn-primary' id='new-user-button'>Add new user</span> 
        </div> 
       </form> 
      </div> 

      <div class='modal hide fade' id='edit-user-modal'> 
       <div class='modal-header'> 
        <span class='close' data-dismiss='modal' aria-hidden='true'>&times;</span> 
        <h3>Edit user <code id='edit-user-old-username'></code></h3> 
       </div> 
       <div class='modal-body'> 
        <form class='form-horizontal'> 
         <div class='control-group'> 
          <label class='control-label'>New username</label> 
          <div class='controls'> 
           <input type='text' class='username' id='edit-user-username' placeholder='(Leave unchanged)'/> 
          </div> 
         </div> 
         <div class='control-group'> 
          <label class='control-label'>New password</label> 
          <div class='controls'> 
           <input type='password' class='password' id='edit-user-password' placeholder='(Leave unchanged)'/> 
          </div> 
         </div> 
         <label class='control-label'>New rights</label> 
         <div class='controls'> 
          <div class='btn-group' data-toggle='buttons-radio' id='edit-user-rights'> 
           <span class='btn'>Administrator</span> 
           <span class='btn'>Operator</span> 
          </div> 
         </div> 
        </form> 
       </div> 
       <div class='modal-footer'> 
        <span class='btn btn-danger pull-left' data-action='remove'><i class='icon-trash'></i> Remove</span> 
        <span class='btn' data-action='close'>Close</span> 
        <span class='btn btn-primary' data-action='save'>Save changes</span> 
       </div> 
      </div> 
     </div> 

     <div class='pane' id='network-pane' style='display:none'> 
      <div class='row'> 
       <div class='alert alert-info' style='display:none'> 
        Use this pane to configure the server network. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
       </div> 
       <form class='span6 form-horizontal'> 
        <legend>Basic configurations</legend> 
        <div class='control-group'> 
         <label class='control-label'>IP address</label> 
         <div class='controls'> 
          <input type='text' id='network-ip' placeholder='IP address'/> 
         </div> 
        </div> 
        <div class='control-group'> 
         <label class='control-label'>Subnet mask</label> 
         <div class='controls'> 
          <input type='text' id='network-mask' placeholder='Subnet mask'/> 
         </div> 
        </div> 
        <div class='control-group'> 
         <label class='control-label'>Default gateway</label> 
         <div class='controls'> 
          <input type='text' id='network-gateway' placeholder='Default gateway'/> 
         </div> 
        </div> 
       </form> 
       <form class='span6 form-horizontal'> 
        <legend>Optional fields</legend> 
        <div class='control-group'> 
         <label class='control-label'>DNS hostname</label> 
         <div class='controls'> 
          <input type='text' id='network-dns' placeholder='DNS hostname'/> 
         </div> 
        </div> 
        <div class='control-group'> 
         <label class='control-label'>NTP server hostname</label> 
         <div class='controls'> 
          <input type='text' id='network-ntp' placeholder='NTP server hostname'/> 
         </div> 
        </div> 
       </form> 
      </div> 

      <br> 
      <br> 
      <br> 
      <center> 
       <span class='btn btn-large btn-primary' id='network-save'>Save and reboot server now</span> 
      </center> 
     </div> 

     <div id='push'></div> 
    </div> 
</div> 

<div id='footer'> 
    <div class='container'> 
     <span class='muted credit'>&copy; Copyright 2013 Qosmos SA. All rights reserved.</span> 
     <img id='logo' src='./img/logo_grey.png' alt='logo'/> 
    </div> 
</div>

來源

2013-01-11 Randomblue

的詳細信息，您添加（ID，名稱，標籤等），就越難標記是快速閱讀，但下面介紹了legend元素的意圖。它旨在確定相互關聯的輸入組。然後該組被包裝在fieldset中。

<form> 
    <fieldset> 
     <legend>Like Using Fieldsets?</legend> 
     <input type="radio"> 
     <input type="radio"> 
    </fieldset> 

    <fieldset> 
     <legend>Your Name</legend> 
     <input type="text" name="fname"> 
     <input type="text" name="lname"> 
    </fieldset> 
</form>

http://www.w3.org/wiki/HTML/Elements/legend

（注：上面的代碼完全是爲了突出使用傳說。）

來源

2013-01-11 22:08:12 Dawson

<legend>標籤直接屬於下面<fieldset>標籤。

見w3c

來源

2013-01-11 21:15:50

是在驗證錯誤，

我有

<div> 
<fieldset> 
    <legend>Something</legend> 
....... 
</fieldset> 
</div>

並得到相同的錯誤

請參閱 http://lists.w3.org/Archives/Public/public-html-wg-issue-tracking/2012Jan/0008.html

來源

2013-01-14 19:12:46 Benn

瞭解錯誤「在此上下文中元素div的子元素不允許爲元素圖例」。

回答

相關問題