超详细HTML5登录注册页面总结
一、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>
三、图像标签
<!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>
四、链接标签
<!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：2240061437@qq.com">点击联系我</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><!--表单formaction：表单提交的位置，可以是网站，也可以是一个请求处理地址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">
代码实现：
表单的初级验证：
placeholder 提示信息 （在文本框中输入的提示信息，方便用户可以知道这里填写什么）
required 非空判断 （是否为空）
pattern 正则表达式
如有侵权请联系删除
以上就是全部的分享内容了
如果身边的朋友有需要
请帮忙转发给TA~
更多干货
还有彩蛋
关注微博：传智播客博学谷
私信“模板”
即可获得4000个PPT精选模板
（也可换成Adobe全家桶）
都是小谷人工回复，发慢了请见谅哦~