添加HTML figure元素后页面异常，请求技术帮助

你的代码里存在明显的HTML语法错误：<figure class="recipe__fig">标签末尾和</figure>标签开头多了多余的反引号（`），这会导致浏览器无法正确解析页面结构，进而引发页面异常。

修正后的代码： #

<div class="recipe">
  <div class="message">
    <div>
      <svg>
        <use href="src/img/icons.svg#icon-smile"></use>
      </svg>
    </div>
    <p>Start by searching for a recipe or an ingredient. Have fun!</p>
  </div>

  <figure class="recipe__fig">
    <img src="src/img/test-1.jpg" alt="Tomato" class="recipe__img" />
    <h1 class="recipe__title">
      <span>Pasta with tomato cream sauce</span>
    </h1>
  </figure>

 <div class="recipe__details">
    <div class="recipe__info">
      <svg class="recipe__info-icon">
        <use href="src/img/icons.svg#icon-clock"></use>
      </svg>
      <span class="recipe__info-data recipe__info-data--minutes">45</span>
      <span class="recipe__info-text">minutes</span>
    </div>
    <div class="recipe__info">
      <svg class="recipe__info-icon">
        <use href="src/img/icons.svg#icon-users"></use>
      </svg>
      <span class="recipe__info-data recipe__info-data--people">4</span>
      <span class="recipe__info-text">servings</span>

      <div class="recipe__info-buttons">
        <button class="btn--tiny btn--increase-servings">
          <svg>
            <use href="src/img/icons.svg#icon-minus-circle"></use>
          </svg>
        </button>
        <button class="btn--tiny btn--increase-servings">
          <svg>
            <use href="src/img/icons.svg#icon-plus-circle"></use>
          </svg>
        </button>
      </div>
    </div>
</div>

原因说明： #

HTML对语法结构要求严格，未转义的反引号不属于合法的标签语法内容，浏览器会将这些反引号视为错误的文本节点，打乱原本的DOM层级结构，导致后续元素无法正常渲染。移除这两个多余的反引号后，浏览器就能正确解析figure元素及其内部的img、h1等内容，页面即可恢复正常。

内容的提问来源于stack exchange，提问作者kafka007