Question

我正在制作下面链接中给出的谜题

它有3个问题：

Update the website's HTML to make use of semantic elements so that:

The classless outer div element is replaced with a more appropriate element.
The divs with the image and caption classes are replaced with self-contained content elements.
The divs with the lorem-ipsum and description classes are replaced with elements, so that by default only the contents of the description element are shown. When the contents of the description element are clicked, the visibility of the rest of the lorem-ipsum element is toggled.

我尝试将类添加到外部div <div class="header">和<div class="container">。添加Div部分以包含图像和标题以及其他解决难题的方法，但没有一个正在工作，测试用例不成功。

请告诉我这个难题的正确方法。

Answer 1

看看： https://www.w3schools.com/html/html5_new_elements.asp

例如：

使用{Customer10:1248, Customer11:1248, Customer12:1248}的所有元素的<main>瞬间
使用<div>的{{1}}即时图像
使用<figure>的{{1}}即时图片标题
....

Answer 2

我使用了以下语义元素，并且有效。

在所有元素上使用<main>代替<div>
使用<figure>代替<div>来拍摄图像
使用<figcaption>代替<div>作为图像标题
对于<details>类，使用<div>代替lorem-ipsum
对于<summary>类，使用<div>代替description

Answer 3

正确的答案是：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Semantics</title>
  </head>
  <body>
    <section>
      <h1>Lorem Ipsum</h1>

      <figure  class="image">
        <img src="https://www.testdome.com/files/resources/12362/5d766d82-359a-42e3-b8e7-36fc20fa8395.png" alt="Lorem Ipsum">
        <figcaption  class="caption">Lorem Ipsum</figcaption >
      </figure >

      <details class="lorem-ipsum">
        <summary class="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit...</summary>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
          Curabitur vitae hendrerit mauris. Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
          Mauris lacinia scelerisque nibh nec gravida. 
          Duis malesuada nec nibh sit amet pulvinar. 
          Phasellus congue porttitor arcu, ut suscipit nibh aliquam vel. 
          Nunc arcu lectus, egestas ut sem ac, euismod porttitor eros. 
          Phasellus tincidunt consequat pharetra. Maecenas sodales purus at nulla finibus dapibus. 
          Nullam varius at nisl vel euismod. Fusce aliquet ligula non tempor fermentum. 
          Nam fermentum posuere mauris, quis aliquam nibh dictum sed.</p>
      </details>
    </section>
  </body>
</html>

Answer 4

尽管Madhukar的答案正确提供了TestDome希望获得100％分数的要素，但应注意，“细节”和“摘要”（切换“ p”要素的可见性）的操作不起作用跨浏览器（https://caniuse.com/#search=details），而无需使用polyfils。这些测试应谨慎对待-俗话说“给猫剥皮的方法不止一种”。

HTML语义拼图

4 个答案: