【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

相关推荐
你这个年龄怎么睡得着的3 分钟前
玩转vite性能优化
前端·vue.js·vite
YGY_Webgis糕手之路3 分钟前
OpenLayers 综合案例-热力图
前端·gis
小阿鑫6 分钟前
使用 Kiro AI IDE 3小时实现全栈应用Admin系统
前端·后端·python·admin·kiro·next admin·fastapi admin
华洛6 分钟前
Agent应用落地,必不可少的三大辅助系统
前端·javascript·vue.js
gnip7 分钟前
Vue3 的defineAsyncComponent不宜过度使用
前端
JarvanMo19 分钟前
Flutter 游戏开发:网上都查到了什么?
前端
前端小巷子26 分钟前
Vue 2 组件通信全景指南
前端·javascript·面试
江城开朗的豌豆27 分钟前
Vue的双向绑定已经能精确追踪变化,为什么还要用虚拟DOM?揭秘背后的性能哲学!
前端·javascript·vue.js
闲不住的李先森30 分钟前
使用 Ultracite 告别 ESLint 和 Prettier 的配置地狱
前端·代码规范
全栈技术负责人32 分钟前
前端静态资源优化
前端·性能优化·pdf