【html】新建一个html并且在浏览器运行

news2024/9/22 5:33:27

以下是一个简单的 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.coloradmin.cn/o/2098798.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

视频提取字幕的软件有哪些?高效转录用这些

探索视频的奥秘&#xff0c;从字幕开始&#xff01;你是否曾被繁复的字幕处理困扰&#xff0c;渴望有一款简单好用的在线免费软件来轻松解锁字幕提取&#xff1f; 告别手动输入的烦恼&#xff0c;我们为你精选了6款视频字幕提取在线免费软件&#xff0c;它们不仅能一键转录&am…

新手常见错误:Unable to find a @SpringBootConfiguration

目录 报错信息 &#xff1a; 1. 使用SpringBootTest注解 2. 使用ContextConfiguration注解 3. 检查包结构和注解&#xff08;一般都是这问题&#xff09; 4. 清理和重建项目 5. 检查依赖 报错信息 &#xff1a; Unable to find a SpringBootConfiguration, you need to use C…

pdf转word怎么转换?2024快速进行文件格式转换的几款软件

pdf转word怎么转换&#xff1f;2024快速进行文件格式转换的几款软件 将PDF文件转换为Word文档是日常工作中常见的需求&#xff0c;尤其是当你需要编辑或重新利用PDF中的内容时。市面上有许多软件可以帮助你轻松完成PDF转Word的任务&#xff0c;以下是五款值得推荐的软件&#…

WordPress 资源展示型下载类主题 CeoMax-Pro_v7.6 开心版

WordPress 资源展示型下载类主题 CeoMax-Pro_v7.6 开心版&#xff1b; CeoMax-Pro是一款极致美观强大的WordPress付费资源下载主题&#xff0c;它能满足您所有付费资源下载的业务需求&#xff01; 你的想法与业务不能被主题所限制&#xff01;CeoMax-Pro强大的功能&#xff0…

Spring Security 认证源码超详细分析

Spring Security 认证源码超详细分析 认证&#xff08;Authentication&#xff09;是系统确认用户信息的重要途径&#xff0c;用户通过认证之后&#xff0c;系统才能明确用户的身份&#xff0c;进而才可以为该用户分配一定的权限&#xff0c;这个过程也叫授权&#xff08;Auth…

智慧理财新纪元:蚂蚁集团“支小宝”智能理财助理深度体验与测评

2023年9月8日&#xff0c;蚂蚁集团宣布推出面向消费者的智能金融助理“支小宝2.0”&#xff0c;这是该公司首个基于金融大模型的应用产品。该产品在语言力、知识力、专业力和安全力方面展现出卓越性能&#xff0c;旨在为用户提供包括行情分析、持仓诊断、资产配置和投资教育陪伴…

MS SQL Server partition by 函数实战三 成绩排名

目录 需求 范例运行环境 视图样本设计 功能实现 基础数据展示 SQL语句 继续排序 小结 需求 假设有若干已更新考试成绩的考生&#xff0c;考试成绩包括总成绩、分项成绩1、分项成绩2&#xff0c;其它信息包括应聘岗位名称、姓名等信息。现希望根据总成绩计算排名&#…

C语言代码练习(第十一天)

今日练习&#xff1a; 25、用指针方法对10个整数按由大到小顺序排序 26、有一个班&#xff0c;3个学生&#xff0c;各学习4门课&#xff0c;计算总平均分数以及第 n 个学生的成绩 27、有一个3 * 4的二维数组&#xff0c;要求用指向元素的指针变量输出二维数组个元素的值。 用指…

mar3d模型文件问题

上一章使用mars3D模型库 遗留一个问题 部分资源不完整 如果模型没有其他依赖文件会正常加载 若有其他依赖就会报错 正常获取到的 缺少文件的 经过观察在gltf文件中发现缺失的是这几个文件 还是通过脚本下载 脚本实例 const fs require(fs); const path require(path); co…

Idea中修改Jsp文件的头部注释模版

文章目录 方法1&#xff0c;启动idea&#xff0c;单击“file”&#xff0c;选择“settings”2&#xff0c;选择Editor——File and Code Templates——other——Jsp files——jsp File.jsp。此时编辑如下图所示的右上区域即可修改模板。 每天学一个小技巧 方法 1&#xff0c;启…

