一个简单的注册页面,如有错误请指正;(1.html)

2023-10-29 06:36

本文主要是介绍一个简单的注册页面,如有错误请指正;(1.html),希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

这段HTML代码是一个简单的注册页面的代码。让我逐行为您解释其内容:

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><meta name="viewport" content="width=device-width, initial-scale=1"><title>注册</title><script src="./js/jquery-3.7.0.js"></script><link rel="stylesheet" href="./css/item.css" /></head><body><!-- 顶部图片 --><div><img src="./img/10001 - 副本.png" alt="" /></div><!-- 登录及注册 --><div class="head"><div class="head-left"><div>登录</div></div><div class="head-right"><div>注册</div></div></div><!-- 账号及密码 --><div class="acc"><div>请输入账号:</div></div><!-- 账号输入框 --><div class="name"><input type="text" id="name" /></div><!-- 密码输入框 --><div class="add"><div>请输入密码:</div></div><!-- 密码输入框 --><div class="code"><input type="password" id="password" /></div><!-- 请输入姓名 --><div class="names"><div>请输入姓名:</div><input type="text" id="namex" /></div><!-- 请选择性别 --><div class="gender" id="gender"><div class="gan-left"><div>请选择性别:</div></div><input type="radio" name="ss" value="0"/><span>男</span><input type="radio" name="ss" value="1"/><span>女</span><input type="radio" name="ss" value="2"/><span>保密</span></div><!-- 选择图片 --><div class="print"><div>请选择图片:</div><form id="form"><label><img src="./img/10016.jpg" alt="" id="imgs" /><input type="file" id="file" name="file" onchange="fileImg()" style="display: none;"></label></form></div><!-- 注册 --><div class="footer"><div class="footer-f" onclick="login()"><div>注册</div></div></div><div id="alert"></div><script src="./js/item.js"></script></body>
</html>

 

1. `<!DOCTYPE html>`:声明文档类型为HTML5。
2. `<html>`:HTML文档的根元素。
3. `<head>`:头部元素,包含了一些关于文档的配置信息和引用的外部资源。
4. `<meta charset="utf-8" />`:设置文档的字符编码为UTF-8,以支持显示各种语言和特殊字符。
5. `<meta name="viewport" content="width=device-width, initial-scale=1">`:配置网页在移动设备上的视口显示,使内容适应设备的宽度并初始缩放为1。
6. `<title>`:指定页面的标题,会显示在浏览器的标签页上。
7. `<script src="./js/jquery-3.7.0.js"></script>`:引入了jQuery库的JavaScript文件。
8. `<link rel="stylesheet" href="./css/item.css" />`:链接到一个名为`item.css`的CSS样式表文件。
9. `<body>`:文档的主体部分,包含了页面的实际内容。
10. `<div>`:一个通用的容器元素,用于包裹其他元素。
11. `<img src="./img/10001 - 副本.png" alt="" />`:用于显示一张名为`10001 - 副本.png`的图片。
12. `<div class="head">`:具有类名为`head`的`div`元素,用于包含登录和注册选项。
13. `<div class="head-left">`和`<div class="head-right">`:分别是`head`部分中的左侧和右侧容器,用于包含相应的文本("登录"和"注册")。
14. `<div class="acc">`:具有类名为`acc`的`div`元素,用于显示"请输入账号:"文本。
15. `<div class="name">`:具有类名为`name`的`div`元素,用于包含账号输入框。
16. `<input type="text" id="name" />`:账号输入框,具有一个id为`name`,用户可以在此输入账号。
17. `<div class="add">`:具有类名为`add`的`div`元素,用于显示"请输入密码:"文本。
18. `<div class="code">`:具有类名为`code`的`div`元素,用于包含密码输入框。
19. `<input type="password" id="password" />`:密码输入框,具有一个id为`password`,用户可以在此输入密码。
20. `<div class="names">`:具有类名为`names`的`div`元素,用于包含"请输入姓名:"文本和姓名输入框。
21. `<div class="gender" id="gender">`:具有类名为`gender`和id为`gender`的`div`元素,用于包含"请选择性别:"文本和三个性别选项。
22. `<input type="radio" name="ss" value="0"/>`、`<input type="radio" name="ss" value="1"/>`、`<input type="radio" name="ss" value="2"/>`:三个单选按钮,分别对应不同的性别选项。
23. `<div class="print">`:具有类名为`print`的`div`元素,用于显示"请选择图片:"文本和一个用于上传图片的`<input>`元素。
24. `<form id="form">`:一个具有id为`form`的表单元素,用于包装上传图片的`<input>`元素。
25. `<label>`:一个包含图片和用于上传图片的`<input>`元素的标签元素。
26. `<img src="./img/10016.jpg" alt="" id="imgs" />`:用于显示一张名为`10016.jpg`的图片。
27. `<input type="file" id="file" name="file" οnchange="fileImg()" style="display: none;">`:用于上传图片的`<input>`元素,`οnchange="fileImg()"`指定了当用户选择文件后调用名为`fileImg()`的JavaScript函数。
28. `<div class="footer">`:具有类名为`footer`的`div`元素,用于包含注册按钮。
29. `<div class="footer-f" οnclick="login()">`:具有类名为`footer-f`的`div`元素,用户点击该元素会调用名为`login()`的JavaScript函数。
30. `<div id="alert">`:用于显示提示信息的`div`元素。
31. `<script src="./js/item.js"></script>`:引入了一个名为`item.js`的JavaScript文件。

