HTML5练习2

1、邮箱注册网页

主要代码：

<!doctype html>

<html>

<meta charset="utf-8">

<title>邮箱注册</title>

</head>

<body>

<table align="center">

<tr>

<td><img src="data:images/微博桌面截图_20160519101859_03.gif"><img src="data:images/微博桌面截图_20160519101859_04.gif"><img src="data:images/微博桌面截图_20160519101859_05.gif"><img src="data:images/微博桌面截图_20160519101859_07.gif"></td>

<td align="right"><font color="#3300FF" size="-2"><a href="http://mail.163.com/html/mail_intro/" target="_blank">了解更多</a> | <a href="http://help.mail.163.com/feedback.do?m=add&categoryName=注册" target="_blank">反馈意见</a></font></td>

</tr>

<tr bgcolor="#6697C9">

<td colspan="" height=""><font face="隶书" size="+1" color="#FFFFFF"><b>欢迎注册无限容量的网易邮箱！邮件地址可以登录使用其他网易旗下产品。</b></font></td>

</tr>

<tr>

<td>

<div>

<table>

<tr>

<td><input type="button" value="注册字母邮箱"></td>

</tr>

<tr>

<td>

<form>

&nbsp;&nbsp;<label for="*邮箱地址："><font color="red">*</font>邮箱地址：<input type="text" placeholder="建议用手机号码注册" size="34.8" required id="*邮箱地址：" name="*邮箱地址："></label>@

<select size="">

<option value ="163.com"selected="selected" style="color:#F5F5F5">.com</option>

<option value ="126.com" style="color:#F5F5F5">.com</option>

<option value ="yeah.net" style="color:#F5F5F5">yeah.net</option>

</select>

<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<font color="#CCCCCC" size="-3">~18个字符，可使用字母、数字、下划线，需以字母开头</font>

</form>

</td>

</tr>

<tr>

<td>

<form>

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<font color="red">*</font>密码：<input type="password" size="">

<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<font color="#CCCCCC" size="-3">~16个字符，区分大小写</font>

</form>

</td>

</tr>

<tr>

<td>

<form>

&nbsp;&nbsp;<font color="red">*</font>确认密码：<input type="password" size="">

<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<font color="#CCCCCC" size="-3">请再次填写密码</font>

</form>

</td>

</tr>

<tr>

<td>

<form>

&nbsp;&nbsp;<font color="red">*</font>手机号码：<label for="phonenumber"><input value="+86" list="phonenumber" size=""><input type="text" size=""/></label>

<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<font color="#CCCCCC" size="-3">忘记密码时，可以通过该手机号码快速找回密码</font>

</form>

</td>

</tr>

<tr>

<td>

<form>

&nbsp;&nbsp;&nbsp;&nbsp;<font color="#FF0000">*</font>验证码：<input type="text" size="">&nbsp;<img src="data:images/微博桌面截图_20160519101924_03.gif">

<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<font color="#CCCCCC" size="-3">请填写图片中的字符，不区分大小写&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;看不清楚？换张图片</font>

</form>

</td>

</tr>

<tr>

<td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<button type="button" onclick="alert('Welcome!')">免费获取验证码</button></td>

</tr>

<tr>

<td>

<form>

<font color="red">*</font>短信验证码：<input type="text" size="">&nbsp;

<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<font color="#CCCCCC" size="-3">请查收手机短信，并填写短信中的验证码</font>

</form>

</td>

</tr>

<tr>

<td>

<form>

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<font size="-1"><input type="checkbox">同意<a href="http://reg.163.com/agreement.shtml" target="_blank">"服务条款"</a>和<a href="http://reg.163.com/agreement_game.shtml" target="_blank">"隐私权相关政策"</a></font>

</form>

</td>

</tr>

<tr>

<td><center><p><form><a href="http://hwwebmail.mail.163.com/js6/main.jsp?sid=SBkCOwLCmHqieLRiJACCTSeUMjEbIWlZ&df=unknow#module=welcome.WelcomeModule%7C%7B%7D" target="_blank"><input type="submit" value="立即注册"></a></form></p></td>

</tr>

</table>

</div>

</td>

<td>

<table background="未标题-1.jpg">

<td><hr width="" size="" align="left"/></td>

<td>

<img src="data:images/微博桌面截图_20160519101859_12.gif"><br />

<form>

<center><font size="-1" color="#6697C9"><input type="checkbox">同时管理所有邮箱<br /><input type="checkbox">随时随地免费收发</font>

</form></center>

</td>

</table>

</td>

</tr>

</table>

<datalist id="phonenumber">

  <option value="+86" label="中国"/>

  <option value="+1">美国</option>

  <option value="+852" label="香港"/>

</datalist>

</body>

</html>

结果：

HTML5练习2的更多相关文章

