【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.rhkb.cn/news/421021.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

K8s的Pv和Pvc就是为了pod数据持久化

一、 1.pv&#xff08;persistent volume&#xff09;&#xff1a;是k8s虚拟化的存储资源&#xff0c;实际上就是存储&#xff0c;列如本地的硬盘、网络文件系统&#xff08;Nfs&#xff09;、lvm、RAID、云存储。 2.pvc&#xff1a;pod对存储资源的请求&#xff0c;定义了需…

Linux基础3-基础工具1(什么是工具,yum,vim基础)

目录 一.什么是工具 二.yum 2.1 yum基础 2.2 yum拓展 2.3 rzsz 三.vim基础 四.下章内容 1. vim 插入模式&#xff0c;底行模式&#xff0c;命令模式下详解。vim基础配置 2. gcc/g 基础 一.什么是工具 工具的本质是也是指令。通过工具我们能快速的实现某些功能 二.yum 2.1…

服装|基于Java+vue的服装定制系统(源码+数据库+文档)

服装定制系统 目录 基于Javavue的服装定制系统 一、前言 二、系统设计 三、系统功能设计 系统功能实现 管理员功能模块 四、数据库设计 五、核心代码 六、论文参考 七、最新计算机毕设选题推荐 八、源码获取&#xff1a; 博主介绍&#xff1a;✌️大厂码农|毕设布…

SONIC系统(1)编译与构建

1、环境 准备一个linux环境&#xff0c;我这里使用ubuntu20.04 安装所需依赖 sudo apt-get update sudo apt-get install -y build-essential fakeroot debhelper \autotools-dev quilt libssl-dev libncurses5-dev \python3-pip python3-setuptools python3-wheel python3-…

Vue3+TypeScript二次封装axios

安装如下 npm install axios 第一步&#xff1a;创建config配置文件&#xff0c;用于存放请求后端的ip地址&#xff0c;用于后期打包后便于修改ip地址。 注&#xff1a;typescript要求参数要有类型。&#xff08;ES6 定义对象 属性 类型 修改的是属性的值&#xff09; inte…

Java+vue的医药进出口交易系统(源码+数据库+文档)

外贸系统|医药进出口交易系统 目录 基于Javavue的服装定制系统 一、前言 二、系统设计 三、系统功能设计 仓储部门功能模块 四、数据库设计 五、核心代码 六、论文参考 七、最新计算机毕设选题推荐 八、源码获取&#xff1a; 博主介绍&#xff1a;✌️大厂码农|毕设…

解锁生活密码,AI答案之书解决复杂难题

本文由 ChatMoney团队出品 介绍说明 “答案之书智能体”是您贴心的智慧伙伴&#xff0c;随时准备为您解答生活中的种种困惑。无论您在工作中遭遇瓶颈&#xff0c;还是在情感世界里迷失方向&#xff0c;亦或是对个人成长感到迷茫&#xff0c;它都能倾听您的心声&#xff0c;并给…

大数据Flink(一百一十六):Flink SQL的时间属性

文章目录 Flink SQL的时间属性 一、Flink 三种时间属性简介 二、Flink 三种时间属性的应用场景 三、​​​​​​​SQL 指定时间属性的两种方式 四、​​​​​​​​​​​​​​SQL 处理时间DDL定义 五、​​​​​​​​​​​​​​SQL 事件时间DDL定义 Flink SQL的时…

深入理解Java虚拟机:Jvm总结-垃圾收集器与内存分配策略

第三章 垃圾收集器与内存分配策略 3.1 意义 Java堆和方法区具有不确定性&#xff1a;一个接口的多个实现类、一个方法的不同条件分支需要的内存可能不一样。程序运行起来才知道到底会创建什么对象&#xff0c;创建多少个对象。动态分配内存和垃圾回收排查内存泄漏和内存溢出时…

javascript柯里化

return a b c d; } //通常调用方式 var sum add(1, 2, 3, 4); //柯里化的调用方式 var curryAdd Curry(add); var sum curryAdd(1)(2)(3)(4); //或者很多奇怪的方式调用 var sum curryAdd(1, 2)(3, 4); var sum curryAdd(1, 2, 3)(4); var sum curryAdd(1)(…

5.第二阶段x86游戏实战2-认识内存

免责声明&#xff1a;内容仅供学习参考&#xff0c;请合法利用知识&#xff0c;禁止进行违法犯罪活动&#xff01; 本次游戏没法给 内容参考于&#xff1a;微尘网络安全 工具下载&#xff1a; 链接&#xff1a;https://pan.baidu.com/s/1rEEJnt85npn7N38Ai0_F2Q?pwd6tw3 提…

24/9/6算法笔记 kaggle 房屋价格

预测模型主要分为两大类&#xff1a; 回归模型&#xff1a;当你的目标变量是连续的数值时&#xff0c;你会使用回归模型进行预测。回归模型试图找到输入特征和连续输出之间的关联。一些常见的回归模型包括&#xff1a; 线性回归&#xff08;Linear Regression&#xff09;岭回归…

FFmpeg 7.0 版本 “Dijkstra”的特点概述

FFmpeg 7.0 FFmpeg 官网:https://ffmpeg.org/FFmpeg 官网更新日志,2024.4.5 号发布代号"Dijkstra"的 7.0 版本的 FFmpeg,如下截图: 为什么叫 Dijkstra“Dijkstra” 指的是艾兹格戴克斯特拉(Edsger Wybe Dijkstra),他是一位荷兰计算机科学家,对计算机科学领域…

C#使用TCP-S7协议读写西门子PLC(一)

之前本人发布西门子S7协议的报文 西门子PLC的S7协议报文解析说明_西门子报文详解-CSDN博客 西门子PLC的S7协议是西门子公司在ModbusTcp协议的基础上自定义的一种协议,仅支持西门子PLC,S7协议本质仍然属于TCP协议的一种自定义具体实现 第一步,准备工作。VS2022中新建窗体应…

Redis学习Day3——项目工程开发

扩展阅读推荐&#xff1a; 黑马程序员Redis入门到实战教程_哔哩哔哩_bilibili 一、项目介绍及其初始化 学习Redis的过程&#xff0c;我们还将遇到各种实际问题&#xff0c;例如缓存击穿、雪崩、热Key等问题&#xff0c;只有在实际的项目实践中解决这些问题&#xff0c;才能更好…

教师节特辑:AI绘制的卡通人物,致敬最可爱的人‍

【编号&#xff1a;9】教师节到了&#xff0c;今天我要分享一组由AI绘制的教师节主题卡通人物插画&#xff0c;每一幅都充满了对老师的敬意和爱戴。让我们一起用这些可爱的卡通形象&#xff0c;向辛勤的园丁们致敬&#xff01; &#x1f393;【教师形象】 这…

域名证书,泛域名证书,sni

文章目录 前言一、证书1.全域名证书2.泛域名证书 二、域名证书的使用1、浏览器请求域名证书流程对全域名证书的请求流程对泛域名证书的请求流程ssl client-hello携带server name 报文 2、浏览器对证书的验证流程 三、域名证书和sni 前言 本文介绍了泛域名证书和全域名证书的区别…

JavaWeb【day12】--(SpringBootWeb登录认证)

案例-登录认证 在前面的课程中&#xff0c;我们已经实现了部门管理、员工管理的基本功能&#xff0c;但是大家会发现&#xff0c;我们并没有登录&#xff0c;就直接访问到了Tlias智能学习辅助系统的后台。 这是不安全的&#xff0c;所以我们今天的主题就是登录认证。 最终我们…

【32单片机篇】项目:智能台灯

一、项目需求 1. 红外传感器检测是否有人&#xff0c;有人的话实时检测距离&#xff0c;过近则报警&#xff1b;同时计时&#xff0c;超过固定时间则报警&#xff1b; 2. 按键 1 切换工作模式&#xff1a;智能模式、按键模式、远程模式&#xff1b; 3. 智能模式下&#xff0c;…

UML之类图详解

犬余&#x1f436; “我欲贱而贵&#xff0c;愚而智&#xff0c;贫而富&#xff0c;可乎&#xff1f; 曰&#xff1a;其唯学乎” 零、什么是类图 类图&#xff08;Class Diagram&#xff09;是面向对象系统建模中最常用和最重要的图&#xff0c;它通过图形化的方式展示系统中的…