web前端：html
一、理解表单的作用
1、web 应用程序不仅仅是给用户显示数据，还应该给用户提供一个可以输入数据的图形用户界面。表单的主要作用在于在网页上提供一个图形用户界面，已采集和提交用户输入的数据。
2、html表单元素和属性可以分为两种类型：
（1）定义表单整体结构，使浏览器知道如处理表单数据的元素；
(2) 创建输入控件的元素。
3、最小的表单格式
<form>标记最小格式（<form action=“表单处理程序的url” method=“get|post”>）
4、http get协议
(http：//www.example.com/forums.cgi?id=1234&data=guest)
http post协议
http post 方法将数据在http数据流中编码发送。因此，对用户来说是不可见的，是一个较为安全的传递数据的方法，但是比较难实现。但是html表单和很多其它web技术使通过post传递数据变的很容易
5、使用输入控件
1 inpu：该元素使用type属性定义不同的控件，包括文本和口令字段、复选框、单选框、提交和重置按钮、隐藏域和图像
2 select和option：二者组合使用，创建一个下拉列表
3 textarea：创建一个多行输入的文本框
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<table border="1">
<tr>
<th colspan="4" bgcolor="aqua" >机票信息查询</th>
</tr>
<tr>
<td bgcolor="#7fffd4">查询年份：</td>
<td style="width: 400px" bgcolor="#a9a9a9">
<select name="year" id="year">
<option value="">2014</option>
<option value="">2015</option>
<option value="">2016</option>
<select>
机票状态
<select name="year" id="year" style="width: 100px">
<option value=""></option>
</select>
</td>
<td bgcolor="#7fffd4">模糊查询：</td>
<td style="width: 400px" bgcolor="#a9a9a9">
<input type="text" id="firstname">
</td>
</tr>
<tr>
<td bgcolor="#7fffd4">支付方式：</td>
<td bgcolor="#a9a9a9">
<select name="food" id="food" style="width: 150px"></select></td>
<td bgcolor="#7fffd4">航空公司：</td>
<td bgcolor="#a9a9a9">
<select name="food" id="food" style="width: 200px"></select></td>
</tr>
<tr>
<td bgcolor="#7fffd4">机票经手：</td>
<td bgcolor="#a9a9a9">
<select name="food" id="food" style="width: 250px"></select></td>
<td bgcolor="#7fffd4">未尽事宜：</td>
<td bgcolor="#a9a9a9">
<input type="checkbox" name="city" id="sh" style="width: 20px" />
<input type="text" id="firstname"/></td>
</tr>
<tr>
<td bgcolor="#7fffd4">证件状态：</td>
<td bgcolor="#a9a9a9"> 寄票日期 </td>
<td bgcolor="#7fffd4">出票机构：</td>
<td bgcolor="#a9a9a9">
<select name="food" id="food" style="width: 200px"></select></td>
</tr>
<tr>
<td bgcolor="#7fffd4">订票日期：</td>
<td bgcolor="#a9a9a9">
<input type="text" id="good" style="width: 50px" />
<input type="text" style="width: 50px" /></td>
<td bgcolor="#7fffd4">出发日期：</td>
<td bgcolor="#a9a9a9">
<input type="text" id="good" style="width: 50px" />
<input type="text" style="width: 50px" /></td></td>
</tr>
<tr>
<td bgcolor="#7fffd4">出票日期：</td>
<td bgcolor="#a9a9a9">
<input type="text" id="good" style="width: 50px" />
<input type="text" style="width: 50px" /></td></td>
<td bgcolor="#7fffd4">应收结清：</td>
<td bgcolor="#a9a9a9">
<select name="good" id="good" style="width: 250px"></select></td>
</tr>
<tr>
<td bgcolor="#7fffd4">订票号码：</td>
<td bgcolor="#a9a9a9">
<input type="text" style="width: 200px"/></td>
<td bgcolor="#7fffd4">事故状态：</td>
<td bgcolor="#a9a9a9">
<select name="good" style="width: 100px"></select></td>
</tr>
<tr>
<td bgcolor="#7fffd4">所在国家：</td>
<td bgcolor="#a9a9a9">
<select name="good" style="width: 150px"></select></td>
<td bgcolor="#7fffd4">王朝号码：</td>
<td bgcolor="#a9a9a9">
<input type="text" style="width: 200px"/></td>
</tr>
<tr>
<td bgcolor="#7fffd4">机票号码：</td>
<td bgcolor="#a9a9a9">
<input type="text" style="width: 200px"/></td>
<td bgcolor="#7fffd4">价格代码：</td>
<td bgcolor="#a9a9a9">
<input type="text" style="width: 70px"/>
<button>每页行数：</button>
<input type="text" style="width: 50px"/></td>
</tr>
<tr>
<td bgcolor="#7fffd4">成都收款：</td>
<td bgcolor="#a9a9a9">
<input type="checkbox" name="city" id="sh" style="width: 20px"/>
已收 出票经手
<select name="food" style="width: 50px"></select>
</td>
<td bgcolor="#7fffd4">对账核实：</td>
<td bgcolor="#a9a9a9">
<select name="food" style="width: 70px" ></select></td>
</tr>
<tr>
<td bgcolor="#7fffd4">利润限定：</td>
<td bgcolor="#a9a9a9">
<input type="checkbox" style="width: 20px"/>仅显示利润小于10</td>
<td bgcolor="#7fffd4">指定列表：</td>
<td bgcolor="#a9a9a9">
<input type="radio" id="gender" value="male" >出票</input>
<input type="radio" id="gender" value="male" >收款</input>
<input type="radio" id="gender" value="male" >地址</input>
<input type="radio" id="gender" value="male" >联系</input>
<input type="radio" id="gender" value="male" >销售</input>
<input type="radio" id="gender" value="male" >收款2</input>
</td>
</tr>
<tr>
<th colspan="4" bgcolor="aqua">退款选项</th>
</tr>
<tr>
<td bgcolor="#7fffd4">退票清单：</td>
<td bgcolor="#a9a9a9">
<input type="checkbox" style="width: 20px"/>只显示退款信息
</td>
<td bgcolor="#7fffd4">入账未到：</td>
<td bgcolor="#a9a9a9"><input type="checkbox" style="width: 20px"/></td>
</tr>
<tr>
<td bgcolor="#7fffd4">出账未到：</td>
<td bgcolor="#a9a9a9"><input type="checkbox" style="width: 20px"/></td>
<td bgcolor="#7fffd4">退款经手：</td>
<td bgcolor="#a9a9a9"><select name="food" style="width: 200px" ></select>
</td>
</tr>
<tr>
<th colspan="4" bgcolor="#ff7f50"><button>确定</button> <button>退出</button></th>
</tr> </table>
</body>
</html>
<h1>标题</h1>
<p>段落</p>
<blockquote>引用</blockquote>
<ul>无序列表</ul>
<ol>有序列表</ol>
<dl>定义列表</dl>
<pre>预定义标签</per>
<div>相当于区域块</div>
<span>针对一段文字</span> <a>行内元素</a>
块级元素与内嵌元素
【块级元素：div，blockquote，列表元素（dl，ol，ul），fiekdset，from，h1-h6，hr，p，pre，table 等】
【内嵌元素：span，a，img，label，所有的表单输入元素，iframe，object 等】
1 如果是内嵌元素，下一个元素就显示在该元素同一行上的后续位置。
2 如果是块级元素，下一个元素就在浏览器下一行显示。
3 元素中的文本按照元素的级别，浏览器使用不同大小的默认字体表示。
web前端：html的更多相关文章
- Web前端需要熟悉大学里【高大上】的计算机专业课吗？
作为一名刚刚大学毕业,进入新的学习阶段的研究生,我必须说大学的专业课非常重要!不管你信不信,事实就是如此! 一.大学学习的专业课非常重要,它决定了我们能走到什么高度 前端的发展非常快,我常常觉得刚刚关 ...
- web前端开发分享-目录
1. web前端开发分享-css,js入门篇 2. web前端开发分享-css,js进阶篇 3. web前端开发分享-css,js提高篇 4. web前端开发分享-css,js工具篇 5. web前端 ...
- Web前端温故知新-CSS基础
一.CSS定义与编写CSS 1.1 CSS的定义 全名:Cascading Style Sheets -> 层叠样式表 定义:CSS成为层叠样式表,它主要用于设置HTML页面中的文本内容(字体. ...
- web前端的春天 or 噩梦
「 微信应用号可以做什么」 简单说,微信"小程序"可以为开发者提供基于微信的表单.导航.地图.媒体和位置等开发组件,让他们在微信的网页里构建一个 HTML 5 应用.同时微信还开放 ...
- Web 前端开发精华文章推荐（jQuery、HTML5、CSS3）【系列十二】
2012年12月12日,[<Web 前端开发人员和设计师必读文章>系列十二]和大家见面了.梦想天空博客关注 前端开发 技术,分享各种增强网站用户体验的 jQuery 插件,展示前沿的 HT ...
- 也许你需要点实用的-Web前端笔试题
之前发的一篇博客里没有附上答案,现在有空整理了下发出来,希望能帮助到正在找工作的你,还是那句话:技术只有自己真正理解了才是自己的东西,共勉. Web前端笔试题 Html+css 1.对WEB标准以及w ...
- 用grunt搭建web前端开发环境
1.前言 本文章旨在讲解grunt入门,以及讲解grunt最常用的几个插件的使用. 2.安装node.js Grunt和所有grunt插件都是基于nodejs来运行的,如果你的电脑上没有nodejs, ...
- 每天成长一点---WEB前端学习入门笔记
WEB前端学习入门笔记 从今天开始,本人就要学习WEB前端了. 经过老师的建议,说到他每天都会记录下来新的知识点,每天都是在围绕着这些问题来度过,很有必要每天抽出半个小时来写一个知识总结,及时对一天工 ...
- [转载]Web前端开发工程师编程能力飞升之路
[背景] 如果你是刚进入web前端研发领域,想试试这潭水有多深,看这篇文章吧:如果你是做了两三年web产品前端研发,迷茫找不着提高之路,看这篇文章吧:如果你是四五年的前端开发高手,没有难题能难得住你的 ...
- web前端开发中常用的尺寸和位置
我们在日常web前端开发过程中,会经常用到各种尺寸和位置.通常是js做动画的时候.轮播图,滚屏动画,粒子,碰撞检测,拖拽,滚动加载等等.这里我将常用的尺寸和位置的获取进行总结,不包括canvas,SV ...
随机推荐
- AD域环境的搭建 基于Server 2008 R2
AD(Active Directory)即活动目录,微软的基础件.微软的很多产品如:Exchange Server,Lync Server,SharePoint Server,Forefront Se ...
- 机器学习10大经典算法.doc
详见 F:\工程硕士\d电子书\26 数据挖掘 小结: 1. C4.5 C4.5算法是机器学习算法中的一种分类决策树算法,其核心算法是ID3算法. C4.5算法继承了ID3算法的优点,并在以下几方面 ...
- maven多配目配置总结
一. 设置一个parent项目,parent项目的作用应该有如下方面: 1.统一管理jar包的版本,这样许多子项目只需指定依赖的jar,而无需指定所依赖jar的版本 (1)在<propertie ...
- c#中使用SESSION需要注意的几个问题
C#的SESSION和其它程序中的SESSSION可能有一点的不同,下面讲下哪飞网程序员遇到的一个地方使用SESSION的问题.希望对大家有所帮助 一.在页面中用SESSION,存值session[& ...
- WPA Supplicant 用法
本文译至:https://wiki.archlinux.org/index.php/WPA_Supplicant_%28%E7%AE%80%E4%BD%93%E4%B8%AD%E6%96%87%29 ...
- C# 关键字 default
在泛型类和泛型方法中产生的一个问题是,在预先未知以下情况时,如何将默认值分配给参数化类型 T: T 是引用类型还是值类型. 如果 T 为值类型,则它是数值还是结构 http://msdn.micros ...
- Test2014-3-1 魅力值比较
魅力值比较 [问题描述] 大学生恋爱的问题造成了数量众多的异地恋,有许多J大的女生早早被Q大男生追走,这导致了J大男生的强烈不满.就在吐血高调地向一位J大美女展开攻势的之后,J大男生终于爆发了. 为了 ...
- 4 weekend110的YARN的通用性意义 + yarn的job提交流程
Mr程序写完之后,提交给yarn,yarn会产生一个MRAppMaster,想说的是,yarn变得很 通用,yarn集群上,不光可以跑mr程序,还可以跑各种运算模型. 海量批处理,mapreduce ...
- S2SH+Hibernate search出现的问题
一 java.lang.NoSuchMethodError: org.hibernate.engine.transaction.spi.TransactionEnvironment.getJtaPl ...
- 如何屏蔽Button setClickable与setEnabled
今天想让按键暂时无效,满足一定条件下才可以被用户按到.最初以为是setClickable,谁知搞错了.请看手册: 复制代码代码如下: public void setClickable (boolean ...