Question

如果我没有做正确的事情，我道歉但是我想知道我是否可以通过我的HTML代码获得一些关于我的错误和警告的帮助。我的网站的代码和功能按预期工作，但我列出了很多错误。

我通过以下方式运行了下面列出的代码：https://validator.w3.org/#validate_by_input

它带来了14个错误或警告。我意识到这很多，所以任何帮助都将在这里受到赞赏。

HTML：

<!DOCTYPE html>
<html>
<head lang="en">
   <meta charset="utf-8">
   <title>Chapter 4</title>
   <link rel="stylesheet" href="css/reset.css" />
   <link rel="stylesheet" href="css/Lab4.css" />
</head>
<body>
<form method="get" action="http://www.randyconnolly.com/tests/process.php">
   <fieldset>
      <legend>Photo Details</legend>
      <table>
         <tr>
            <td colspan="2">
               <p>
               <label>Title</label><br/>
               <input type="text" name="title" size="80"/>
               </p>
               <p>
               <label>Description</label><br/>
               <textarea name="description" rows="5" cols="61">
               </textarea>
               </p>            
            </td>
         </tr>
         <tr>
            <td> 
               <p> 
               <label>Continent</label><br/>
               <select name="continent">
                  <option>Choose continent</option> 
                  <option>Africa</option>
                  <option>Asia</option>
                  <option>Europe</option>
                  <option>North America</option>
                  <option>South America</option>
               </select>
               </p>
               <p> 
               <label>Country</label><br/>
               <select name="country">
                  <option>Choose country</option> 
                  <option>Canada</option>
                  <option>Mexico</option>
                  <option>United States</option>
               </select>
               </p>
               <p>	
               <label>City</label><br/>               
               <input type="text" name="city" list="cities"  size="40"/>
               <datalist id="cities">
                  <option>Calgary</option>                
                  <option>Montreal</option>
                  <option>Toronto</option>                  
                  <option>Vancouver</option>
               </datalist>
               </p>
            </td>
            <td>
               <div class="box">
                  <label>Copyright? </label><br/>
                  <input type="radio" name="copyright" value="1">All rights reserved<br/>
                  <input type="radio" name="copyright" value="2" checked>Creative Commons<br/>
               </div>
               <div class="box">
                  <label>Creative Commons Types </label><br/>
                  <input type="checkbox" name="cc" >Attribution <br/>
                  <input type="checkbox" name="cc" >Noncommercial <br/>    
                  <input type="checkbox" name="cc" >No Derivative Works <br/>  
                  <input type="checkbox" name="cc" >Share Alike
               </div>               
            </td>
         </tr>
         <tr>
            <td colspan="2" >
            <div class="rectangle"> 
               <label>I accept the software license</label>
               <input type="checkbox" name="accept" >
            </div>
            </td>
         </tr>
         <tr>
            <td>
                  <p>
                  <label>Rate this photo: <br/>
                  <input type="number" min="1" max="5" name="rate" />  
                  </p>                  
                  <p>
                  <label>Color Collection: <br/>
                  <input type="color"  name="color" />   
                  </p>                  
            </td>
            <td>
               <div class="box">
                  <p>
                  <label>Date Taken: <br/>
                  <input type="date"  name="date" />   
                  </p>
                  <p>
                  <label>Time Taken: <br/>
                  <input type="time"  name="time" />   
                  </p>                  
               </div>
            </td>
         </tr>
         <tr>
            <td colspan="2">
               <div class="rectangle centered"> 
                  <input type="submit" class="rounded"> <input type="reset" value="Clear Form" class="rounded">      
               </div
            </td>
         </tr>
      </table>
   </fieldset>
</form>
</body>
</html>

Answer 1

标签需要一个结束标记（没有你的标签！）。变化：

<label>Rate this photo: <br/>至<label>Rate this photo: </label><br/>

<label>Color Collection: <br/>至<label>Color Collection: </label><br/>

<label>Date Taken: <br/>至<label>Date Taken: </label><br/>

label>Time Taken: <br/>至label>Time Taken: </label><br/>

您在第111行的结束>上也错过了div - 将</div更改为</div>

您的input类型也有一些警告。只要您的浏览器支持它们，我就会忽略它们。除此之外，你还好！[/ p>

Answer 2

Validator确实为您提供了代码无法验证的原因，但也许您不太了解（我们都必须从某处开始），所以这里有：

您已在<label>标记中包含<select>，<input>和<p>个元素。这不是好的标记结构，因此您应该删除<p>标记。

有些<label>代码需要关闭</label>代码。

还有一个</div>标记，但没有关闭>。

时间<input>类型可能还没有为一般用途做好准备：

http://caniuse.com/#search=time

处理这些问题，你应该非常接近验证。希望有所帮助。

使用HTML代码

2 个答案: