以下是一个简单的 HTML 小项目,展示一个包含标题、按钮和点击按钮后弹出提示框的基本页面
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Simple HTML Project</title> <style> body { font-family: Arial, sans-serif; text-align: center; } button { padding: 10px 20px; background-color: #007bff; color: white; border: none; cursor: pointer; } </style> </head> <body> <h1>Welcome to My Simple HTML Project</h1> <button id="myButton">Click Me!</button> <script> const button = document.getElementById('myButton'); button.addEventListener('click', () => { alert('You clicked the button!'); }); </script> </body> </html>
复制
想要运行上述代码,可以直接拖到浏览器里,但是为了实时地查看我们修改后的样式,可以使用 vscode 安装插件, Live Server
Live Server