超详细html5登录注册页面总结_登录页面html总结-程序员宅基地

技术标签： html5 html

一、HTML5简介

HTML是互联网上应用最广泛的标记语言。HTML文件就是普通文本+HTML标记，而不同的HTML标记能表示不同的效果。

HTML5优势

HTML5并不是一种革新的的升级，而是一种向规范向习惯的妥协，因此HTML5并不会带给开发者过多的冲击，从HTML4到HTML5过渡会非常轻松。

HTML5解决了以下四点问题：

解决跨浏览器问题
部标签代替了原来的JavaScript
更明确的语义支持
增强了web应用程序和功能

二、我的第一个网页

下面在ideal中先写一个第一个网页，测试一下环境是否搭建好。

<!--DOCTYPE :告诉浏览器，我们要使用什么规范   -->
<!DOCTYPE html>
<html lang="en">
<!--head标签代表网页头部-->
<head>
<!--meta描述性标签，它用来描述我们网站的一些信息-->
    <meta charset="UTF-8">
    <meta name="keywords" content="好好学习">
    <meta name="description" content="从现在开始好好学习">
<!--title网页标题-->
    <title>我的第一个网页</title>
</head>
<!--body标签代表网页主体 -->
<body>
hello，world！
</body>
</html>

三、图像标签

image图像 src：图片地址，可以选用相对路径，也可以选用绝对路径，一般使用相对路径，便于进行修改，或者发送给他人，每个人的存储路径不同，绝对路径就要进行修改，大大不便。 src和talt是必填项。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图像标签</title>
</head>
<body>

<!--放入图像
src图片地址  相对路径   alt  报错误时提示信息
title   鼠标悬停时的文字-->
<img src="../resources/image/缺陷.png" alt="缺陷照片" title="悬停文字" width="300" height="300">
<a href="3、链接标签.html#down">跳转到底部</a>
</body>
</html>

四、链接标签

在日常我们经常可以看到点击这个链接，跳转到另一个界面，其实就是使用了链接标签这个方法，a href输入跳转地址，还应用了一下锚链接，功能性链接，邮件，qq等。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>链接标签</title>
</head>
<body>
<!--使用name作为标记-->
<a name="top">顶部</a>
<!--a标签
herf必填  表示要跳转到哪个网页
target表示窗口在哪里打开
_blank 在新标签中打开
_self   在自己网页打开-->
<a href="1.我的第一个网页.html" target="_blank">点我跳转到页面</a>
<br>
<a href="https://www.baidu.com" target="_self">点我跳转到百度</a>
<br>
<a href="1.我的第一个网页.html">
    <img src="../resources/image/缺陷.png" alt="缺陷照片" title="悬停文字" width="300" height="300" >
</a>
<p></p>
<a href="1.我的第一个网页.html">
    <img src="../resources/image/缺陷.png" alt="缺陷照片" title="悬停文字" width="300" height="300" >
</a>
<p></p>
<a href="1.我的第一个网页.html">
    <img src="../resources/image/缺陷.png" alt="缺陷照片" title="悬停文字" width="300" height="300" >
</a><p></p>
<a href="1.我的第一个网页.html">
    <img src="../resources/image/缺陷.png" alt="缺陷照片" title="悬停文字" width="300" height="300" >
</a><p></p>
<a href="1.我的第一个网页.html">
    <img src="../resources/image/缺陷.png" alt="缺陷照片" title="悬停文字" width="300" height="300" >
</a>
<!--锚链接
1、需要一个锚标记
2、跳转到标记
#-->
<a href="#top">回到顶部</a>
<a name="down">回到底部</a>
<!--功能性链接
邮件链接：mailto：-->
<a href="mailto：[email protected]">点击联系我</a>
<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=&site=qq&menu=yes">
    <img border="0" src="http://wpa.qq.com/pa?p=2::52" alt="你好，有什么需要帮助的呢？" title="你好，有什么需要帮助的呢？"/></a>
</body>
</html>

五、列表

列表分为有有序列表和无序列表，有序列表应用：试卷，问卷等。无序列表：导航、侧边栏等。

<head>
    <meta charset="UTF-8">
    <title>列表</title>
</head>
<body>
<!--ol表示有序列表
应用：试卷，问答-->
<ol>
    <li>Java</li>
    <li>python</li>
    <li>数据库</li>
    <li>网络</li>
