【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

相关推荐
用户059540174464 分钟前
Redis持久化踩坑实录:这个数据丢失Bug让我排查了6小时
前端·css
用户2136610035726 分钟前
VueRouter进阶-动态路由与嵌套路由
前端·vue.js
梯度不陡8 分钟前
Signal #17:Agent 开始进入组织系统
前端·javascript
何智超11 分钟前
AI 微前端性能优化之旅(上):复盘
前端·vibecoding
许我半盏清茶13 分钟前
前端路由:理解 hash 路由和 history 路由原理
前端·react.js
胡萝卜术20 分钟前
从暴力到Z字形消元:力扣240「搜索二维矩阵II」的降维打击之路
前端·javascript·面试
比老马还六24 分钟前
Bipes-Blockly项目二次开发/Coze智能体(十)
前端·嵌入式
26 分钟前
Vue 3 组件封装与使用:保姆级教程
前端
星辰30 分钟前
深入浅出 Android AOA 协议:通信流程与设备切换附着机制解析
前端
恋猫de小郭1 小时前
Amper 正式转正 Kotlin Toolchain ,Gradle 未来何去何从
android·前端·flutter