已保存 html 与浏览器中的输出不同

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 element 的源代码会产生以下代码：

    <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。但是在检查元素中，<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。这是标准不允许的事情，然后，每个导航器都会对这段代码做一些不同的事情，给你带来意想不到的结果。

您需要在必要时更改执行的代码。例如，如果你想要一个盒子里面有一个图像，并且所有的盒子都可以点击，使用来定义盒子。额外的 link 你需要在框外进行，因为你不能在另一个框内也有一个。

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

已保存 html 与浏览器中的输出不同

Saved html is not the same as it's output in the browser

html

php

wordpress

custom-wordpress-pages