</ol>
<!--ul表示无序列表
应用：导航，侧边栏-->
<ul>
    <li>Java</li>
    <li>python</li>
    <li>数据库</li>
    <li>网络</li>
</ul>
<!--dl标签
dt：列表名称
dd：列表内容
应用：公司网站底部-->
<dl>
    <dt>学科</dt>
    <dd>python</dd>
    <dd>Java</dd>
    <dd>c</dd>
    <dt>体育</dt>
    <dd>篮球</dd>
    <dd>足球</dd>
    <dd>羽毛球</dd>
</dl>

</body>
</html>

代码实现：

在这里插入图片描述

六、表格

表格就是日常生活中我们常见的一些表格，在excel中完成，这里用代码实现一下。

表格：table，也可以进行跨行，跨列操作，相当于excel中的合并单元格

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格</title>
</head>
<body>
<!--表格table
行  tr
列  td-->
<table border="1px">
    <tr>
<!--colspan 跨列  -->
        <td colspan="4">1-1</td>

    </tr>
    <tr>
<!--rowspan跨行  -->
        <td rowspan="4">2-1</td>
        <td>2-2</td>
        <td>2-3</td>
        <td>2-4</td>
    </tr>
    <tr>
        <td>3-1</td>
        <td>3-2</td>
        <td>3-3</td>

    </tr>
</table>
</body>
<table></table>
</html>

在这里插入图片描述

七、媒体元素

就是可以播放视频或者音频，仔细想想其实就是写好路径就可,autoplay可以设置自动播放。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>媒体元素</title>
</head>
<body>
<!--
src：资源路径
controls 标签控制开关
autoplay:自动播放
-->
<video src="../resources/video/抖音.mp4 " controls autoplay></video>
<audio src="../resources/audio/Kim.T - 我是一只鱼.mp3 "controls autoplay></audio>
</body>
</html>

八、内联框架

内联框架就是在这个网页可以嵌套其他网页，这里选用百度举个例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>内联框架</title>
</head>
<body>
<!--iframe 内联框架
src：地址
w  h  宽度  高度-->
<iframe src="https://www.baidu.com" frameborder="0" width="1000px" height="800px"></iframe>

</body>
</html>

九、表单

这是网页最常用的，我们通常登录某网站就是用这个。写一个注册页面。

重点：method：post，get提交方式
get方式提交：我们可以在url中看到我们提交的信息，不安全，高效
post：比较安全，传输大文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单</title>
</head>
<body>
<h1>注册</h1>
<!--表单form
action：表单提交的位置，可以是网站，也可以是一个请求处理地址
method：post，get提交方式
get方式提交：我们可以在url中看到我们提交的信息，不安全，高效
post：比较安全，传输大文件-->
<form action="1.我的第一个网页.html" method="post">
<!-- 文本输入框：input type="text"
  value 默认初始值
  maxlength最长能写几个字符
  size  文本框的长度-->
    <p>名字：<input type="text" name="username"></p>
<!--密码框：input type="password"    -->
    <p>密码：<input type="password" name="pwd"></p>

那如果用post方式提交，其实也是可以捕获到输入的信息的，在页面审查元素捕获一下，就能看到输入的信息，如下图。其实如果再用了加密的方式就看不到了。

在这里插入图片描述

代码实现：

在这里插入图片描述

十、单选框多选框

单选框用radio，多选框用checkbox，如果默认选中，就加checked

<!--单选框标签
    input type=“radio”
    value：单选框的值
    name：表示组-->
    <p>性别：
        <input type="radio"value="boy" name="sex"/>男
        <input type="radio"value="girl" name="sex"/>女
    </p>
<!--    checkbox多选框
        checked 默认选中-->
    <p>爱好：
        <input type="checkbox"value="游泳"name="1">游泳
        <input type="checkbox"value="学习"name="hobby"checked>学习
        <input type="checkbox"value="游戏"name="hobby">游戏
    </p>

十一、下拉列表框

<!-- option   下拉框 列表框
       selected默认选中-->
    <p>国家：
        <select name="列表名称" >
            <option value="中国">中国</option>
            <option value="法国" selected>法国</option>
            <option value="美国">美国</option>
        </select>
    </p>

