【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

相关推荐
一点一木38 分钟前
深度体验TRAE SOLO移动端7天:作为独立开发者,我把工作流揣进了兜里
前端·人工智能·trae
天外飞雨道沧桑1 小时前
TypeScript 中 omit 和 record 用法
前端·javascript·typescript
Lee川2 小时前
mini-cursor 揭秘:从 Tool 定义到 Agent 循环的完整实现
前端·人工智能·后端
canonical_entropy2 小时前
从 Spec-Driven Development 到 Attractor-Guided Engineering
前端·aigc·ai编程
研☆香2 小时前
聊聊前端页面的三种长度单位
前端
给钱,谢谢!3 小时前
React + PixiJS 实现果园成长页:从状态机到浇水动画
前端·react.js·前端框架
暗冰ཏོ4 小时前
VUE面试题大全
前端·javascript·vue.js·面试
次元工程师!4 小时前
LangFlow开发(三)—Bundles组件架构设计(3W+字详细讲解)
java·前端·python·低代码·langflow
Bug-制造者5 小时前
现代Web应用全栈开发:从架构设计到部署落地实战
前端
青春喂了后端5 小时前
IntelliGit 前端状态层重构:把一个全局 Store 拆成清晰的状态边界
前端·重构·状态模式