使用HTML5开发Kinect体感游戏
一.简介我们要做的是怎样一款游戏? 在前不久成都TGC2016展会上,我们开发了一款<火影忍者手游>的体感游戏,主要模拟手游章节<九尾袭来 >,用户化身四代,与九尾进行对决, ...
读书笔记：《HTML5开发手册》--HTML5新的结构元素
读书笔记:<HTML5开发手册> (HTML5 Developer's CookBook) 虽然从事前端开发已有很长一段时间,对HTML5标签也有使用,但在语义化上面理解还不够清晰.之前在 ...
HTML5 Boilerplate - 让页面有个好的开始
最近看到了HTML5 Boilerplate模版,系统的学习与了解了一下.在各种CSS库.JS框架层出不穷的今天,能看到这么好的HTML模版,感觉甚爽.写篇博客,推荐给大家使用. 一:HTML5 ...
戏说HTML5
如果有非技术人员问你,HTML5是什么,你会怎么回答? 新的HTML规范... 给浏览器提供了牛逼能力,干以前不能干的事...(确切地说应该是给浏览器规定了许多新的接口标准,要求浏览器实现牛逼的功能. ...
nw.js桌面软件开发系列第0.1节 HTML5和桌面软件开发的碰撞
第0.1节 HTML5和桌面软件开发的碰撞当我们谈论桌面软件开发技术的时候,你会想到什么?如果不对技术本身进行更为深入的探讨,在我的世界里,有这么多技术概念可以被罗列出来(请原谅我本质上是一个Win ...
Web大前端时代之：HTML5+CSS3入门系列
准备来一波新技术,待续.... Old: 联系源码:https://github.com/dunitian/LoTHTML5 文档下载:https://github.com/dunitian/LoTD ...
07. Web大前端时代之：HTML5+CSS3入门系列~H5 地理位置
Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html 源码:https://github.com/duniti ...
HTML5 介绍
本篇主要介绍HTML5规范的内容和页面上的架构变动. 目录 1. HTML5介绍 1.1 介绍 1.2 内容 1.3 浏览器支持情况 2. 创建HTML5页面 2.1 <!DOCTYPE> ...
HTML5 语义元素(一)页面结构
本篇主要介绍HTML5增加的语义元素中关于页面结构方面的,包含: <article>.<aside>.<figure>.<figcaption>.< ...
HTML5 input元素新的特性
在HTML5中,<input>元素增加了许多新的属性.方法及控件.本文章分别对这三方面进行介绍. 目录 1. 属性 2. 方法 3. 新控件 1. 属性 <input>元素在H ...

随机推荐

etcd3集群管理
目录在什么情况下需要集群的运行时更改集群运行时更改的操作更新一个节点删除一个节点增加一个节点节点迁移和灾难恢复迁移节点灾难恢复在什么情况下需要集群的运行时更改维护和升级多个机器如 ...
P3572 [POI2014]PTA-Little Bird
P3572 [POI2014]PTA-Little Bird 一只鸟从1跳到n.从1开始,跳到比当前矮的不消耗体力,否则消耗一点体力,每次询问有一个步伐限制k,求每次最少耗费多少体力很简短的题目哼. ...
模块型css样式
<div id="dowork"> <div id="dowork_on">۞作业进行中</div> <div id= ...
okhttp 简单用法
1.gradle 依赖 github 中查找最新的 2.MyApplication oncreate 中: @Override public void onCreate () { super.onCr ...
why inline functions must be put in header files?
［why inline functions must be put in header files?］编译中有2个过程:compile.link.先进行compile,compile中把源代码编译成 ...
【leetcode 简单】第六十七题回文链表
请判断一个链表是否为回文链表. 示例 1: 输入: 1->2 输出: false 示例 2: 输入: 1->2->2->1 输出: true 进阶: 你能否用 O(n) 时间复 ...
Q - Phalanx
题目链接:https://vjudge.net/contest/68966#problem/Q 分析:这里的对称并不是指的是关于原矩阵(也就是最大的那一个)主对角线对称,而是对于每一个小的矩阵来说,当 ...
【bzoj题解】1001 狼抓兔子
题目描述现在小朋友们最喜欢"喜羊羊与灰太狼",话说灰太狼抓羊不到,但抓兔子还是比较在行的,而且现在的兔子还比较笨,它们只有两个窝,现在你做为狼王,面对下面这样一个网格的地形: ...
ubuntu16.04 源码方法安装tensorflow
参考博客:http://blog.csdn.net/zhaoyu106/article/details/52793183/,http://blog.csdn.net/u010900574/articl ...
jumpserver安装教程
centos7系统一步一步安装jumpserver 参照官方文档,查找了百度所有的文档,基本上都是按照官方的文档操作的官方文档点我-> 安装jumpserver需注意: 1:网络环境要好,有的 ...

HTML5练习2

HTML5练习2的更多相关文章

随机推荐

热门专题