十二、文本域文件域

文本域常用于我们输入信息时的备注，详细等，文件域可以用来上传文件

<!--textarea文本域  行 列    -->
    <p>反馈：
        <textarea name="textarea" id="" cols="30" rows="10">文本内容</textarea>
        
    </p>
<!--file 文件域    -->
    <p>
        <input type="file"name="files">
        <input type="button"value="上传"name="upload">
    </p>

代码实现;

在这里插入图片描述

十三、表单验证

邮箱验证，地址验证，数字等，滑块验证主要用来调节声音，还有我想到的是一些问卷里面滑动选择满意度等，到这里功能越来越详细，如果哪个没有按照规则，则提交不了。

submit：提交

reset：重置

<!--邮箱验证    -->
    <p>邮箱：
        <input type="email"name="email">
    </p>
<!--url    -->
    <p>url：
        <input type="url"name="url">
    </p>
<!--数字    -->
    <p>商品数量：
        <input type="number"name="num"max="100"min="0"step="1">
    </p>
<!--滑块 input type=”range“-->
    <p>音量：
        <input type="range"name="voice"max="100"min="0"step="1">
    </p>
    <p>搜索：
        <input type="search"name="search">
    </p>



    <p>
        <input type="submit">
        <input type="reset">

代码实现：

在这里插入图片描述

还有一些功能隐藏hidden，禁用disable，只读 readonly

表单的初级验证

placeholder 提示信息（在文本框中输入的提示信息，方便用户可以知道这里填写什么）
required 非空判断（是否为空）
pattern 正则表达式

本文链接：https://blog.csdn.net/weixin_45738504/article/details/115284440

原作者删帖不实内容删帖广告或垃圾文章投诉

智能推荐

对jupyter notebook运行时出现“The kernel appears to have died. It will restart automatically”的解决方案_用jupyternotebook训练模型总是the kernel appears to have d-程序员宅基地

文章浏览阅读1.6w次，点赞8次，收藏21次。1、前天在jupyter notebook 上运行tensorflow的代码时（主要是卷积神经网络，用小笔记本上的GPU），运行没多久，出现“The kernel appears to have died. It will restart automatically”。试了很多遍，一直都是这样。但是又运行之前的Tensorflow基础运算和全连接神经网络的程序，都可以运行，只有开始跑卷积神经网..._用jupyternotebook训练模型总是the kernel appears to have died. it will restar

redisson分布式锁组合spring事务解决锁被释放但事务还未被提交的问题_redis分布式锁释放了,业务还没处理完-程序员宅基地

文章浏览阅读2.6k次，点赞10次，收藏25次。定义的注解里面建议组合spring的Transactional注解这样的话，使用者能够定义像传播特性、隔离级别等之类的属性，而不需要我们重新定义/**// 开启事务如果不需要组合的话可选择使用此注解 // 但需要稍微改一下后续的代码 // boolean transactional() default false;// 组合事务注解最推荐很方便 Transactional transactional();// 开启锁 boolean lock() default true;_redis分布式锁释放了,业务还没处理完

python asyncio和celery对比_如何将Celery与asyncio结合？ - python-程序员宅基地

文章浏览阅读222次。如何创建使芹菜任务看起来像asyncio.Task的包装器？还是有更好的方法将Celery与asyncio集成？@ asksol，Celery的创建者said this::使用Celery作为异步I / O框架之上的分布式层是很常见的(提示:将CPU绑定的任务路由到prefork worker意味着它们不会阻塞事件循环)。但是我找不到任何专门针对asyncio框架的代码示例。参考方案如官方网站中所..._asyncio和celery

5种靶机安装（dvwa pikachu mutillidae mcir bwapp）_如何在靶机上安装软件-程序员宅基地

文章浏览阅读823次，点赞2次，收藏3次。**一，安装XAMPP软件，安装Gvim编辑器，火狐浏览器，360压缩，必须有固定的的IP地址。软件在360官网进行安装（本次安装时 Server Windows 2016）xampp安装过程登录本地网络管理器修改phpMyAdmin数据库密码修改配置文件密码登录重新登录数据库，安装前提完成。安装前提完成开始安装1，bwapp 端口:82 地址 172.16.12.100：82/install.php2，mcir 端口:83 地址_如何在靶机上安装软件

使用mybatis-plus的insert方法遇到的坑（添加时id值不存在异常）_mysbatis plus 保存的时候填id不保存-程序员宅基地

文章浏览阅读3.1k次。mybatis-plus的insert方法_mysbatis plus 保存的时候填id不保存

Linux日志文件secure、wtmp、utmp、lastlog、messages-程序员宅基地

文章浏览阅读4k次。1.secure日志/var/log/secure日志用来记录登录成功和失败2.wtmp日志/var/log/wtmp：该日志文件永久记录每个用户登录、注销及系统的启动、停机的事件，使用last命令查看3.utmp日志/var/run/utmp：该日志文件记录有关当前登录的每个用户的信息。如 who、w、users、finger等就需要访问这个文件4.lastlog日志/var/log/lastlog ：记录最后一次用户成功登陆的时间、登陆IP等信息..._wtmp

随便推点

c32循迹小车c语言程序,stm32篇--小车循迹-程序员宅基地

文章浏览阅读1.3k次。小车的循迹算法循迹小车使用红外对射寻黑线，根据轨道的不同，我使用了两种不同算法：(1)第一种是在轨道外有影响的，比如轨道外有黑色，车出去一点就会碰到黑色，那就是检测到歪了之后除非检测它回来了，否则一直拐弯：//自己寻道void Self_Tracting(void){while(1){test_sensor();motor_move_speed(paras.speed);if(GPIO_ReadI..._寻迹小车怎么用c语言在拐歪处区分两条黑线

c语言单词错误答案正确,电大计算机科学与技术c语言各章练习题答案-程序员宅基地

文章浏览阅读183次。电大计算机科学与技术c语言各章练习题答案各章练习题答案第1章 C语言概述1.1 简答题1 答：C语言单词分为保留字、标识符、字面常量、运算符和分隔符5类。2 答：首字符必须是英文字母或下划线；其余位置上的字符必须是英文字母、十进制数字符号或下划线。3 答：它们的首字符不同，此外各自还有详细的格式规定。其中，数值字面常量以数字、正负号或小数点(如.01表示0.01)开头，字符字面常量必须用单引号括起..._以下有关名称定义错误的是 ?a名称的第一个字符必须是字母、反斜杠或下划线。b

listview图片的异步加载-程序员宅基地

文章浏览阅读380次。package com.example.utils;import java.io.IOException;import java.io.InputStream;import org.apache.http.HttpResponse;import org.apache.http.client.ClientProtocolException;import org.apache.http.client.

Python_列表元素去重_target_list[i][3]-程序员宅基地

文章浏览阅读278次。算法：外层倒序从后向前判断，如果相同元素(里层从前往后判断)，则删除,如果删除了当前元素，无需继续用当前元素比较""" 算法题，重复元素保留一个"""list01 = [34, 34, 8, 9, 8, 9, 34, 56, 8, 8, 8, 8, 9]# 外层倒序，确保不会遗漏for i in range(len(list01) - 1, -1, -1): # 内层正序or..._target_list[i][3]

STM32_DMA_多通道采集ADC出现错位现象_adcdma多通道数据错位-程序员宅基地

文章浏览阅读974次。后出现adcSensorValue[0],adcSensorValue[3],adcSensorValue[6]…采集的是通道3的值并非是通道1的值。在不要采集ADC的时候，或是临时想要暂停采集的地方停止MDA工作，这样下次再调用HAL_ADC_Start_DMA(&hadc3,(unsigned int *)adcSensorValue,ADC_SENSOR_LEN);_adcdma多通道数据错位

模型驱动开发的幻象与现实_软件模型与现实世界相悖-程序员宅基地

文章浏览阅读813次。转自http://www.kcomsoft.com/Article49.asp[编者按] “十年内，没有任何单独的软件工程进展可以使软件生产率有数量级的提高”，Frederick Brooks在1986年做出的这一论断被广泛称为“银弹定律”。Brooks给了这一定律一个10年的期限。然而事实证明他过于谨慎了，在他做出这个论断之后接近20年，银弹定律仍然像魔咒一样紧紧束缚住软件工业。尽管专业人士尝试了大量的新技术和新方法，但是效果令人失望。面向对象被证明有负众望，软件工程更是陷入泥潭，_软件模型与现实世界相悖