当前位置:首页 > 编程技术 > 正文内容

一些简单html实例集合

yc8881年前 (2023-01-06)编程技术153

一些简单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');

希望这个例子能帮到你。


本站发布的内容若侵犯到您的权益,请邮件联系站长删除,我们将及时处理!


从您进入本站开始,已表示您已同意接受本站【免责声明】中的一切条款!


本站大部分下载资源收集于网络,不保证其完整性以及安全性,请下载后自行研究。


本站资源仅供学习和交流使用,版权归原作者所有,请勿商业运营、违法使用和传播!请在下载后24小时之内自觉删除。


若作商业用途,请购买正版,由于未及时购买和付费发生的侵权行为,使用者自行承担,概与本站无关。


本文链接:https://www.10zhan.com/biancheng/10549.html

标签: html
分享给朋友:

“一些简单html实例集合” 的相关文章

【说站】laravel实现自定义404页面并给页面传值

【说站】laravel实现自定义404页面并给页面传值

以 laravel5.8 为例,虽然有自带的404页面,但太简单,我们更希望能自定义404页面,将用户留在站点。实现的方式很简单,将自定义的视图文件命名为 404.blade.php,并放到 reso...

【说站】用一句话就可以去除宝塔面板操作上的二次验证

【说站】用一句话就可以去除宝塔面板操作上的二次验证

用过宝塔的朋友应该都会发现,现在宝塔面板有些鸡肋的功能,删除文件、删除数据库、删除站点等操作都需要做计算题!不仅加了几秒的延时等待,还无法跳过!这时候就会有朋友在想,如何去除宝塔面板的二次验证,此篇文...

【说站】Centos8.0如何配置静态IP详解及永久关闭防火墙

【说站】Centos8.0如何配置静态IP详解及永久关闭防火墙

这篇文章主要介绍了详解Centos8 配置静态IP的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来学习一下!1. 查看自己的网关地址点击虚...

【说站】电脑安装MySQL时出现starting the server失败原因及解决方案

【说站】电脑安装MySQL时出现starting the server失败原因及解决方案

今天在安装MySQL时出现starting the server失败,经过查询分析得出以下结论,记录一下操作步骤。原因分析:如果电脑是第一次安装MySQL,一般不会出现这样的报错。如下图所示。star...

【说站】vagrant实现linux虚拟机的安装并配置网络

【说站】vagrant实现linux虚拟机的安装并配置网络

一、VirtualBox的下载和安装1、下载VirtualBox官网下载:https://www.virtualbox.org/wiki/Downloads我的电脑是Windows的,所以下载Wind...

【说站】C#在PDF中添加墨迹注释Ink Annotation的步骤详解

【说站】C#在PDF中添加墨迹注释Ink Annotation的步骤详解

PDF中的墨迹注释(Ink Annotation),表现为徒手涂鸦式的形状;该类型的注释,可任意指定形状顶点的位置及个数,通过指定的顶点,程序将连接各点绘制成平滑的曲线。下面,通过C#程序代码介绍如何...