href 链接到页面中的某个部分不起作用，html答案

【问题标题】：href that links to a section within page not working, htmlhref 链接到页面中的某个部分不起作用，html
【发布时间】：2021-10-17 10:58:10
【问题描述】：

我正在制作一个带有链接到页面部分的列表的垂直导航栏，并且当我测试我创建的链接列表是否将我引导到其相应部分时，它似乎不起作用（我尝试单击“简要概述”链接，但它没有将我引导至“简要概述”部分？）我已经仔细检查过，似乎在section id 和a href 中没有发现任何问题或拼写错误。但我可能遗漏了一些东西，请帮我看看这是如何工作的。

<main id="main-doc">
  <div class="page-wrapper">
    <nav id="navbar">
      <header><h1>Python for Beginners</h2></header>
      <ul id="main-list">
        <li><a href="#Brief_Overview" class="nav-link">Brief Overview</a></li>
        <ul id="sub-list">
          <li><a href="#What-is-Python?" class="nav-link">What is Python?</a></li>
          <li><a href="#What-can-Python-do?" class="nav-link">What can Python do?</a></li>
           <li><a href="#Why-Python?" class="nav-link">Why Python?</a></li>
           <li><a href="#Python-compared-to-other-languages" class="nav-link">Python compared to other languages</a></li>
        </ul>  
      </ul>  
    </nav>  
  </div>  
  <section id="#Brief_Overview" class="main-section">
    <header><h2 class="Main-Header">Brief Overview</h2></header>
    <h3 class="Sub-Heading" id="#What-is-Python?">What is Python?</h3>
  </section>
  <section id="" class="main-section">
    <header><h2></h2></header>
  </section>
  
</main>

【问题讨论】：

请始终使用Markup Validator 来检查您自己是否有有效的标记。您的代码中存在多个问题：<ul> 不允许成为另一个 <ul> 标记的子级。缺少开始标签，缺少结束标签。 ID 在 HTML 中不以 # 开头。 ID attribute 不能为空。

标签： html css list href anchor

【解决方案1】：

将您的 <section> 标签更改为

<section id="Brief_Overview" class="main-section">

元素标识符不包含# 字符，它仅在通过href 定位它们或使用CSS 选择器 查询DOM 时使用。

【讨论】：