学习HTML简单设计登录网页

首先我们来看一下成果

这是一个模仿一个婚介网站登陆注册网页来设计的单纯HTML语言完成的网页

1，框架（表格）

如图

我们简单地把页面分成列数为二的表格这里就需要表格的知识

表格由 <table> 标签来定义。每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。

2，输入类型

如网页展示所示，网页中所有需要外设键入的信息都是HTML的输入类型

输入类型：text（文本框）

<input type="text"> 定义供文本输入的单行输入字段：

实例

<tr><!--第一行--><td>姓名</td><td><input type="text" value="请输入姓名"></td></tr>

效果

输入类型：submit（上传）

<input type="submit"> 定义提交表单数据至表单处理程序的按钮。

表单处理程序（form-handler）通常是包含处理输入数据的脚本的服务器页面。

在表单的 action 属性中规定表单处理程序（form-handler）

例：

<tr><td></td><td><input type="submit" value="免费注册"></td>
</tr>

效果：

输入类型: radio（单选按钮）

<input type="radio"> 定义单选按钮。

Radio buttons let a user select ONLY ONE of a limited number of choices:

实例

 <tr><!--第二行--><td>性别</td><td><input type="radio" name="sex" id="nan"> <label for="nan">男</labe><input type="radio" name="sex" id="nv"> <label for="nv">女</label></td></tr>

效果

输入类型: checkbox（复选框）

<input type="checkbox"> 定义复选框。

复选框允许用户在有限数量的选项中选择零个或多个选项。

<tr><!--第六行--><td>喜欢类型</td><td><input type="checkbox" id="fupo"> <label for="fupo">富婆</labe><input type="checkbox" id="xiaohua"> <label for="xiaohua">校花</labe><input type="checkbox" id="yujie"> <label for="yujie">御姐</labe><input type="checkbox" id="luoli"> <label for="luoli">萝莉</labe><input type="checkbox" id="xiaoxianrou"> <label for="xiaoxianrou">小鲜</label><input type="checkbox" id="dashu"> <label for="dashu">中年大叔</labe><input type="checkbox" id="ruya"> <label for="ruya">儒雅</labe><input type="checkbox" id="jirou"> <label for="jirou">肌肉</labe></td></tr>

效果

3，全部代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>登陆页面</title><style>/* 网页元素 */h4{color: red;}</style>
</head>
<body><h4>青春不常在，抓紧谈恋爱</h4><table width="650" border="0"><tr><!--第一行--><td>姓名</td><td><input type="text" value="请输入姓名"></td></tr><tr><!--第二行--><td>性别</td><td><input type="radio" name="sex" id="nan"> <label for="nan">男</labe><input type="radio" name="sex" id="nv"> <label for="nv">女</label></td></tr><tr><!--第三行--><td>年龄</td><td><select><option>--请选择年份--</option><option>2000</option><option>2001</option><option>2002</option><option>2003</option><option>2004</option></select><select><option>--请选择月份--</option><option>1</option><option>2</option><option>3</option><option>4</option><option>5</option><option>6</option><option>7</option><option>8</option><option>9</option><option>10</option><option>11</option><option>12</option></select><select><option>--请选择日--</option><option>1</option><option>2</option><option>3</option><option>4</option><option>5</option><option>6</option><option>7</option><option>8</option><option>9</option><option>10</option><option>11</option><option>12</option><option>13</option><option>14</option><option>15</option><option>16</option><option>17</option><option>18</option><option>19</option><option>20</option><option>21</option><option>22</option><option>23</option><option>24</option><option>25</option><option>26</option><option>27</option><option>28</option><option>29</option><option>30</option><option>31</option></select></td></tr><tr><!--第四行--><td>所在地区</td><td><input type="text" value="输入详细地址"></td></tr><tr><!--第五行--><td>学历</td><td><input type="text" value="博士后"></td></tr><tr><!--第六行--><td>喜欢类型</td><td><input type="checkbox" id="fupo"> <label for="fupo">富婆</labe><input type="checkbox" id="xiaohua"> <label for="xiaohua">校花</labe><input type="checkbox" id="yujie"> <label for="yujie">御姐</labe><input type="checkbox" id="luoli"> <label for="luoli">萝莉</labe><input type="checkbox" id="xiaoxianrou"> <label for="xiaoxianrou">小鲜肉</label><input type="checkbox" id="dashu"> <label for="dashu">中年大叔</labe><input type="checkbox" id="ruya"> <label for="ruya">儒雅</labe><input type="checkbox" id="jirou"> <label for="jirou">肌肉</labe></td></tr><tr><!--第七行--><td>自我介绍</td><td><textarea>个人简介</textarea></td></tr><tr><td></td><td><input type="submit" value="免费注册"></td></tr><tr><td></td><td><input type="checkbox" checked="checked"> 我已阅条款并同意注册</td></tr><tr><td></td><td><a href="#" target="_blank">我是会员，立即登录></a></td></tr><tr><td></td><td><h5>我承诺</h5><ul><li>我年满十八周岁</li><li>我单身</li><li>我保证认真对待遇见的每一个人</li></ul></td></tr></table></body>
</html>

