Сохраненный 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 приводит к следующему коду:

    <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>, я дал им идентификаторы 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>.Я заменил DIVs на SPANS.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- Какие элементы разрешены внутри элемента? .