在 HTML 按钮中创建链接

Sushant Poudel 2023年2月19日 2021年10月30日
  1. 使用 <a><button> 标签创建一个按钮,作为 HTML 中的链接
  2. 使用 button 标签中的 onclick 属性创建一个按钮,作为 HTML 中的链接
  3. 使用 <a><input> 标签创建一个按钮,作为 HTML 中的链接
  4. 在 HTML 中使用 HTML 表单创建充当链接的按钮
在 HTML 按钮中创建链接

我们将说明创建用作链接的 HTML 按钮的方法。

使用 <a><button> 标签创建一个按钮,作为 HTML 中的链接

我们可以使用 <button> 标签创建一个 HTML 按钮。<button> 标签定义了一个可点击的按钮。我们使用锚标签 <a> 来创建一个超链接。它将一个页面链接到另一个页面。我们可以通过在锚标记中嵌套 <button> 标记来创建一个充当链接的按钮。我们可以通过 href 属性指定链接的地址。

例如,在 HTML 正文中创建一个锚元素。在锚元素内,写入 href 属性并指定 URL https://www.youtube.com。之后,使用 <button> 标签创建按钮。在 <button> 标签内,写入文本 Youtube。现在,关闭按钮标签,然后是锚标签。

下面的示例显示了作为链接的 HTML 按钮的创建过程。它将创建一个将重定向到 Youtube 的按钮。

示例代码:

<a href="https://www.youtube.com">
<button>Youtube</button>
</a> 

使用 button 标签中的 onclick 属性创建一个按钮,作为 HTML 中的链接

我们还可以使用按钮标签内的 onclick 属性来创建一个按钮,作为 HTML 中的链接。此属性在元素上单击鼠标时触发。单击鼠标时脚本运行。但是,在这个过程中,我们首先创建按钮,然后只添加我们想要的 URL。我们还将在此方法中使用一点 JavaScript。我们将使用 window.location 对象获取当前页面地址并将其重定向到新页面。

例如,在 HTML 正文中,首先创建一个 <button> 标签。在按钮标签内,使用 onclick 属性并将其设置为 window.location.href。接下来,使用 window.location.href 指定目标 URL https://www.facebook.com/。然后,在 <button> 标签之间写入文本 Facebook

我们使用了 onclick 属性,它是 HTML 中事件属性的一部分。通过这种方式,我们可以创建一个充当链接的 HTML 按钮。

示例代码:

<button onclick="window.location.href='https://www.facebook.com/'">Facebook</button>

使用 <a><input> 标签创建一个按钮,作为 HTML 中的链接

我们可以使用 <input> 标签来创建一个 HTML 按钮。<input> 标签也是一个 <form> 标签元素。它指定了一个输入字段,用户可以在其中输入数据。我们可以使用 type 属性创建一个按钮,并使用值 button 指定它。我们可以使用 value 属性来编写按钮的内容。然后,我们可以使用锚标记来包装 <input> 标记。然后,作为链接的按钮就形成了。

例如,编写一个锚标记,通过 href 属性在其中指定目标 URL。将 URL 写为 https://www.facebook.com/。然后,编写 <input> 标记并将其 type 属性指定为 button。然后,在 value 属性中指定文本 Facebook。关闭锚标记。

下面的示例创建了一个名为 Facebook 的按钮。单击时它会重定向到 Facebook。因此,我们可以创建一个充当链接的按钮。

示例代码:

<a href="https://www.facebook.com/">
<input type="button" value="Facebook">
</a>

在 HTML 中使用 HTML 表单创建充当链接的按钮

在这个方法中,我们将使用 <form> 标签来创建一个作为链接的按钮。我们使用 action 属性来指定目标 URL。method 属性指示如何发送表单数据。表单被传送到在 action 属性中指定的页面。我们可以在提交表单数据时将按钮 type 设置为 submit

例如,在 HTML 正文中,创建 <form> 标记并使用 get 作为 method 属性。现在,在 action 属性中指定所需的 URL。然后,使用 <button> 元素创建按钮并将 type 属性设置为 submit。然后,在按钮上指定所需的文本。然后,关闭 <button> 标签,然后是 <form> 标签。然后,关闭上面打开的所有剩余标签。

示例代码:

<form method="get" action="https://www.youtube.com/">
<button type="submit">Continue</button>
</form>
Sushant Poudel avatar Sushant Poudel avatar

Sushant is a software engineering student and a tech enthusiast. He finds joy in writing blogs on programming and imparting his knowledge to the community.

LinkedIn

相关文章 - HTML Button