Question

我正在为我的个人网站定制Wordpress主题。目前，我正在尝试在主页上显示我最近的博客文章。 HTML是非常基本的，PHP仅提供数据。

这是直接来自文件的代码：

          <a id="test1" href="<?php the_permalink(); ?>">
             <li class="post-thumbnail">
              <div class="home-post-text">
              <div class="display-image" style="background-image:url(<?=get_the_post_thumbnail_url();?>);"></div>

                <div class="home-post-title"><span><?php the_title(); ?></span>
                  <div class="post-category-link">
                    <a id="test2" href="<?=get_category_link(get_the_category()[0]->term_id);?>">
                      <?php echo get_the_category()[0]->name;?>
                    </a>
                  </div>
                </div>
              </div>
            </li>
          </a>

但是当我转到网页时，它的表现很有趣。仔细查看来自inspect元素的源代码会产生以下代码：

    <a id="test1" href="http://localhost/2018/12/10/test-oped/"></a>
    <li class="post-thumbnail">
      <a id="test1" href="http://localhost/2018/12/10/test-oped/"></a>
      <div class="home-post-text">
            <a id="test1" href="http://localhost/2018/12/10/test-oped/">
            <div class="display-image" style="background-image:url(http://localhost/wp-content/uploads/2018/12/board-chalk-chalkboard-459793.jpg);"></div>
            </a><div class="home-post-title"><a id="test1" href="http://localhost/2018/12/10/test-oped/"><span>test oped</span>
              </a><div class="post-category-link"><a id="test1" href="http://localhost/2018/12/10/test-oped/">
                </a><a id="test2" href="http://localhost/category/papers/">
                  Papers                    
        </a>
              </div>
            </div>
          </div>
        </li>

在原始源代码中，只有两个<a>标签，我分别给了它们id为test1和test2。但是在inspect元素中，<a>标签是链接的多个标签和几个结束标签。

我无法确定为什么会这样。有人有什么想法吗？

预先感谢所有帮助。

更新

如果我删除了此代码，则代码可以正常运行：

             <div class="post-category-link">
                <a id="test2" href="<?=get_category_link(get_the_category()[0]->term_id);?>">
                  <?php echo get_the_category()[0]->name;?>
                </a>
              </div>

我已将问题缩小到

<a id="test2" href="<?=get_category_link(get_the_category()[0]->term_id);?>">
  <?php echo get_the_category()[0]->name;?>
</a>

PHP并不是问题，因为如果我用普通的<a href="#">testing</a>替换上面的片段，问题仍然存在。

答案和最终结果 因此，<div>不能放在<a>内，而另一个<a>不能嵌套在<a>内。我用SPANS取代了DIV。 CSS无处不在，但是总之，我给出了特定的跨度display:block和其他的display:inline。这是有效的最终HTML结构。

<li class="post-thumbnail">
  <span class="display-upper">
    <a href="<?php the_permalink(); ?>">
        <span class="display-image" style="background-image:url(<?=get_the_post_thumbnail_url();?>);"></span>
        <span class="home-post-title"><span><?php the_title(); ?></span></span>
    </a>
  </span>
  <span class="post-thumbnail-cat">
    <a href="<?php echo get_category_link(get_the_category()[0]->term_id);?>">
      <span><?php echo get_the_category()[0]->name;?></span>
    </a>
  </span>
</li>

Answer 1

正如我在您的代码上所读到的，您有一个A，然后是一个DIV。这是标准所不允许的，然后，每个导航器都会对这段代码执行不同的操作，从而给您带来意想不到的结果。

您需要在需要时更改代码以执行。例如，如果您想要一个带有图像的盒子，并且所有盒子都是可单击的，请使用定义盒子。您需要在框外进行操作的附加链接，因为您也不能在另一个链接中包含。

如果您需要有关中允许使用的标签的更多信息，请检查 XHTML - What elements are allowed within the element?。

保存的HTML与在浏览器中输出的HTML不同

1 个答案: