首页 前端知识 【html】新建一个html并且在浏览器运行

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

2024-11-10 09:11:58 前端知识 前端哥 709 527 我要收藏

以下是一个简单的 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

转载请注明出处或者链接地址:https://www.qianduange.cn//article/20174.html
标签
评论
发布的文章

前端:HTML

2025-02-23 11:02:50

CSS3快速入门

2025-02-23 11:02:48

CSS3——transform属性

2025-02-23 11:02:46

React【vite使用模块化css】

2025-02-23 11:02:44

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!