HTML基础(二)表单
程序员文章站
2022-04-24 16:17:45
...
目录
第二章 HTML第二天
本章要点：
-
Html表单
-
Html 框架(frameset)
-
Html内嵌框架。
一、Html表单
1. 表单
表单用于搜集不同类型的用户输入，表单由不同类型的标签组成，实现一个特定功能的表单区域（比如：注册），首先应该用<form>标签来定义表单区域整体，在此标签中再使用不同的表单控件来实现不同类型的信息输入，具体实现及注释可参照以下伪代码：
<!-- form定义表单区域,action定义表单数据提交的地址，method属性定义提交的方式.-->
<form action="http://www..." method="get">
<!-- label标签定义表单控件的文字标注，input类型为text定义了一个单行文本输入框-->
<p>
<label>姓名：</label><input type="text" name="username" />
</p>
<!-- input类型为password定义了一个密码输入框 -->
<p>
<label>密码：</label><input type="password" name="password" />
</p>
<!-- input类型为radio定义了单选框 -->
<p>
<label>性别：</label>
<input type="radio" name="gender" value="0" /> 男
<input type="radio" name="gender" value="1" /> 女
</p>
<!-- input类型为checkbox定义了单选框 -->
<p>
<label>爱好：</label>
<input type="checkbox" name="like" value="sing" /> 唱歌
<input type="checkbox" name="like" value="run" /> 跑步
<input type="checkbox" name="like" value="swiming" /> 游泳
</p>
<!-- input类型为file定义上传照片或文件等资源 -->
<p>
<label>照片：</label>
<input type="file" name="person_pic">
</p>
<!-- textarea定义多行文本输入 -->
<p>
<label>个人描述：</label>
<textarea name="about"></textarea>
</p>
<!-- select定义下拉列表选择 -->
<p>
<label>籍贯：</label>
<select name="site">
<option value="0">北京</option>
<option value="1">上海</option>
<option value="2">广州</option>
<option value="3">深圳</option>
</select>
</p>
<!-- input类型为submit定义提交按钮
还可以用图片控件代替submit按钮提交，一般会导致提交两次，不建议使用。如：
<input type="image" src="xxx.gif">
-->
<p>
<input type="submit" name="" value="提交">
<!-- input类型为reset定义重置按钮 -->
<input type="reset" name="" value="重置">
</p>
</form>二、Html框架(frameset)
所谓框架便是网页画面分成几个框窗，同时取得多个 URL。只要 <FRAMESET> <FRAME> 即可，而所有框架标记要放在一个总起的 html 档，这个档案只记录了该框架 如何划分，不会显示任何资料，所以不必放入 <BODY> 标记。<FRAMESET> 是用以划分框窗，每一框窗由一个 <FRAME> 标 记所标示，<FRAME>必须在 <FRAMESET> 范围中使用。如下例：
<frameset cols="50%,*">
<frame name="hello" src="up2u.html">
<frame name="hi" src="me2.html">
</frameset> <FRAMESET> 参数设定：
例子：<frameset rows="90,*" frameborder="0" border=0 framespacing="2" bordercolor="#008000"> COLS="90,*" 垂直切割画面(如分左右两个画面)，接受整数值、百分数， * 则代表占用馀下空 间。数值的个数代表分成的视窗数目且以逗号分隔。例如 COLS="30,,50%" 可以 切成三个视窗，第一个视窗是 30 pixels 的宽度，为一绝对分割，第二个视窗是当 分配完第一及第三个视窗後剩下的空间，第三个视窗则占整个画面的 50% 宽度 为 一相对分割。您可自己调整数字。 ROWS="120," 就是横向切割，将画面上下分开，数值设定同上。唯 COLS 与 ROWS 两参数尽量 不要同在一个 <FRAMESET> 标记中 frameborder="0" 设定框架的边框，其值只有 0 和 1 ， 0 表示不要边框， 1 表示要显示边框。（避免使用 yes 或 no ） border="0" 设定框架的边框厚度，以 pixels 为单位。 bordercolor="#008000" 设定框架的边框颜色。 framespacing="5" 表示框架与框架间的保留空白的距离。
三、Html内嵌框架
<iframe>标签会创建包含另外一个html文件的内联框架（即行内框架），src属性来定义另一个html文件的引用地址，frameborder属性定义边框，scrolling属性定义是否有滚动条，代码如下：<iframe src="http://www..." frameborder="0" scrolling="no"></iframe>内嵌框架与a标签配合使用
a标签的target属性可以将链接到的页面直接显示在当前页面的iframe中，代码如下：
<a href="01.html" target="myframe">页面一</a>
<a href="02.html" target="myframe">页面二</a>
<a href="03.html" target="myframe">页面三</a>
<iframe src="01.html" frameborder="0" scrolling="no" name="myframe"></iframe>四、项目实战
l 项目需求分析
l 项目步骤划分
l 项目功能模块的实现
项目需求分析
所谓”需求分析“，是指对要解决的问题进行详细的分析，弄清楚问题的要求，包括需要输入什么数据，要得到什么结果，最后应输出什么.
需求分析是一个项目的开始，主要是弄明白这个项目需要做什么，用来做什么。简单来说就是弄明白这个项目(应用)要从什么点出发达到什么目的。一个好的需求分析是整个项目成功的一半。明白客户的需求，才能时刻清楚要去做什么，如何去做好。
项目需求分析
这个环节是由项目经理完成，项目经理首先和客户进行交流，了解客户的需求，然后分析项目的可行性，如果项目可以被实现，项目经理写出项目需求文档交给设计师完成后续的开发。
页面设计
这个环节主要是UI设计师参与，UI设计师根据产品需求分析文档，对产品的整体美术风格、交互设计、界面结构、操作流程等做出设计。负责项目中各种交互界面、图标、LOGO、按钮等相关元素的设计与制作。
编码
这个部分由程序员来实现。（程序员分为WEB前端开发工程师和后台开发工程师。前端开发人员主要做我们可以在网页上看的见的页面，后台就做一些我们看不见的管理系统以及功能的实现。）程序员根据UI设计师的设计，用编码来完成整个项目的各个功能。
测试
这部分由程序测试员来完成。程序测试员主要就是测试寻找程序还存在的bug，一般来说刚编码完成的程序都是存在问题的，就需要测试人员反复不断的测试并将存在问题的测试结果交给编码人员进行bug的修复。等到几乎所有bug修复完成，这个项目差不多就可以上线了。
维护
程序的维护是整个项目的最后一个阶段，但也是耗时最多，成本最高最高的的一个阶段。程序的维护包括程序上线后后续bug的修复和程序版本的更新。
项目功能模块实现
INDEX.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>英莱特科技IT学院</title>
<link rel="shortcut icon" href="img/InLett-logo.png"/>
</head>
<frameset rows="20%,*" frameborder="0">
<frame noresize="noresize" src="top.html" scrolling="no"/>
<frame src="ContentSection.html" noresize="noresize"/>
</frameset>
</html>
TOP.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body bgcolor="cornflowerblue">
<form>
<table border="0" width="1500" align="center">
<tr height="80">
<td rowspan="2"><img src="C:/Program%20Files/Typora/img/InLett-logo.png" width="100" height="100"/></td>
<td colspan="5">
<h1>英莱特IT学院</h1>
</td>
<td colspan="8" align="right">
<input type="text" placeholder="请输入查询的内容" size="30"/>
<button>搜索</button>
</td>
</tr>
<tr bgcolor="whitesmoke" align="center" height="50">
<td><a href="#"><font color="gray" size="5" face="仿宋">网站首页</font></a></td>
<td><a href="#"><font color="gray" size="5" face="仿宋">免费课程</font></a></td>
<td><a href="#"><font color="gray" size="5" face="仿宋">职业路径</font></a></td>
<td><a href="#"><font color="gray" size="5" face="仿宋">实战课程</font></a></td>
<td><a href="#"><font color="gray" size="5" face="仿宋">技术问答</font></a></td>
<td><a href="#"><font color="gray" size="5" face="仿宋">VIP会员</font></a></td>
<td><a href="#"><font color="gray" size="5" face="仿宋">线上名师</font></a></td>
<td><a href="#"><font color="gray" size="5" face="仿宋">学员作品</font></a></td>
<td><a href="#"><font color="gray" size="5" face="仿宋">就业明星</font></a></td>
<td><a href="#"><font color="gray" size="5" face="仿宋">课程分类</font></a></td>
<td><a href="#"><font color="gray" size="5" face="仿宋">教学服务</font></a></td>
<td><a href="#"><font color="gray" size="5" face="仿宋">师资团队</font></a></td>
<td><a href="#"><font color="gray" size="5" face="仿宋">关于我们</font></a></td>
</tr>
</table>
</form>
</body>
</html>
ContentSection.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body bgcolor="aliceblue">
<table border="0" width="1500" align="center">
<tr>
<td>
<table border="0" width="400" align="right" bgcolor="dimgrey">
<tr height="100">
<td>
<h3>课程分类</h3>
</td>
</tr>
<tr height="60">
<td>
<p>前端开发</p>
</td>
</tr>
<tr height="60">
<td>
<p>后端开发</p>
</td>
</tr>
<tr height="60">
<td>
<p>移动端开发</p>
</td>
</tr>
<tr height="60">
<td>
<p>数据库</p>
</td>
</tr>
<tr height="60">
<td>
<p>云计算&大数据</p>
</td>
</tr>
<tr height="60">
<td>
<p>运维&测试</p>
</td>
</tr>
</table>
</td>
<td>
<img src="C:/Program%20Files/Typora/img/banner_04.png" width="1080" />
<table width="1080">
<tr>
<td align="center">
<img src="C:/Program%20Files/Typora/img/img_01.png" />
</td>
<td align="center">
<img src="C:/Program%20Files/Typora/img/img_02.png" />
</td>
<td align="center">
<img src="C:/Program%20Files/Typora/img/img_03.png" alt="" />
</td>
<td align="center">
<img src="C:/Program%20Files/Typora/img/img_04.png" alt="" />
</td>
<td align="center">
<img src="C:/Program%20Files/Typora/img/img_05.png" alt="" />
</td>
</tr>
<tr>
<td align="center">
Web前端工程师
<br /> 互联网时代很火爆的技术
</td>
<td align="center">
PHP工程师
<br /> 适用广泛，火爆，上升潜力大
</td>
<td align="center">
Android工程师
<br /> 移动设备市场份额高
</td>
<td align="center">
IOS工程师
<br /> 非常泛用的操作系统
</td>
<td align="center">
Java工程师
<br /> 安全，实用，适用广泛
</td>
</tr>
</table>
</td>
</tr>
</table>
<table align="center" border="0" width="1500" bgcolor="white">
<tr align="center">
<td colspan="4">
<h2>实战推荐</h2>
<p>热门就业课程</p>
</td>
</tr>
<tr align="center">
<td>
<img src="C:/Program%20Files/Typora/img/tag_img01.png" width="300" />
<br />
<a href="#"><font face="宋体" size="4" color="black">全网热门Python3入门+进阶更快上手实际开发</font></a>
<br />
<p>全新改版课程 实战 初级</p>
<p><pre><font size="6">￥299.00</font> <input type="button" value="预约"/></pre></p>
</td>
<td>
<img src="C:/Program%20Files/Typora/img/tag_img02.png" width="300" />
<br />
<a href="#"><font face="宋体" size="4" color="black">Android 通用框架设计与完整的电商 APP 开发</font></a>
<br />
<p>全新改版课程 实战 初级</p>
<p><pre><font size="6">￥299.00</font> <input type="button" value="预约"/></pre></p>
</td>
<td>
<img src="C:/Program%20Files/Typora/img/tag_img03.png" width="300" />
<br />
<a href="#"><font face="宋体" size="4" color="black">ThinkPHP 5.0开发微信小程序商场打通全 栈项目架构</font></a>
<br />
<p>全新改版课程 实战 初级</p>
<p><pre><font size="6">￥299.00</font> <input type="button" value="预约"/></pre></p>
</td>
<td>
<img src="C:/Program%20Files/Typora/img/tag_img04.png" width="300" />
<br />
<a href="#"><font face="宋体" size="4" color="black">
Spring Security开发安全的REST服务操作系统</font></a>
<br />
<p>全新改版课程 实战 初级</p>
<p><pre><font size="6">￥299.00</font> <input type="button" value="预约"/></pre></p>
</td>
</tr>
</table>
<table align="center" border="0" width="1500" bgcolor="ghostwhite">
<tr align="center">
<td colspan="4">
<h2>新上好课</h2>
<p>新上就业课程</p>
</td>
</tr>
<tr align="center">
<td>
<img src="C:/Program%20Files/Typora/img/tag_img05.png" width="300" />
<br />
<a href="#"><font face="宋体" size="4" color="black">对接真实数据 从0开发前后端分离企业级 上线项目</font></a>
<br />
<p>全新改版课程 实战 初级</p>
<p><pre><font size="6">￥299.00</font> <input type="button" value="预约"/></pre></p>
</td>
<td>
<img src="C:/Program%20Files/Typora/img/tag_img06.png" width="300" />
<br />
<a href="#"><font face="宋体" size="4" color="black">BAT大咖助力 全面升级Android面试操作系统</font></a>
<br />
<p>全新改版课程 实战 初级</p>
<p><pre><font size="6">￥299.00</font> <input type="button" value="预约"/></pre></p>
</td>
<td>
<img src="C:/Program%20Files/Typora/img/tag_img07.png" width="300" />
<br />
<a href="#"><font face="宋体" size="4" color="black">
SSM到Spring Boot 从零开发校园商铺平 台系统</font></a>
<br />
<p>全新改版课程 实战 初级</p>
<p><pre><font size="6">￥299.00</font> <input type="button" value="预约"/></pre></p>
</td>
<td>
<img src="C:/Program%20Files/Typora/img/tag_img08.png" width="300" />
<br />
<a href="#"><font face="宋体" size="4" color="black">企业级刚需Nginx入门，掌握Nginx配置 +快速搭建</font></a>
<br />
<p>全新改版课程 实战 初级</p>
<p><pre><font size="6">￥299.00</font> <input type="button" value="预约"/></pre></p>
</td>
</tr>
</table>
<table align="center" border="0" width="1500" bgcolor="ghostwhite">
<tr align="center">
<td colspan="4">
<h2>新手入门</h2>
<p>--------零基础课程--------</p>
</td>
</tr>
<tr align="center">
<td colspan="2">
<img src="C:/Program%20Files/Typora/img/tag_img09.png" alt="" width="690" height="100" />
</td>
<td colspan="2">
<img src="C:/Program%20Files/Typora/img/tag_img10.png" alt="" width="690" height="100" />
</td>
</tr>
<tr align="center">
<td>
<img src="C:/Program%20Files/Typora/img/tag_img11.png" width="300" />
<br />
<a href="#"><font face="宋体" size="4" color="black">
编程小白入门 C++远征之起航篇 项目入 门必看</font></a>
<br />
<p>全新改版课程 实战 初级</p>
<p><pre><font size="6">￥299.00</font> <input type="button" value="预约"/></pre></p>
</td>
<td>
<img src="C:/Program%20Files/Typora/img/tag_img12.png" width="300" />
<br />
<a href="#"><font face="宋体" size="4" color="black">编程小白入门 Java C++算法与数据结构精 讲课程</font></a>
<br />
<p>全新改版课程 实战 初级</p>
<p><pre><font size="6">￥299.00</font> <input type="button" value="预约"/></pre></p>
</td>
<td>
<img src="C:/Program%20Files/Typora/img/tag_img13.png" width="300" />
<br />
<a href="#"><font face="宋体" size="4" color="black">
编程小白入门HTML5与CSS3实现动态网 页项目开发</font></a>
<br />
<p>全新改版课程 实战 初级</p>
<p><pre><font size="6">￥299.00</font> <input type="button" value="预约"/></pre></p>
</td>
<td>
<img src="C:/Program%20Files/Typora/img/tag_img14.png" width="300" />
<br />
<a href="#"><font face="宋体" size="4" color="black">编程小白入门PHP从基础语法到原生项目 开发项目操作</font></a>
<br />
<p>全新改版课程 实战 初级</p>
<p><pre><font size="6">￥299.00</font> <input type="button" value="预约"/></pre></p>
</td>
</tr>
</table>
<table align="center" border="0" width="1500" bgcolor="ghostwhite">
<tr align="center">
<td colspan="4">
<h2>技能提升</h2>
<p>--------学习增值进阶--------</p>
</td>
</tr>
<tr align="center">
<td colspan="2">
<img src="C:/Program%20Files/Typora/img/tag_img15.png" alt="" width="690" height="100" />
</td>
<td colspan="2">
<img src="C:/Program%20Files/Typora/img/tag_img16.png" alt="" width="690" height="100" />
</td>
</tr>
<tr align="center">
<td>
<img src="C:/Program%20Files/Typora/img/tag_img17.png" width="300" />
<br />
<a href="#"><font face="宋体" size="4" color="black">聚焦Python分布式爬虫必学框架打造搜索 引擎Scrapy</font></a>
<br />
<p>全新改版课程 实战 初级</p>
<p><pre><font size="6">￥299.00</font> <input type="button" value="预约"/></pre></p>
</td>
<td>
<img src="C:/Program%20Files/Typora/img/tag_img18.png" width="300" />
<br />
<a href="#"><font face="宋体" size="4" color="black">课程进阶Android高级面试 10大开源框架 源码解析</font></a>
<br />
<p>全新改版课程 实战 初级</p>
<p><pre><font size="6">￥299.00</font> <input type="button" value="预约"/></pre></p>
</td>
<td>
<img src="C:/Program%20Files/Typora/img/tag_img19.png" width="300" />
<br />
<a href="#"><font face="宋体" size="4" color="black">
Java SpringBoot Spring Boot带前后端 企业级博客系统</font></a>
<br />
<p>全新改版课程 实战 初级</p>
<p><pre><font size="6">￥299.00</font> <input type="button" value="预约"/></pre></p>
</td>
<td>
<img src="C:/Program%20Files/Typora/img/tag_img20.png" width="300" />
<br />
<a href="#"><font face="宋体" size="4" color="black">Android高级面试 10大开源框架源码解析 项目实战</font></a>
<br />
<p>全新改版课程 实战 初级</p>
<p><pre><font size="6">￥299.00</font> <input type="button" value="预约"/></pre></p>
</td>
</tr>
</table>
<table border="0" width="1500" align="center" bgcolor="cornflowerblue">
<tr align="center">
<td colspan="4">
<h1>明星导师</h1>
<p>--------明星公开新课--------</p>
</td>
</tr>
<tr align="center">
<td>
<img src="C:/Program%20Files/Typora/img/teacher_01.jpg" width="300" />
</td>
<td>
<img src="C:/Program%20Files/Typora/img/teacher_02.jpg" width="300" />
</td>
<td>
<img src="C:/Program%20Files/Typora/img/teacher_03.jpg" width="300" />
</td>
<td>
<img src="C:/Program%20Files/Typora/img/teacher_04.jpg" width="300" />
</td>
</tr>
</table>
<table border="0" width="1500" align="center">
<tr>
<td colspan="2">
<h2>|热门话题</h2>
<hr />
</td>
<td colspan="2">
<h2>|手记文章</h2>
<hr />
</td>
<td colspan="2">
<h2>|相关问答</h2>
<hr />
</td>
</tr>
<tr>
<td>
<img src="C:/Program%20Files/Typora/img/tag_img21.jpg" />
</td>
<td>
是时候说说 #挨踢狗们の国庆假期#了 眼瞅着举国欢庆的国庆节假期就要来啦！在座各位挨踢狗们准备如何度过这鸡冻人心的小长假呢？不管是自备泡面の8天宅家计划...
</td>
<td>
<img src="C:/Program%20Files/Typora/img/tag_img22.jpg" />
</td>
<td>
探究Java虚拟机栈—Java进阶 前言Java 虚拟机的内存模型分为两部分：一部分是线程共享的，包括 Java 堆和方法区；另一部分是线程私有的，包...
</td>
<td>
<img src="C:/Program%20Files/Typora/img/tag_img23.jpg" />
</td>
<td>
不使用 JS 匿名函数的三个理由 无论你在什么时候读代码，您都必须注意到匿名函数。有时它们被称为 lambda，有时是匿名函数，不管怎样，我认为他们...
</td>
</tr>
<tr>
<td colspan="2">
<ul>
<li>
<a href="#">
<font size="4" color="darkslateblue">iOS自动布局框架-Masonry详解</font>
</a>
</li>
<br />
<li>
<a href="#">
<font size="4" color="darkslateblue">给Java新手的一些建议——Java知识点归纳(Java基础部分)</font>
</a>
</li>
<br />
<li>
<a href="#">
<font size="4" color="darkslateblue">给一个新手程序员的建议</font>
</a>
</li>
<br />
<li>
<a href="#">
<font size="4" color="darkslateblue">servlet+ajax实现智能搜索框提示</font>
</a>
</li>
</ul>
</td>
<td colspan="2">
<ul>
<li>
<a href="#">
<font size="4" color="darkslateblue">iOS自动布局框架-Masonry详解</font>
</a>
</li>
<br />
<li>
<a href="#">
<font size="4" color="darkslateblue">给Java新手的一些建议——Java知识点归纳(Java基础部分)</font>
</a>
</li>
<br />
<li>
<a href="#">
<font size="4" color="darkslateblue">给一个新手程序员的建议</font>
</a>
</li>
<br />
<li>
<a href="#">
<font size="4" color="darkslateblue">servlet+ajax实现智能搜索框提示</font>
</a>
</li>
</ul>
</td>
<td colspan="2">
<ul>
<li>
<a href="#">
<font size="4" color="darkslateblue">iOS自动布局框架-Masonry详解</font>
</a>
</li>
<br />
<li>
<a href="#">
<font size="4" color="darkslateblue">给Java新手的一些建议——Java知识点归纳(Java基础部分)</font>
</a>
</li>
<br />
<li>
<a href="#">
<font size="4" color="darkslateblue">给一个新手程序员的建议</font>
</a>
</li>
<br />
<li>
<a href="#">
<font size="4" color="darkslateblue">servlet+ajax实现智能搜索框提示</font>
</a>
</li>
</ul>
</td>
</tr>
<tr bgcolor="black" align="center">
<td colspan="6">
<pre><font size="5" face="宋体" color="white">首页 热门课程 职业路径 实战课程 文章问答 </font></pre>
</td>
</tr>
<tr bgcolor="black">
<td colspan="4">
<pre><font size="4" face="宋体" color="white">
InLett科技
扫查看手机版网站
©2019 - 陕西科技网站 版权所有
手机版 |本站仅供内部使用 | 管理登录
</font></pre>
</td>
<td colspan="2" align="center">
<img src="C:/Program%20Files/Typora/img/%E5%AE%98%E6%96%B9%E5%85%AC%E4%BC%97%E5%8F%B7.jpg" alt="" width="100" height="100" />
</td>
</tr>
</table>
</body>
</html>
上一篇： 老子不温柔