HTML 元素不在源代码中显示在 DOM 中？

Question

我是网络开发新手，正在创建一个简单的 HTML/CSS 个人网站，但遇到了一个令人沮丧的错误。一个不在我的源代码中的额外元素在 DOM 中出现了 3 次。

我的源代码中的标题如下所示（大屏幕显示图标，小屏幕显示文本链接）：

  <header>
    <div class="icons">
      <span><img src="assets/profile.svg"></span>
      <span><a href="index.html"><img src="assets/aboutme1.svg"></a></span>
      <span><a href="writings.html"><img src="assets/writings1.svg"></a></span>          
      <span><img src="assets/resume2.svg"></span>
      <span><a href="links.html"><img src="assets/links1.svg"></span>
    </div>
    <div class="textlinks">
      <a href="index.html">about me</a>
      <a href="writings.html">writing samples</a>
      <a href="#"><i>résumé</i></a>
      <a href="links.html">links</a>
    </div>
  </header>

但 DOM 检查器显示以下内容（箭头指向神秘来源的元素）：

  <header>
    <div class="icons">
      <span>...</span>
      <span>...</span>
      <span>...</span>
      <span>...</span>
      <span>...</span>
      <a href="links.html"></a>     <---
    </div>
    <a href="links.html"></a>       <---
    <div class="textlinks">
      <a href="links.html"></a>     <---
      <a href="index.html">about me</a>
      <a href="writings.html">writing samples</a>
      <a href="#"><i>résumé</i></a>
      <a href="links.html">links</a>
    </div>
  </header>

这些额外的链接元素可能是什么原因造成的？它们只显示在四个子页面之一上，即使其他三个具有相同的源 HTML/CSS。没有Javascript。这会弄乱较小屏幕的页面格式。

Answer 1

在这一行：

<span><a href="links.html"><img src="assets/links1.svg"></span>

你有一个未关闭的<a>。