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

【问题标题】：Saved html is not the same as it's output in the browser保存的 html 与浏览器中的输出不同
【发布时间】：2018-12-10 20:32:22
【问题描述】：

我正在为我的个人网站开发自定义 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>

但是当我进入网页时，它的行为很有趣。仔细查看检查元素的源代码会产生以下代码：

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

【问题讨论】：

HTML 不正确。您不能在 A 中包含 DIV。这就是您的资源管理器关闭 A 的原因。
还有更多 - 你不能在 <a> 中拥有 <a>。
@SakuraKinomoto 如果没有中的 DIV，我将如何获得我想要的结果？我的目标是创建可以在任何地方单击的缩略图。此链接显示最终结果（大致）：pasteboard.co/HR8kaZ4.png
@u_mulder 如果我希望我的缩略图（每个都在一个
标签内）可以在任何地方点击（不仅是文本，还有背景）并且有一个单独的链接可以去其他地方，在这种情况下，帖子所在的类别，我该怎么做？