Question

验证错误，不知道为什么会发生，任何人都可以帮我修复它吗？

第317行，第26列：在此上下文中，元素h3不允许作为元素跨度的子元素。（抑制此子树中的更多错误。）

<h3 class="menuHT"><span class="sdt_link">Home</span></h3>

元素范围的内容模型：短语内容。

<ul id="sdt_menu" class="sdt_menu">
    <li>
     <a href="home.html">
      <img src="images/imagesPop/2.jpg" alt=" Woman with child walking up the hill">
      <span class="sdt_active"></span>
      <span class="sdt_wrap">
       <h3 class="menuHT"><span class="sdt_link">Home</span></h3>
       <h6 class="menuHB"><span class="sdt_descr">Main page</span></h6>
      </span>
     </a>
    </li>
    <li>
     <a href="about.html">
      <img src="images/imagesPop/6.jpg" alt="The old image of Lulworth tower">
      <span class="sdt_active"></span>
      <span class="sdt_wrap">
       <h4 class="menuHT"><span class="sdt_link">About</span></h4>
       <h6 class="menuHB"><span class="sdt_descr">General Info.</span></h6>
      </span>
     </a>
     <div class="sdt_box">
      <a href="home.html">blablabla</a>
      <a href="home.html#AboutSection">Shopping Cart</a>
      <a href="#">Interactive Maps</a>
     </div>
    </li>
    <li>
     <a href="attractions.html">
      <img src="images/imagesPop/1.jpg" alt="The rock arc know as Durdle Door">
      <span class="sdt_active"></span>
      <span class="sdt_wrap">
       <h4 class="menuHT"><span class="sdt_link">Attractions</span></h4>
       <h6 class="menuHB"><span class="sdt_descr">Place to visit</span></h6>
      </span>
     </a>
     <div class="sdt_box">
       <a href="#">Websites</a>
       <a href="#">Illustrations</a>
       <a href="#">Photography</a>
     </div>
    </li>
    <li>
     <a href="gallery.html">
      <img src="images/imagesPop/3.jpg" alt="Human taking photo (front view of how he do it)">
      <span class="sdt_active"></span>
      <span class="sdt_wrap">
       <h4 class="menuHT"><span class="sdt_link">Gallery</span></h4>
       <h6 class="menuHB"><span class="sdt_descr">Slide shows</span></h6>
      </span>
     </a>
    </li>
    <li>
     <a href="directions.html">
      <img src="images/imagesPop/5.jpg" alt="Path which dissapear at the end">
      <span class="sdt_active"></span>
      <span class="sdt_wrap">
       <h4 class="menuHT"><span class="sdt_link">Location</span></h4>
       <h6 class="menuHB"><span class="sdt_descr">Travel Info.</span></h6>
      </span>
     </a>
    </li>
    <li>
     <a href="accommodation.html">
      <img src="images/imagesPop/4.jpg" alt="Old fashion house (in Lulworth village)">
      <span class="sdt_active"></span>
      <span class="sdt_wrap">
       <h4 class="menuHT"><span class="sdt_link">Accommodation</span></h4>
       <h6 class="menuHB"><span class="sdt_descr">Hotel, flats</span></h6>
      </span>
     </a>

    </li>
   </ul>

Answer 1

h3 - 与所有标题元素一样 - 是块级元素。另一方面span是内联元素。而且你不能把块元素放在内联元素中。请注意，验证程序不关心实际的display样式，而是关注h3是span的子项的事实。

修复它的方法是在这个地方不使用标题标签。无论如何，它们在语义上都是错误的！忽略语义的另一个选择是使.sdt_wrap成为div而不是span

for the lulz

Answer 2

你会有类似的东西：

<span>
    <h3 class="menuHT"><span class="sdt_link">Home</span></h3>
</span>

您需要移除<span>之外的<h3>而不是内部的<span class="sdt_wrap"> <h3 class="menuHT"><span class="sdt_link">Home</span></h3> <h6 class="menuHB"><span class="sdt_descr">Main page</span></h6> </span>。

猜测你有这个：

  <div class="sdt_wrap">
   <h3 class="menuHT"><span class="sdt_link">Home</span></h3>
   <h6 class="menuHB"><span class="sdt_descr">Main page</span></h6>
  </div>

将其替换为：

{{1}}

Answer 3

OP获得了消息＆＃34;元素范围的内容模型：来自W3C验证器的短语内容。＆＃34; ，这是一个HTML5错误，但上面的答案涉及到内联类中的块级元素问题会影响早期版本的HTML。

实际上可以将块级元素放在HTML5中的内联元素中，但前提是父元素的内容模型允许它们。在＆lt; span＆gt;的情况下这是措词内容，不包括标题等块级元素。

请参阅 3.2.4.1.5短语内容，以获取＆lt; span＆gt;内的允许元素列表在HTML5中 http://www.w3.org/html/wg/drafts/html/master/single-page.html#phrasing-content-1

另见这个帖子： Validation error: ul not allowed as child of element span

Answer 4

错误的含义是h3是span的孩子。检查span之外的h3，而不是{{1}}。否则，这段特殊的代码是好的和有效的

Answer 5

这是问题（其中一个实例），

<span class="sdt_wrap">
    <h3 class="menuHT"><span class="sdt_link">Home</span></h3>
    <h6 class="menuHB"><span class="sdt_descr">Main page</span></h6>
</span>

要解决此问题，您需要将.sdt_wrap设为<div>而不是<span>，或者将标题设为内嵌。理想情况下，第一个选择，

<div class="sdt_wrap">
    <h3 class="menuHT"><span class="sdt_link">Home</span></h3>
    <h6 class="menuHB"><span class="sdt_descr">Main page</span></h6>
</div>

<强>解释

在HTML中，您不允许在display:block;元素（如<h3>）中包含display:inline;元素（如<span>）。这是无效HTML的原因是在内联中有一个块元素是没有意义的。块元素通常会破坏页面流并转到新行，内联元素不会。

<span>内部<h>标签，验证错误</h> </span>

5 个答案: