vlambda博客
学习文章列表

超详细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>helloworld</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:表单提交的位置,可以是网站,也可以是一个请求处理地址methodpostget提交方式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方式提交,其实也是可以捕获到输入的信息的,在页面审查元素捕获一下,就能看到输入的信息,如下图。其实如果再用了加密的方式就看不到了。

超详细HTML5登录注册页面总结

代码实现:

超详细HTML5登录注册页面总结



十、单选框多选框

单选框用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>

代码实现:

超详细HTML5登录注册页面总结



十三、表单验证

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">

代码实现:

超详细HTML5登录注册页面总结

表单的初级验证:

  • placeholder 提示信息 (在文本框中输入的提示信息,方便用户可以知道这里填写什么)

  • required 非空判断 (是否为空)

  • pattern 正则表达式


如有侵权请联系删除


以上就是全部的分享内容了

如果身边的朋友有需要

请帮忙转发给TA~

 更多干货 

 关注我们 


还有彩蛋


关注微博传智播客博学谷

私信“模板”

即可获得4000个PPT精选模板

(也可换成Adobe全家桶)

都是小谷人工回复,发慢了请见谅哦~


-End-


     
       
       
     

动动小手,让更多需要的人看到~