介绍
HTML <button> 元素用于在网页上创建一个按钮，该按钮可用于执行某些操作。在本教程中，我们将学习如何使用 HTML 创建按钮。
注意：你可以在
index.html中练习编码，并学习如何在 Visual Studio Code 中编写 HTML。请点击右下角的 'Go Live' 以在端口 8080 上运行 Web 服务。然后，你可以刷新 Web 8080 标签以预览网页。
这是一个实验（Guided Lab），提供逐步指导来帮助你学习和实践。请仔细按照说明完成每个步骤，获得实际操作经验。根据历史数据，这是一个 初级 级别的实验，完成率为 86%。获得了学习者 100% 的好评率。
创建 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 样式。通过掌握按钮元素，你可以轻松创建按钮以在网页上执行操作。
