【html】新建一个html并且在浏览器运行

以下是一个简单的 HTML 小项目,展示一个包含标题、按钮和点击按钮后弹出提示框的基本页面

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

相关推荐
徐同保19 小时前
为什么修改 .gitignore 后还能提交
前端
一只小bit19 小时前
Qt 常用控件详解:按钮类 / 显示类 / 输入类属性、信号与实战示例
前端·c++·qt·gui
Mr -老鬼19 小时前
前端静态路由与动态路由:全维度总结与实践指南
前端
颜酱20 小时前
前端必备动态规划的10道经典题目
前端·后端·算法
wen__xvn20 小时前
代码随想录算法训练营DAY10第五章 栈与队列part01
java·前端·算法
大怪v21 小时前
前端佬们!!AI大势已来,未来的上限取决你的独特气质!恭请批阅!!
前端·程序员·ai编程
Mr -老鬼21 小时前
功能需求对前后端技术选型的横向建议
开发语言·前端·后端·前端框架
qq_4061761421 小时前
关于JavaScript中的filter方法
开发语言·前端·javascript·ajax·原型模式
@@小旭21 小时前
实现头部Sticky 粘性布局,并且点击菜单滑动到相应位置
前端·javascript·css
Eric_见嘉1 天前
NestJS 🧑‍🍳 厨子必修课(九):API 文档 Swagger
前端·后端·nestjs