当前位置: 首页 > 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

相关文章:

  • 计算机编程中的设计模式及其在简化复杂系统设计中的应用
  • 鸿蒙实战:页面跳转
  • 【C++笔记】C++三大特性之多态
  • 【Oracle篇】掌握SQL Tuning Advisor优化工具:从工具使用到SQL优化的全方位指南(第六篇,总共七篇)
  • 【日常记录-Git】git log
  • L11.【LeetCode笔记】有效的括号
  • 零域(微隔离)详述
  • 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中的值传递和引用传递?它们在函数调用中的表现有何不同?