3

有验证错误，不知道为什么会发生，有人可以帮我解决它吗？

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

<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>
4

5 回答 5

7

h3是 - 像所有标题元素一样 - 块级元素。span另一边是一个内联元素。而且您不能将块元素放在内联元素中。请注意，验证器并不关心实际样式，而是关心是 a 的子项display这一事实。h3span

修复它的方法是不在这个地方使用标题标签。无论如何，它们对于菜单来说在语义上是错误的！忽略语义的另一种选择是制作.sdt_wrapadiv而不是 aspan

对于 lulz

于 2013-03-03T12:43:36.803 回答
6

你会有类似的东西：

<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>
于 2013-03-03T12:40:22.757 回答
2

OP 收到消息“元素跨度的内容模型：短语内容”。来自 W3C 验证器，这是一个 HTML5 错误，但上面的答案涉及影响早期版本 HTML 的内联元素内的块级元素问题。

在 HTML5 中将块级元素放入内联元素中实际上是可以的，但前提是父元素的内容模型允许它们。在 <span> 的情况下，这是短语 content，它不包括标题等块级元素。

请参阅此处的3.2.4.1.5 短语内容以获取 HTML5 中 <span> 中允许的元素列表 http://www.w3.org/html/wg/drafts/html/master/single-page.html#phrasing-内容-1

另请参阅此线程： 验证错误：ul not allowed as child of element span

于 2015-01-05T15:56:20.803 回答
1

错误的意思是那h3是span. 检查您的span外部h3，而不是内部。否则，这段特定的代码是好的和有效的

于 2013-03-03T12:39:24.190 回答
1

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

<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_wrapa<div>而不是 a<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;元素 (like <h3>) 中包含display:inline;元素 (like <span>)。这是无效的 HTML 的原因是在内联中包含块元素是没有意义的。块元素通常会中断页面​​流并进入新行，而内联元素则不会。

于 2013-03-03T12:40:48.017 回答