FL Studio 24汉化破解版 v24.4.1.4285(附汉化破解补丁)

FL Studio 24.4.1.4285(汉化破解版是一款无比专业的音乐制作软件&#xff0c;它无论是在功能上还是用户界面都是在业内数一数二的。就拿它的用户界面来说&#xff0c;是目前同类软件中唯一做到100%矢量化&#xff0c;这样能更好地用在4K&#xff0c;5K甚至8K显示器上&#xff0…

力扣面试经典算法150题:Z 字形变换

Z 字形变换 今天的题目是力扣面试经典150题中的数组的中等难度题&#xff1a; Z 字形变换。 题目链接&#xff1a;https://leetcode.cn/problems/zigzag-conversion/description/?envTypestudy-plan-v2&envIdtop-interview-150 题目描述 将一个给定字符串 s 根据给定的行…

Jmeter 的 jar 包开发环境搭建

01 JDK环境变量配置 JAVA_HOMEE:\Program Files\Java\jdk1.8.0_102 Path%JAVA_HOME%\bin; CLASSPATH.;%JAVA_HOME%\lib\dt.jar;.;%JAVA_HOME%\lib\tools.jar 验证环境变量有没有生效&#xff1a;看到如下信息说明 JDK 环境变量已经生效 02 配置 maven 环境 1、下载地址&…

js中数组的定义及使用

数组的定义 Array 存储按位存储&#xff0c;紧密结构,在数组中查找元素&#xff0c;就必须要遍历数组&#xff0c;查找速度慢。 优点可以根据当前元素找到前一个或者后一个元素&#xff0c;可以排序 数组引用对象的是强引用&#xff0c;存储的是她的引用地址 length属性可读可…

TF | SD 卡出现无法删除的文件,乱码文件该如何处理 macOS

TF | SD 卡出现无法删除的文件&#xff0c;乱码文件该如何处理 macOS 一、问题描述 最近手头有张用在 Miyoo 掌机上的游戏 TF 卡&#xff0c;在macOS 系统下在回收站中出现了几个特殊文件名的文件&#xff0c;始终无法删除。 二、试着解决 我试过了网上的所有方法都无法删除…

rv1126-rv1109-mkcramfs-mkfs.cramfs-打包文件系统

事情是这样的: 定制了文件系统打包功能;然后我是根据这个指令 fakeroot mkfs.cramfs rootfs_glibc_rv1126/ rootfs.img mkfs.cramfs rootfs_glibc_rv1126/ rootfs.img 起因就是这个fakeroot; 不加的话打出来的rootfs.img是没有用户权限的 然后我根据fakeroot mkfs.cramfs ro…

米壳AI:跨境电商日本市场必备神器!

各位跨境电商小伙伴们&#xff0c;在开拓日本市场的过程中&#xff0c;产品图片的翻译问题是不是常常让你感到困扰呢&#xff1f; 别着急&#xff0c;今天就给大家推荐一个超棒的在线翻译工具--米壳AI&#xff0c;它必将成为你跨境之路上的得力助手&#xff0c;让你如虎添翼。…

网络-多路io

了 fcntl 函数来操作文件描述符的状态标志&#xff0c;其中主要是为了设置非阻塞模式。下面是对 fcntl 函数及其参数的详细解释&#xff1a; fcntl 函数 fcntl 是一个用于操作文件描述符的系统调用&#xff0c;可以用来设置或获取文件描述符的各种属性。其原型如下&#xff1…

Django学习实战篇二(适合略有基础的新手小白学习)(从0开发项目)

前言&#xff1a; 从这一章开始&#xff0c;我们来创建项目typeidea&#xff0c;我把它放到了GitHub上。强烈建议你也到GitHub上注册一个账号&#xff08;如果没有的话&#xff09;&#xff0c;然后创建这样的项目。当然&#xff0c;你也可以起一个属于自己的名称。这个项目就是…

tensorrt plugin

自定义plugin 流程 首先明确要开发的算子&#xff0c;最好是 CUDA 实现&#xff1b;继承 IPluginV2DynamicExt / IPluginV2IOExt类实现一个Plugin 类&#xff0c;在这里调用前面实现的算子&#xff1b;继承 IPluginCreator 类实现一个 PluginCreator 类&#xff0c;用于创建插…