当前位置: 首页 > article >正文

【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


http://www.kler.cn/a/287680.html

相关文章:

  • 「刘一哥GIS」系列专栏《GRASS GIS零基础入门实验教程(配套案例数据)》专栏上线了
  • 增广卡尔曼滤波AKF的要点分析
  • Redis集群部署详解:主从复制、Sentinel哨兵模式与Cluster集群的工作原理与配置
  • BIO、NIO、AIO
  • [操作系统] 深入理解约翰·冯·诺伊曼体系
  • electron 打包后的 exe 文件,运行后是空白窗口
  • 零域(微隔离)详述
  • docker4
  • ios 企业签名证书购买_iOS苹果企业签名须知
  • Spring源码浅析の循环依赖
  • 泰山派的小手机后续(2)
  • upload-labs通关攻略
  • Clickhouse集群化(四)使用clickhouse-operator部署clickhouse集群
  • vs中在工具箱添加自定义控件numberTextBox
  • 链表题总结
  • 使用MySql
  • [YM]课设-C#-WebApi-Vue-员工管理系统 (六)前后端交互
  • 二手电脑配置给你不一样的成就感之四
  • SQLite3 数据类型深入全面讲解
  • B3918 [语言月赛 202401] 图像变换
  • 力扣375.猜数字大小 II
  • AI时代,需要什么样的服务器操作系统?
  • 51单片机-定时器时钟
  • docker实战基础五(Dockerfile)
  • 2024年【电气试验】新版试题及电气试验证考试
  • 请解释Java中的装箱拆箱操作对性能的影响,并讨论其最佳实践。什么是Java中的值传递和引用传递?它们在函数调用中的表现有何不同?