学习HTML简单设计登录网页相关推荐

php与html网页制作,web 一个简单地三级网页的设计和编写，html+css，适合学习制作的新手 WEB(ASP,PHP,...) 238万源代码下载- www.pudn.com...
文件名称: web下载收藏√ [ 5 4 3 2 1 ] 开发工具: HTML 文件大小: 4716 KB 上传时间: 2013-06-25 下载次数: 7 提供者: ericc 详细 ...
div+css静态网页设计电商购物网站设计(55页) 电商网页设计制作简单静态HTML网页作品购物网页作业成品学生商城网站模板
HTML5期末大作业:电商购物网站设计--电商购物网站设计(55页) 电商网页设计制作简单静态HTML网页作品购物网页作业成品学生商城网站模板文章目录 HTML5期末大作业:电商购物网站设计- ...
HTML+CSS+JS商城网站设计——蛋糕团购商城模板 (4页) 蛋糕团购网页设计制作简单静态HTML网页作品商城网页作业成品网购网站模板
HTML5期末大作业:蛋糕团购商城网站设计--蛋糕团购商城模板 (4页) 蛋糕团购网页设计制作简单静态HTML网页作品商城网页作业成品一.作品展示二.文件目录三.代码实现 <!doct ...
一个简单的登录注册网页的实现
一个简单的登录注册网页的实现通过标签让标签内的内容居中显示,再通过标签中的method属性来设置请求方式为post(一般涉及密码等机密数据都用post请求):再通过action来设置请求地址.这其 ...
学生网课网页设计成品在线视频学习类网页制作三层结构网页模板静态HTML注册登录网页模板学生毕业设计网页制作作品网校类网页代制做
学生在线网课网页设计网页知识点网页作品介绍网页代码展示代码展示登录页面部分代码展示头部区域代码演示小导航代码演示网页效果预览首页效果表单页面详情页面作品地址网页知识点 DIV ...
咖啡网页设计作品简单DIV学生网页设计成品 HTML网页学生网页制作模板下载
咖啡网页设计作品网页制作介绍网页首页效果网页下载方式网页制作介绍咖啡主题大学生网页设计作品,共10个页面,无任何复杂技术及特效,页面宽度1200px,顶部导航使用CSS制作了鼠标经过白色效果 ...
HTML5期末大作业：电商购物网站设计——电商购物网站设计(55页) 电商网页设计制作简单静态HTML网页作品购物网页作业成品学生商城网站模板
HTML5期末大作业:电商购物网站设计--电商购物网站设计(55页) 电商网页设计制作简单静态HTML网页作品购物网页作业成品学生商城网站模板常见网页设计作业题材有个人. 美食. 公司. 学 ...
简单保护动物网页制作stu-works.com学生保护动物网页设计作品HTML 濒危动物静态网页成品下载
网页介绍保护动物网页设计作品内容围绕濒危动物制作,网页作品包括网站首页.濒危动物定义.濒危动物现状.濒危原因.濒危动物保护.中国珍惜动物共计6个页面. 网页采用DIV CSS布局制作,顶部导航及BA ...
HTML+CSS大作业——旅游—我的家乡新密(15页)含论文新密旅游网页设计制作简单静态HTML网页作品我的家乡网页作业成品学生旅游网站模板
HTML5期末大作业:我的家乡网站设计--旅游-我的家乡新密(15页)含论文新密旅游网页设计制作简单静态HTML网页作品我的家乡网页作业成品学生旅游网站模板常见网页设计作业题材有个人. 美 ...