这段代码实现了一个简单的注册页面,包括账号和密码的输入框、姓名和性别的选择、图片的上传以及注册按钮。您可以根据需要对代码进行修改和扩展。

这篇关于一个简单的注册页面,如有错误请指正;(1.html)的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/298892

相关文章

Vue3 的 shallowRef 和 shallowReactive:优化性能

大家对 Vue3 的 ref 和 reactive 都很熟悉,那么对 shallowRef 和 shallowReactive 是否了解呢? 在编程和数据结构中,“shallow”(浅层)通常指对数据结构的最外层进行操作,而不递归地处理其内部或嵌套的数据。这种处理方式关注的是数据结构的第一层属性或元素,而忽略更深层次的嵌套内容。 1. 浅层与深层的对比 1.1 浅层(Shallow) 定义

这15个Vue指令,让你的项目开发爽到爆

1. V-Hotkey 仓库地址: github.com/Dafrok/v-ho… Demo: 戳这里 https://dafrok.github.io/v-hotkey 安装: npm install --save v-hotkey 这个指令可以给组件绑定一个或多个快捷键。你想要通过按下 Escape 键后隐藏某个组件,按住 Control 和回车键再显示它吗?小菜一碟: <template

【 html+css 绚丽Loading 】000046 三才归元阵

前言:哈喽,大家好,今天给大家分享html+css 绚丽Loading!并提供具体代码帮助大家深入理解,彻底掌握!创作不易,如果能帮助到大家或者给大家一些灵感和启发,欢迎收藏+关注哦 💕 目录 📚一、效果📚二、信息💡1.简介:💡2.外观描述:💡3.使用方式:💡4.战斗方式:💡5.提升:💡6.传说: 📚三、源代码,上代码,可以直接复制使用🎥效果🗂️目录✍️

【前端学习】AntV G6-08 深入图形与图形分组、自定义节点、节点动画(下)

【课程链接】 AntV G6:深入图形与图形分组、自定义节点、节点动画(下)_哔哩哔哩_bilibili 本章十吾老师讲解了一个复杂的自定义节点中,应该怎样去计算和绘制图形,如何给一个图形制作不间断的动画,以及在鼠标事件之后产生动画。(有点难,需要好好理解) <!DOCTYPE html><html><head><meta charset="UTF-8"><title>06

csu 1446 Problem J Modified LCS (扩展欧几里得算法的简单应用)

这是一道扩展欧几里得算法的简单应用题,这题是在湖南多校训练赛中队友ac的一道题,在比赛之后请教了队友,然后自己把它a掉 这也是自己独自做扩展欧几里得算法的题目 题意:把题意转变下就变成了:求d1*x - d2*y = f2 - f1的解,很明显用exgcd来解 下面介绍一下exgcd的一些知识点:求ax + by = c的解 一、首先求ax + by = gcd(a,b)的解 这个

hdu2289(简单二分)

虽说是简单二分,但是我还是wa死了  题意:已知圆台的体积,求高度 首先要知道圆台体积怎么求:设上下底的半径分别为r1,r2,高为h,V = PI*(r1*r1+r1*r2+r2*r2)*h/3 然后以h进行二分 代码如下: #include<iostream>#include<algorithm>#include<cstring>#include<stack>#includ

如何在页面调用utility bar并传递参数至lwc组件

1.在app的utility item中添加lwc组件: 2.调用utility bar api的方式有两种: 方法一,通过lwc调用: import {LightningElement,api ,wire } from 'lwc';import { publish, MessageContext } from 'lightning/messageService';import Ca

usaco 1.3 Prime Cryptarithm(简单哈希表暴搜剪枝)

思路: 1. 用一个 hash[ ] 数组存放输入的数字,令 hash[ tmp ]=1 。 2. 一个自定义函数 check( ) ,检查各位是否为输入的数字。 3. 暴搜。第一行数从 100到999,第二行数从 10到99。 4. 剪枝。 代码: /*ID: who jayLANG: C++TASK: crypt1*/#include<stdio.h>bool h

uva 10387 Billiard(简单几何)

题意是一个球从矩形的中点出发,告诉你小球与矩形两条边的碰撞次数与小球回到原点的时间,求小球出发时的角度和小球的速度。 简单的几何问题,小球每与竖边碰撞一次,向右扩展一个相同的矩形;每与横边碰撞一次,向上扩展一个相同的矩形。 可以发现,扩展矩形的路径和在当前矩形中的每一段路径相同,当小球回到出发点时,一条直线的路径刚好经过最后一个扩展矩形的中心点。 最后扩展的路径和横边竖边恰好组成一个直

poj 1113 凸包+简单几何计算

题意: 给N个平面上的点,现在要在离点外L米处建城墙,使得城墙把所有点都包含进去且城墙的长度最短。 解析: 韬哥出的某次训练赛上A出的第一道计算几何,算是大水题吧。 用convexhull算法把凸包求出来,然后加加减减就A了。 计算见下图: 好久没玩画图了啊好开心。 代码: #include <iostream>#include <cstdio>#inclu