一些简单html实例集合
一个简单的html登录页
以下是一个简单的 HTML 登录页面示例：
复制
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>登录</title>
</head>
<body>
<h1>登录</h1>
<form action="/login" method="post">
<label for="username">用户名：</label><br>
<input type="text" id="username" name="username"><br>
<label for="password">密码：</label><br>
<input type="password" id="password" name="password"><br><br>
<input type="submit" value="登录">
</form>
</body>
</html>
这个页面包含了一个表单，用户可以在表单中输入用户名和密码。表单的 action 属性指定了提交表单时要访问的 URL，method 属性指定了使用的 HTTP 方法（在这里是 "post"）。
表单中的输入字段使用 input 元素，其中 type 属性指定了输入字段的类型。在这个例子中，用户名使用的是文本输入字段（type="text"），密码使用的是密码输入字段（type="password"）。
点击 "登录" 按钮后，表单中的数据将被提交到指定的 URL，服务器端的程序将使用这些数据进行身份验证。
一个简单的html导航页
以下是一个简单的 HTML 导航页的示例：
复制
<!DOCTYPE html>
<html>
<head>
<title>导航页</title>
</head>
<body>
<h1>导航</h1>
<ul>
<li><a href="/home">首页</a></li>
<li><a href="/about">关于</a></li>
<li><a href="/services">服务</a></li>
<li><a href="/contact">联系我们</a></li>
</ul>
</body>
</html>
该导航页包含一个标题和一个无序列表，其中包含四个链接：首页、关于、服务和联系我们。每个链接都具有一个相应的 URL，用户可以通过单击链接来访问相应的页面。
一个关于我们的html页面
那么我们可以在 html 页面中写一个关于我们的介绍，例如：
复制
<!DOCTYPE html>
<html>
<head>
<title>关于我们</title>
</head>
<body>
<h1>关于我们</h1>
<p>我们是一家专注于提供优质产品和服务的公司。我们致力于为客户提供满意的体验，并不断努力提升我们的业务水平。</p>
<h2>我们的使命</h2>
<p>我们的使命是通过提供优质的产品和服务，改善人们的生活质量。</p>
<h2>我们的愿景</h2>
<p>我们希望成为行业中最受信赖和尊敬的公司之一。</p>
</body>
</html>
这段代码会在浏览器中显示一个关于我们的标题，然后是关于我们公司的介绍、使命和愿景的文本。
一个简单html游戏代码
HTML 中创建一个游戏通常需要使用 JavaScript 来编写游戏的逻辑。你可以使用 HTML 的 canvas 元素来创建游戏画布。
以下是一个简单的 HTML 游戏示例代码：
复制
<html>
<head>
<title>My Game</title>
</head>
<body>
<canvas id="gameCanvas" width="800" height="600"></canvas>
<script>
// 获取 canvas 元素
var canvas = document.getElementById('gameCanvas');
// 获取 canvas 的绘图上下文
var context = canvas.getContext('2d');
// 在 canvas 上绘制一个红色矩形
context.fillStyle = 'red';
context.fillRect(10, 10, 50, 50);
</script>
</body>
</html>
这段代码会在 HTML 页面中创建一个 800x600 像素的画布，然后使用 JavaScript 在画布上绘制一个 50x50 像素的红色矩形。
要创建一个更复杂的 HTML 游戏，你可能需要使用更多的 JavaScript 代码来实现游戏的逻辑和交互。你还可以使用框架和库，比如 Phaser 或 p5.js，来帮助你开发 HTML 游戏。
一个简单的前端首页，通过登录调转到首页
一个简单的前端首页例子：
复制
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>首页</title>
</head>
<body>
<!-- 登录表单 -->
<form action="/login" method="post">
<label for="username">用户名：</label><br>
<input type="text" id="username" name="username"><br>
<label for="password">密码：</label><br>
<input type="password" id="password" name="password"><br><br>
<input type="submit" value="登录">
</form>
</body>
</html>
这是一个简单的登录表单，当用户提交表单时，表单的数据将通过 HTTP POST 请求发送到服务器的 "/login" 路径。服务器端的代码可以检查用户名和密码是否正确，并根据结果进行相应的处理。
如果登录成功，则可以通过调用 JavaScript 的 window.location.replace() 函数将用户重定向到首页：
复制
window.location.replace('/index.html');
希望这个例子能帮到你。
更新于：2个月前相关文章
- 【说站】python类如何实例化对象
- 【说站】python类变量和实例变量的对比
- 【说站】java数组中元素求和的实例
- 【说站】java实例变量是什么？
- 简单优雅的Java ORM
- 【说站】python字符串如何简单运算
- 【说站】Java如何创建类型实例
- php语法技巧代码实例
- thinkphp怎么用model？ThinkPHP中实例Model方法的区别说明
- thinkPHP简单调用函数与类库的方法
- HTML转义字符对照表
- 介绍Js简单的递归排列组合
- 如何使用JavaScript从字符串中删除HTML标签？
- enctype='multipart/form-data'在HTML中是什么意思？
- 如何在 JavaScript 中使用正则表达式删除 HTML 标签？
- 使用 HTML、CSS 和 JavaScript 的实时计算器
- 跨年代码 烟花html
- 表白代码，爱心树html
- HTML 简介
- Vue 实例、el、data