HTML Button 和 href 问题答案

【问题标题】：HTML Button and href prbolemHTML Button 和 href 问题
【发布时间】：2015-05-10 12:21:24
【问题描述】：

我已经创建了这个简单的 HTML 代码，但是每次我单击“推送”按钮时，它都会将我带到上述电影的链接。我不明白发生了什么，这让我很紧张。如果我更改按钮的位置，单击它将转到上述电影的链接。例如，如果我将此按钮放在 Platoon 电影下方，点击它将带我到 Platoon 电影页面，而我不希望此按钮执行任何操作。请帮帮我谢谢

<!DOCTYPE html>
    <html>
    <head>	
	   <title>Movies List</title>
    </head>
    <body>
     <h1>List of Movies</h1>
      <ol>
	    <li><a href="http://en.wikipedia.org/wiki/Jodorowsky%27s_Dune"></>Jodorowsky's Dune</li>
	    <li><a href="http://en.wikipedia.org/wiki/Platoon_(film)"></>Platoon</li>
	    <li><a href="http://en.wikipedia.org/wiki/Raging_Bull"></>Raging Bull</li>
	    <li><a href="http://en.wikipedia.org/wiki/Stay_(2005_film)"></>Stay</li>
	    <li><a href="http://en.wikipedia.org/wiki/The_Equalizer_(film)"></>The Equlizer</li>
      </ol>
      <button>push it</button>
    </body>
    </html>

【问题讨论】：

@bukko 那么为什么要放入 HREF？ - 如果没有 href，用户将如何导航到该页面？ href 不是问题，不关闭锚标签是问题。
...这就是为什么当我重新阅读问题时我删除了我的评论。
validator.w3.org 是你的朋友。
@bukko 注意细节很重要。
你有意见吗？

标签： javascript html button href

【解决方案1】：

发生这种情况是因为您没有关闭标签。删除电影名称前的</>，并在电影名称后添加</a>，这样做，标签只会影响电影名称，如果你不关闭标签，它将在它开始后链接所有内容（在你的情况下是按钮）。

【讨论】：

【解决方案2】：

您尚未关闭锚标记。锚标签使用</a> 而非</> 关闭。

示例：<a href="http://example.com/">Anchor Text</a>

  <ol>
    <li><a href="http://en.wikipedia.org/wiki/Jodorowsky%27s_Dune">Jodorowsky's Dune</a></li>
    <li><a href="http://en.wikipedia.org/wiki/Platoon_(film)">Platoon</a></li>
    <li><a href="http://en.wikipedia.org/wiki/Raging_Bull">Raging Bull</a></li>
    <li><a href="http://en.wikipedia.org/wiki/Stay_(2005_film)">Stay</a></li>
    <li><a href="http://en.wikipedia.org/wiki/The_Equalizer_(film)">The Equlizer</a></li> 
  </ol>

我希望这会有所帮助。编码愉快！

【讨论】：

【解决方案3】：

你应该关闭锚标记。

喜欢这个：

<li><a href="http://en.wikipedia.org/wiki/Jodorowsky%27s_Dune">Jodorowsky's Dune</a></li>

请看Demo

【讨论】：

【解决方案4】：

你忘记关闭你的“a”标签

<li><a href="http://en.wikipedia.org/wiki/Jodorowsky%27s_Dune"></>Jodorowsky's Dune</li>

改为：

<li><a href="http://en.wikipedia.org/wiki/Jodorowsky%27s_Dune">Jodorowsky's Dune</a></li>

【讨论】：