HTML语义难题
HTML语义难题
提问于 2018-02-05 14:57:12
我正在做下面的链接中给出的拼图。
它有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 class="header">和<div class="container">添加到外部div。添加Div部分以包含图像和标题以及其他解决难题的方法，但这些方法都不起作用，测试用例也不成功。
你能告诉我解决这个难题的正确方法是什么吗？
回答 2
Stack Overflow用户
发布于 2020-01-12 00:45:28
正确的回答是：
<!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>Stack Overflow用户
发布于 2019-03-10 11:30:58
虽然Madhukar的答案正确地提供了TestDome希望获得100%分数的元素，但应该注意的是，如果不使用多边形，'details‘和'summary’的操作(切换'p‘元素的可见性)将无法跨浏览器(https://caniuse.com/#search=details)工作。这些测试应该谨慎对待--正如一句老话所说：“剥皮的方法不止一种”。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/48617254
复制相关文章
相似问题
腾讯云开发者
