【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 分钟前
深入 Actix-web 源码:解密 Rust Web 框架的高性能内核
开发语言·前端·rust·actixweb
小白的码BUG之路4 分钟前
Vue3 -- 响应式 ref和 reactive
前端·javascript·vue.js
Onion10 分钟前
Vue2日历组件-仿企微日程日历
前端·javascript·vue.js
用户842981424181011 分钟前
js中如何隐藏eval关键字?
前端·javascript·后端
chxii13 分钟前
前端与Node.js
前端·node.js
zmirror15 分钟前
React-Router v6 useNavigate 非组件不生效
前端
红树林0734 分钟前
BeautifulSoup 的页面中需要获取某个元素的 xpath 路径
前端·python·网络爬虫·beautifulsoup
三小河1 小时前
教你发布一个npm的组织包
前端
青椒a1 小时前
002.nestjs后台管理项目-数据库之prisma(上)
前端
米诺zuo1 小时前
react 中的useContext和Provider实践
前端·react.js