如何将HTML结构转换为HTML5_Html

如何将HTML结构转换为HTML5

html

如何将HTML结构转换为HTML5,html,Html,我想知道如何在语义上将下面的html结构重新组织为HTML5结构？我想把它放在节、图和dl中，但不知道如何正确地组织它。希望有人与HTML5语义结构的经验可以告诉我正确的方法。谢谢 <div class="product-list"> <h1>Product Category A</h1> <div class="item odd"> <div class="inner"> <div class="im

我想知道如何在语义上将下面的html结构重新组织为HTML5结构？我想把它放在节、图和dl中，但不知道如何正确地组织它。希望有人与HTML5语义结构的经验可以告诉我正确的方法。谢谢

<div class="product-list">
  <h1>Product Category A</h1>
  <div class="item odd">
    <div class="inner">
      <div class="image"><a href="image.jpg"><img src="img/product.jpg"></a></div>
      <div class="title">Product 1
        <span>Sub title 1</span>                
      </div>
      <div class="desc">
        <div class="col-left">Lorem ipsum</div>
        <div class="col-right">Price: 50</div>
      </div>
    </div>
  </div>
  <div class="item even">
    <div class="inner">
      <div class="image"><a href="image.jpg"><img src="img/product.jpg"></a></div>
      <div class="title">Product 2
        <span>Sub title 2</span>                
      </div>
      <div class="desc">
        <div class="col-left">Lorem ipsum</div>
        <div class="col-right">Price: 70</div>
      </div>
    </div>
  </div>
  <div class="item even">
    <div class="inner">
      <div class="image"><a href="image.jpg"><img src="img/product.jpg"></a></div>
      <div class="title">Product 3
        <span>Sub title 3</span>                
      </div>
      <div class="desc">
        <div class="col-left">Lorem ipsum</div>
        <div class="col-right">Price: 20</div>
      </div>
    </div>
  </div>
</div>


产品类别A
产品1
副标题1
乱数假文
价格:50
产品2
副标题2
乱数假文
价格:70
产品3
副标题3
乱数假文
价格:20

HTML5只是一种规范。它引入了一个新的概念。因此，在建议您将HTML结构转换为HTML5时，我建议您看看新的标记并使用它们

我在您当前的标记中看到很多

div

标记。一个兼容HTML5的网站不会像这样

为了给您一个起点，此示例使用了许多新的标记，并将被视为与HTML5兼容：

<!DOCTYPE html>
<head></head>
<body>
    <nav>
        <li></li>
        <li></li>
    </nav>
    <main>
        <section></section>
        <article></article>
    </main>
</body>
</html>

我认为没有官方方式。。。清理divitis并对其进行语义化处理的好主意。喜欢如果它是一个列表，请将其设置为

和列表项。这个问题属于您。您可以将
替换为，并将h1
包装到标题中。感谢您的指导：）注意（仍然）在任何版本的IE中都不受支持，将需要在CSS中进行调整，以使其按预期运行这是一个很好的观点。一些“尖端”规范存在兼容性问题。在部署任何生产代码之前，请进行研究。感谢您的指导：）