【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

相关推荐
我有一个object5 分钟前
uniapp上传文件报错:targetSdkVersion设置>=29后在Android10+系统设备不支持当前路径。请更改为应用运行路径!
前端·javascript·vue.js·uniapp
北极糊的狐10 分钟前
关于jQuery 事件绑定,记录常用事件类型及核心注意事项
前端·javascript·jquery
_Kayo_16 分钟前
vue3 computed 练习笔记
前端·vue.js·笔记
CodeSheep19 分钟前
VS 2026 正式发布,王炸!
前端·后端·程序员
无奈何杨20 分钟前
CoolGuard事件查询增加策略和规则筛选,条件结果展示
前端·后端
梦里不知身是客1123 分钟前
正则表达式常见的介绍
前端·javascript·正则表达式
小小测试开发39 分钟前
JMeter XPath提取器用法详解:XML/HTML响应数据提取神器
xml·jmeter·html
初学小白...40 分钟前
HTML知识点
前端·javascript·html
鹏多多42 分钟前
flutter睡眠与冥想数据可视化神器:sleep_stage_chart插件全解析
android·前端·flutter
艾小码1 小时前
Vue3 脚本革命:<script setup> 让你的代码简洁到飞起!
前端·javascript·vue.js