整篇文章分为两个模块：
1.老师给的前四个截图；
2.基础测试：https://www.w3school.com.cn/quiz/quiz.asp?quiz=html虽然有的题好像没有更新，不过整体还是一个不错的检验；
1、人人网注册
- 原图如下：
- 代码：
<!--
第一段:实现人人网标志；
左边浮动：将 algin 的属性设为 left
因为图片截的偏小，所以此处标题用 3 级，并且将 renren.com 设置为原先 1%
-->
<!--第二部分为一段文本，此处采用段落输入-->
<!--
第三部分为注册信息：
1. 电子邮箱：表单 input 元素 type 为 email 采用正则表达式 pattern 检查元素
邮箱的正则表达式：([\\w-\\.]+)@((\\[[0-9]{1,3}\\.[0-9]{1,3}\\.[0-9]{1,3}\\.)|(([\\w-]+\\.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(\\]?)$
2.密码：表单 input 元素 type 为 password 采用正则表达式 pattern 检查元素，会用 placeholder 提示密码格式
密码要求：可以是纯数字，也可以是纯字母，也可以是数字+字母,6-16 位
密码的正则表达式：^[0-9a-zA-Z]{6,16}$
3. 姓名： 表单imput 元素 type 为 text 采用正则表达式 pattern 检查元素；
名字的正则表达式：^[\u4e00-\u9fa5.·]{0,}$
4.性别：表单 input 元素 type 属性为 radio（单选框） ，并设置默认选择 男
5.生日：表单 input 元素 type 属性为number（下拉框号不会操作），并设置 年 默认为1991 最小值为 1950 最大值为 2019
月默认为11月 最小值 1 最大值 12 ； 日期最小值为1 最大值为 31（此处暂时号不会处理2月29或者其他不合适的日期）
6.一句话直接输入；
7.身份选择：表单 input 元素 type 属性为 select（下拉框）并设置默认为 选择身份 其他选项为 医生 老师
8.验证码 ：不会
9.图片按钮：表单 input 元素 type 属性 submit 采用 标注for = name 将submit 链接到 图片上，并将其隐藏
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>人人网注册界面</title>
</head>
<body>
<!--第一段实现人人 网标志；-->
<p >
<img src="../statics/imgs/人人网.jpg" align="left">
<h3><strong><font color="blue">人人网<br/><font size="1%"><small>renren.com</small></font></font></strong></h3>
</p>
<!--第二部分为一段文本，此处采用段落输入-->
<p>
<small>人人网，中国<strong>最真实、最有效</strong>的社会平台，加入人人网，找回老朋友，结交新朋友。</small>
</p>
<!--第三部分为注册信息：-->
<form action="">
电子邮箱：<input type="email" name="电子邮箱" required pattern="^([\\w-\\.]+)@((\\[[0-9]{1,3}\\.[0-9]{1,3}\\.[0-9]{1,3}\\.)|(([\\w-]+\\.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(\\]?)$"><br/>
<br/>设置密码：<input type="password" name="设置密码" required pattern="^[0-9a-zA-Z]{6,16}$" placeholder="数字，字母，数字+字母,6-16 位"><br/>
<br/>真实姓名：<input type="text" name="name" required pattern="^[\u4e00-\u9fa5.·]{0,}$"><br/>
<br/>性别：<input type="radio" name="性别" value="男" checked>男
<input type="radio"name="性别" value="女">女 <br/>
<br/>生日：<input type="number" name="年" min="1950" max="2019" value="1991" step="1">年
<input type="number" name="月" min="1" max="12" value="11" step="1">月
<input type="number" name="日" min="1" max="31" value="30" step="1">日<br/><br/>
<br/><label for="name"><img src="../statics/imgs/注册按钮.jpg"></label>
<input type="submit" name="注册" value="立即注册" id="name" hidden>
</form>
</body>
</html>
- 测试结果：这是测试的结果，没有验证码，还有生日那一块是手动输入或者步长为1的调试，下拉框不会用；注册信息也不会反会成为文本文档，目前只能在该网页的链接处看；
2. 163
- 原图如下：
- 代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>163登录界面</title>
</head>
<body>
<!--第一段 头部信息
三行两列 合并单元格-->
<p>
<table cellpadding="0" cellspacing="0">
<tr >
<td align="center" style="vertical-align: bottom"><h3 style="font-size: 180%; color: red;vertical-align: bottom"><strong>163</strong></h3></td>
<td align="center"><h6 style="font-size: 60%; vertical-align: bottom"><strong>网易免费邮箱<br/>mail.163.com</strong></h6></td>
<td rowspan="2">
免费邮 企业邮 VIP邮箱 帮助</td>
</tr>
<tr>
<td align="center" colspan="2">中文邮箱第一品牌</td>
</tr>
</table>
<table cellpadding="0" cellspacing="0">
<tr>
<td>
<h3 style="font-size: 140%; color: blue;font-family: 'Times New Roman'"><strong>IMAP服务</strong><img src="../statics/imgs/iPhone.jpg"></h3>
<h4 style="font-size: 100%; color: blue;font-family: 'Times New Roman'"><strong>视频 + 图文，手把手教您设置IMAP</strong></h4>
<img src="../statics/imgs/163.jpg" align="center"><br/>
<ul>
<li><small>163 / 126 / yeah 三大免费邮箱均默认开放</small></li>
<li><small>全面支持 iPhone / iPad 及 Android 等系统</small></li>
<li><small>客户端、手机与网页，实现发送、阅读邮件<br/>立即同步普通登录手机号登录</small></li>
</ul>
</td>
<td>
<p>
<img src="../statics/imgs/箭头.jpg" align="left"><strong>普通登录</strong>
</p>
<p>
用户名：<input type="text" name="用户名" required >@163.com<br/>
</p>
<p>
密 码：<input type="password" name="密码" required><br/>
</p>
<p>
版 本：
<select >
<option >默认</option>
<option>1.0</option>
<option>2.0</option>
</select>
</p>
<p align="center">
<input type="checkbox" name="radio" value="自动登录" >自动登录
<input type="checkbox" name="radio" value="SSL" checked>SSL
</p>
<p align="center">
<input type="submit" name="submit" value="登录" >
<input type="submit" name="submit" value="注册" >
</p>
</td>
</tr>
</table>
<table cellspacing="0" cellpadding="0">
<tr>
<td>
<img src="../statics/imgs/网易163.jpg">
关于网易 免费邮 官方博客 客户服务 隐私策略
| 网易公司版权所有 © 2015-2018
</td>
</tr>
</table>
</p>
</body>
</html>
- 结果：此处是用表格拼接，结果如下所示，红色163那一块和中文邮箱第一品牌拼接有些不够紧凑，因为此处使用的是标题，然后对其进行靠近底部排列但是没效果，下来就是关于登录那一块，缺少一个边框，并且离左边有点近，因为还是在表格中，还是不会设置；
3. 一个注册页面
- 原图
- 代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>一个注册页面</title>
</head>
<body>
<p>
登入 注册
</p>
<hr/>
<p>
<input type="button" style="width: 4.8%" name="button" value="手机" align="center">
<input type="text" name="text" required>
</p>
<p>
<input type="button"style="width: 4.8%" name="button" value="图形码" align="center">
<input type="text" name="text" required>
</p>
<p>
<input type="button" style="width: 4.8%"name="button" value="验证码" align="center">
<input type="text" name="text" required placeholder="请输入手机短信验证码">
<input type="button" name="button" value="获取验证码" align="center" style="color: blue">
</p>
<p>
<input type="button" style="width: 4.8%" name="button" value="昵称" align="center">
<input type="text" name="text" required> 你在社区的名字
</p>
<p>
<input type="button" style="width: 4.8%" name="button" value="密码" align="center">
<input type="text" name="text" required> 6-16个字符
</p>
<p>
<form>
<input type="button" name="button" value="确认密码" align="center" >
<input type="text" name="text" required>
</form>
</p>
<p>
<img src="../statics/imgs/对号.jpg" align="center"> 同意用户服务条款
</p>
<p>
<form >
<label for="name"><img src="../statics/imgs/立即注册.jpg"></label>
<input type="submit" name="注册" id="name" hidden>
</form>
</p>
</body>
</html>
- 结果：同样的图形验证码还没有，其次就是与原图两个标签之间是无缝对接，这还是有缝隙，最后立即注册哪个还是用标注（for=“name”）实现的；
4. 阿里巴巴注册页面
- 原图
- 代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>阿里巴巴注册界面</title>
</head>
<body>
<p>
<img src="../statics/imgs/阿里巴巴.jpg" align="left"> | 免费注册
</p>
<p style="color: blue">
<u>登录</u>|<u>阿里巴巴首页</u>|<u>客服中心</u>|
<a href="https://www.alibabagroup.com/cn/contact/contacts#slide_customer" target="_blank">
<img src="../statics/imgs/客服.jpg" ></a><u>提建议</u>
</p>
<p>
如果需要帮助，请咨询
<a href="https://www.alibabagroup.com/cn/contact/contacts#slide_customer" target="_blank">
<input type="button" name="阿里在线" value="阿里在线" onclick="window.location.href('链接')"></a>
或拨打400-800-1688
</p>
<p>
<form>
电子邮箱：<input type="text" name="电子邮箱" required pattern="^([\\w-\\.]+)@((\\[[0-9]{1,3}\\.[0-9]{1,3}\\.[0-9]{1,3}\\.)|(([\\w-]+\\.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(\\]?)$">
</form>
</p>
<p>
<form>
会员登录名：<input type="text" name="会员登录名" required>
</form>
</p>
<p>
<form>
密码：<input type="text" name="text" required pattern="^[0-9a-zA-Z]{6,16}$" placeholder="数字，字母，数字+字母,6-16 位">
</form>
</p>
<p>
<form>
再次输入密码：<input type="text" name="text" required >
</form>
</p>
<p>
<form>
会员身份：<input type="radio" name="会员身份" value="买家" checked >买家
<input type="radio" name="会员身份" value="卖家" >卖家
<input type="radio" name="会员身份" value="两者都是" >两者都是
</form>
</p>
<form>
验证码：<input type="text" name="text" required ><img src="../statics/imgs/验证码.jpg">
<u><font color="blue"><small>看不清楚？换一张</small></font></u>
</form>
<p>
<form>
<label for="name">
<img src="../statics/imgs/同意并注册.jpg" >
</label>
<input type="submit" name="submit" required id="name" hidden>
</form>
</p>
<form>
<textarea name="textarea" cols="20" rows="5" style="font-size: 50%">
阅读阿里巴巴公司（阿里巴巴）服务条款协议看不清后边是什么了
</textarea>
</form>
<p style="color: blue">
<u>阿里巴巴版权所有 2015-2018著作权与商标声明</u>|<u>法律声明</u>|<u>服务条款</u>|<u>隐私声明</u>|
<u>联系我们</u>|<u>网站地图</u>|<u>产品<br/>体验中心</u>|
</p>
</body>
</html>
- 结果演示：左上边的图标是图片，因为不会画，而且也影响到黄色的阿里巴巴四个字和下边的英文；客服图片找不到，用淘宝代替，做成图片超链接可以直接反问淘宝的客服界面；还有下边的阿里在线，不知道原图用的什么，这里是用一个普通按钮结合标注也可以访问淘宝客服，下来就是表单里边的东西，都是常规操作，在163注册中写的较为详细，这些都差不多，这一块验证码不会整，下边的图是图片，再下来就是注册哪个，找不到合适的图，或者可以试试submit更改颜色与value；
5. w3c 的基础测试题
扫一扫
1559
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
