FreeCodeCamp产品着陆页：nav-link链接要求及HTML错误排查求助

代码核心错误及修复方法 #

1. HTML标签语法错误（未闭合/格式错误） #

你的代码里多个标签存在语法问题，导致浏览器无法正常解析：

• <img>标签：末尾多余空格且未正确闭合，同时alt属性建议添加有意义的文本，修复后：

  <img id="header-img" src="https://cdn.freecodecamp.org/testable-projects-fcc/images/product-landing-page-logo.png" alt="产品着陆页logo" />
  

• <nav>标签：开头未闭合，修复后：

  <nav id="nav-bar">
  

• <video>标签：未闭合，且YouTube的youtu.be链接不能直接作为video的src（需要视频文件直链），建议改用iframe嵌入视频：

  <iframe id="video" src="https://www.youtube.com/embed/y8Yv4pnO7qc" frameborder="0" allowfullscreen></iframe>
  

• <form>标签：未闭合，且表单控件必须放在<form>内部才能正常提交，修复后结构：

  <form id="form" action="https://www.freecodecamp.com/email-submit">
    <input id="email" name="email" placeholder="Enter your email address" type="email" required />
    <input id="submit" type="submit" value="Get Started" />
  </form>
  

• <input>和<button>标签：未闭合，且重复使用id="submit"（ID必须唯一），建议删除多余的<button>标签，给提交按钮添加value属性设置显示文本。

2. 缺少锚点目标元素 #

你的.nav-link设置了href="#Features"、href="#How-It-Works"、href="#Pricing"，但页面中没有对应id的元素，需要添加这些锚点容器，示例：

<section id="Features">
  <h2>Features</h2>
  <!-- 填充Features板块内容 -->
</section>

<section id="How-It-Works">
  <h2>How It Works</h2>
  <!-- 填充How It Works板块内容 -->
</section>

<section id="Pricing">
  <h2>Pricing</h2>
  <!-- 填充Pricing板块内容 -->
</section>

3. 其他细节修复 #

页面缺少<main>标签的开头（原代码只有</main>结尾），需要在<header>后添加<main>标签。

修复后的完整代码示例 #

<link rel="stylesheet" href="styles.css">

<header id="header">
  <img id="header-img" src="https://cdn.freecodecamp.org/testable-projects-fcc/images/product-landing-page-logo.png" alt="产品着陆页logo" />
  
  <nav id="nav-bar">
    <li><a class="nav-link" href="#Features">Features</a></li>
    <li><a class="nav-link" href="#How-It-Works">How It Works</a></li>
    <li><a class="nav-link" href="#Pricing">Pricing</a></li>
  </nav>
</header>

<main>
  <iframe id="video" src="https://www.youtube.com/embed/y8Yv4pnO7qc" frameborder="0" allowfullscreen></iframe>
  
  <form id="form" action="https://www.freecodecamp.com/email-submit">
    <input id="email" name="email" placeholder="Enter your email address" type="email" required />
    <input id="submit" type="submit" value="Get Started" />
  </form>

  <section id="Features">
    <h2>Features</h2>
    <!-- 填充Features内容 -->
  </section>

  <section id="How-It-Works">
    <h2>How It Works</h2>
    <!-- 填充How It Works内容 -->
  </section>

  <section id="Pricing">
    <h2>Pricing</h2>
    <!-- 填充Pricing内容 -->
  </section>
</main>

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