列表和图像：错误答案- HTML测试

oxosxuxt 于 2022-12-21 发布在其他

关注(0)|答案(5)|浏览(102)

我只是随机尝试了这个sample HTML test，并提交了我的asnwer。
它显示以下错误。

- 列表和图像：回答错误**

在fiddle上运行代码片段，它运行良好。
真的很困惑，真的不知道答案有什么问题!!!
我的回答是：

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>Company page</title>
</head>

<body>
  <p>Welcome! Here you can find following things:</p>
  <ol>
    <em><li><a href="#logo">Company's logo</a></li></em>
    <li><a href="#employees">List of employees</a></li>
  </ol>

  <h1>Company's logo</h1>
  <p>Company uses following logos:</p>
  <ul>
    <li>New logo: <img src="new_logo.gif"></li>
    <li>Old logo: <img src="old_logo.gif"></li>
  </ul>

  <h1>List of employees</h1>

  <table>
    <thead>
      <th>First name</th>
      <th>Last name</th>
    </thead>
    <tbody>
      <tr>
        <td>Mary</td>
        <td>Williams</td>
      </tr>
      <tr>
        <td>James</td>
        <td>Smith</td>
      </tr>
    </tbody>
  </table>
</body>

</html>

有什么建议吗？
谢啦，谢啦

Html

来源：https://stackoverflow.com/questions/42847035/lists-and-images-wrong-answer-html-test

5条答案

按热度按时间

5gfr0r5j1#

我重新检查并修改了这段代码，使其符合W3C验证规则。下面是代码（它也能正常工作）：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Company page</title>
  </head>
  <body>
    <p>Welcome! Here you can find following things:</p>
    
    <ol>
      <li><a href="#logo"><em>Company's logo</em></a></li>
      <li><a href="#employees">List of employees</a></li>

    </ol>

    <h1 id="logo">Company's logo</h1>
    
    <p>Company uses following logos:</p>
    
    <ul>
        <li>New logo:<img src="new_logo.gif" alt="newlogopic"/>
        </li>
        
        <li>Old logo:<img src="old_logo.gif" alt="oldlogopic"/>
        </li>
    </ul>
    
        <h1 id="employees">List of employees</h1>
        <table>
            <thead>
                <tr>
                    <th>First name</th>
                    <th>Last name</th>
            </thead>
            <tr>
                <td>Mary</td>
                <td>Williams</td>
            </tr>
            <tr>
                <td>James</td>
                <td>Smith</td>
        </table>

赞(0）回复(0）举报 2022-12-21

f87krz0w2#

我知道这可能是令人沮丧的看了一段时间的东西，而不是弄清楚问题是什么。如果你运行这个通过W3C验证器，它会给予你这个错误。

要解决此问题，请将img放入list element中，如下所示：

<ul>
      <li>New logo:<img src="new_logo.gif"></li>
      <li>Old logo:<img src="old_logo.gif"></li>
</ul>

编辑：以下是正确的代码

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Company page</title>
  </head>
  <body>
    <p>Welcome! Here you can find following things:</p>
    <ol>
      <li><em><a href="#logo">Company's logo</a></em></li>
      <li><a href="#employees">List of employees</a></li>
    </ol>

    <h1>Company's logo</h1>
    <p>Company uses following logos:</p>
    <ul>
      <li>New logo:<img src="new_logo.gif"></li>
      <li>Old logo:<img src="old_logo.gif"></li>
    </ul>

    <h1>List of employees</h1>

    <table>
      <thead>
        <tr>
          <th>First name</th>
          <th>Last name</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Mary</td>
          <td>Williams</td>
        </tr>
        <tr>
          <td>James</td>
          <td>Smith</td>
        </tr>
      </tbody>

    </table>

  </body>
</html>

您的<tbody>和<thead>中缺少<tr>。
您还应该在<li>元素中移动<em>和</em>。

赞(0）回复(0）举报 2022-12-21

jv2fixgn3#

我刚刚在这个问题上工作了大约2个小时......结果发现（对我来说）关键是删除/li。有趣的是，后面的行没有问题，但第一行有问题。我不知道为什么，基本上是幸运的。
而且，我相当肯定img标记应该有alt=“description of picture”，所以这是代码的另一个问题，我不理解。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Company page</title>
  </head>
  <body>
    <p>Welcome! Here you can find following things:</p>
    
    <ol>
      <li><a href="#logo"><em>Company's logo</em>
      <li><a href="#employees">List of employees</a>
      </li>
    </ol>

    <h1 id="logo">Company's logo</h1>
    
    <p>Company uses following logos:</p>
    
    <ul>
        <li>New logo:<img src="new_logo.gif"/>
        </li>
        
        <li>Old logo:<img src="old_logo.gif"/>
        </li>
    </ul>
    
        <h1 id="employees">List of employees</h1>
        <table>
            <thead>
                <tr>
                    <th>First name</th>
                    <th>Last name</th>
            </thead>
            <tr>
                <td>Mary</td>
                <td>Williams</td>
            </tr>
            <tr>
                <td>James</td>
                <td>Smith</td>
            </tr>
        </table>
  </body>
</html>

下面是我使用的代码，它的工作：

赞(0）回复(0）举报 2022-12-21

zmeyuzjn4#

列表和图像-有一个em标记，它应该在li标记内，没有其他图像问题，“alt”是可选的，但它的好做法是添加在标记中。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Company page</title>
  </head>
  <body>
    <p>Welcome! Here you can find the following things:</p>
      <ol>
        <li><a href="#logo"><em>Company's logo</em></a></li>
        <li><a href="#employees">List of employees</a></li>
      </ol>

    <h1>Company's logo</h1>
    <p>Company uses the following logos:</p>
      <ul>
        <li>New logo:<img src="new_logo.gif"/></li>
        <li>Old logo:<img src="old_logo.gif"/></li>      
      </ul>

    <h1>List of employees</h1>
    <table>
      <thead>
        <th>First name</th>
        <th>Last name</th>
      </thead>
      <tr>
        <td>Mary</td>
        <td>Williams</td>
      </tr>
      <tr>
        <td>James</td>
        <td>Smith</td>
      </tr>
    </table>
  </body>
</html>

赞(0）回复(0）举报 2022-12-21

sdnqo3pr5#

em应该在li内，img标记也是如此

赞(0）回复(0）举报 2022-12-21