HTML 可点击按钮

HTMLHTMLBeginner
立即练习

💡 本教程由 AI 辅助翻译自英文原版。如需查看原文,您可以 切换至英文原版

介绍

HTML <button> 元素用于在网页上创建一个按钮,该按钮可用于执行某些操作。在本教程中,我们将学习如何使用 HTML 创建按钮。

注意:你可以在 index.html 中练习编码,并学习如何在 Visual Studio Code 中编写 HTML。请点击右下角的 'Go Live' 以在端口 8080 上运行 Web 服务。然后,你可以刷新 Web 8080 标签以预览网页。


Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL html(("`HTML`")) -.-> html/BasicStructureGroup(["`Basic Structure`"]) html(("`HTML`")) -.-> html/LayoutandSectioningGroup(["`Layout and Sectioning`"]) html(("`HTML`")) -.-> html/FormsandInputGroup(["`Forms and Input`"]) html(("`HTML`")) -.-> html/AdvancedElementsGroup(["`Advanced Elements`"]) html/BasicStructureGroup -.-> html/basic_elems("`Basic Elements`") html/BasicStructureGroup -.-> html/head_elems("`Head Elements`") html/BasicStructureGroup -.-> html/lang_decl("`Language Declaration`") html/LayoutandSectioningGroup -.-> html/layout("`Layout Elements`") html/FormsandInputGroup -.-> html/forms("`Form Elements`") html/AdvancedElementsGroup -.-> html/inter_elems("`Interactive and Dynamic Elements`") html/AdvancedElementsGroup -.-> html/custom_attr("`Custom Data Attributes`") subgraph Lab Skills html/basic_elems -.-> lab-70717{{"`HTML 可点击按钮`"}} html/head_elems -.-> lab-70717{{"`HTML 可点击按钮`"}} html/lang_decl -.-> lab-70717{{"`HTML 可点击按钮`"}} html/layout -.-> lab-70717{{"`HTML 可点击按钮`"}} html/forms -.-> lab-70717{{"`HTML 可点击按钮`"}} html/inter_elems -.-> lab-70717{{"`HTML 可点击按钮`"}} html/custom_attr -.-> lab-70717{{"`HTML 可点击按钮`"}} end

创建 HTML 文件

创建一个名为 index.html 的 HTML 文件。在这个文件中,我们将创建一个基本的 HTML 结构。

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Creating a Button in HTML</title>
  </head>
  <body></body>
</html>

创建一个按钮

要创建一个按钮,我们使用 HTML 的 <button> 元素。我们可以在按钮元素的开头和结束标签之间添加文本、图片或多媒体内容。

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Creating a Button in HTML</title>
  </head>
  <body>
    <button>Click Me!</button>
  </body>
</html>

添加 onclick 属性

我们可以为按钮元素添加一个 onclick 属性,以便在按钮被点击时执行一个 JavaScript 函数。

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Creating a Button in HTML</title>
  </head>
  <body>
    <button onclick="alert('Hello World!')">Click Me!</button>
  </body>
</html>

添加 CSS 样式

我们可以使用 CSS 根据需求为按钮添加样式。以下是一些基本的 CSS,用于更改按钮的文本颜色、背景颜色和内边距。

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Creating a Button in HTML</title>
    <style>
      button {
        background-color: #4caf50; /* Green */
        border: none;
        color: white;
        padding: 15px 32px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 16px;
        margin: 4px 2px;
        cursor: pointer;
      }
    </style>
  </head>
  <body>
    <button onclick="alert('Hello World!')">Click Me!</button>
  </body>
</html>

总结

在本教程中,我们学习了如何使用 HTML 创建一个按钮。我们还学习了如何为按钮元素添加 JavaScript 函数,并为按钮应用 CSS 样式。通过掌握按钮元素,你可以轻松创建按钮以在网页上执行操作。

您可能感兴趣的其他 HTML 教程