<!--文档定义一定要带上，因为浏览器在解析的时候先按照文档定义的格式解析，
  如果没有就按照浏览器默认的格式解析，可能会出问题。-->
  <html>
  <head>  <!--标签头-->
  <title>b标签练习1</title> <!--标题-->
  </head>
  <body> <!--标签体-->
   
   
   
  <!--Test1-->
      <ol><!--有序标签-->
              <li>爱</li>
              <li>青苹果乐园</li>
              <li>蝴蝶效应</li>
              <li>芙蓉姐夫</li>
              <li>水煮鱼</li>
          </ol>
  <!--Test2-->       
          <ul><!--无序标签-->
              <li>爱</li>
              <li>青苹果乐园</li>
              <li>蝴蝶效应</li>
              <li>芙蓉姐夫</li>
              <li>水煮鱼</li>
          </ul>
   
  <!--Test3-->
      <ul type="A"><!--类型：square 1 a -->
              <li>爱</li>
              <li>青苹果乐园</li>
              <li>蝴蝶效应</li>
              <li>芙蓉姐夫</li>
              <li>水煮鱼</li>
          </ul>
   
  <!--Test4表格-->
      <table border="1" height="200" width="450"><!--table表格标签--> <!--border最外层边框宽度--><!--height：高度 width:宽度-->
          <tr align=center ><!--tr行标签,align对齐方式，center居中-->
             
              <td><strong>姓名</strong></td> <!--td列标签-->
             <td><strong>性别</strong></td>
              <td><strong>工资</strong></td>
             
          </tr>
          <tr>
              <td>张三</td>
              <td>男</td>
              <td>10000</td>
          </tr>
          <tr>
              <td>李四</td>
              <td>男</td>
              <td>10000</td>
             
          </tr>
          <tr>
              <td>王五</td>
              <td>男</td>
              <td>10002</td>
             
          </tr>
            <tr>
              <td>舒翠</td>
              <td>女</td>
              <td>15000</td>
          </tr>
       
      </table>
   
      <!--cellpadding(填充)：用来统一设置表格中每个单元格的填充大小；
         cellspacing(间距)：用来统一设置表格中每个单元格与单元格之间的间距-->
  <!--Test4-2表格-->
      <table border="1" cellpadding="30">
          <tr ><!--行标签--> 
              <td>姓名</td>
             <td>性别</td>
              <td>工资</td>
          </tr>
          <table />
  <!--Test4-3表格-->
          <table border="1" cellspacing="30">
          <tr ><!--行标签-->
             
              <td>姓名</td>
             <td>性别</td>
              <td>工资</td>
             
          </tr>
          <table />
   
   
  <!--Text4-4表头表尾-->
      <table border="1" >
      <thead><!--thead表头自动加粗、居中--注意改为；th-->
       <tr>
              <th>姓名</th>
             <th>性别</th>
              <th>工资</th>
             
          </tr>
      </thead>
        
          <tr>
              <td>张三</td>
              <td>男</td>
              <td>10000</td>
          </tr>
          <tr>
              <td>李四</td>
              <td>男</td>
              <td>10000</td>
             
          </tr>
          <tr>
              <td>王五</td>
              <td>男</td>
              <td>10002</td>
             
          </tr>
             <tfoot><!--thead表头自动加粗、居中--注意改为；th-->
                <tr>
                  <th>舒翠</th>
                  <th>女</th>
                  <th>15000</th>
              </tr>
          </tfoot>
      </table>
   
   
        <!-- 水平对齐方式：align :left\center\right
        垂直对齐方式：valign:top\middle\bottom-->
  <!--Test5表格-->
           <table border="1" height="175" width="400">
          <caption>这是一个表格</caption><!--说明-->
              <tr>
                  <td align=center colspan="3"><b>学生基本情况</b></td><!--rowspan合并行 colspan合并列-->
              </tr>
              <tr align=center>
                  <td><strong>姓名</strong></td>
                  <td><strong>性别</strong></td>
                  <td><strong>专业</strong></td>
              </tr>
              <tr>
                  <td>刘备</td>
                  <td>男</td>
                  <td rowspan="3">计算机</td>
                  </tr>
              <tr>
                   <td>张飞</td>
                   <td>男</td>
              </tr>
              <tr>
                   <td>诸葛亮</td>
                   <td></td>
              </tr>
   
   
           </table>
  </body>
  </html>
  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
  <!--知识点1-->
      <!--<form>标签为表单标签。如果要把数据提交到服务器，则需要将<input>、
      <textarea>、<select>等表单元素放到form中
     <input>是主要的表单元素，type的可选值：submit(提交按钮)、button（普通按钮）
      checkbox（复选框）、file（文件选择框）、hidden（隐藏字段）、image（图片按钮）
      password（密码框）、radio（单选按钮）、reset（重置按钮）、text（文本框）
      <input type="file"/>-->
  <!--知识点2-->
      <!--id属性的目的主要是为了客户端，可以通过javascript语言来操作某个元素。
      所有元素都可以有id，并且每个元素的id不可以重复。
      --name属性的目的是为了将数据提交到服务器。
      只有表单元素才可以有name，并且name是可以重复的。
      表单提交其实就是提交的表单元素的value中的内容，用户输入的值自动就到value中了-->
   
     
  <html>
  <head>
  <title>表单</title>
  </head>
  <body>
          <form action="http://www.baidu.com/a.aspx" method="get"><!--action(提交)处理,get post一种提交方法-->
          <table border="1"><!--border边框粗细-->
                  <tr>
                      <td>姓名：</td>
                      <td><input name="txtName" type="text" value="王小明"/></td> <!--name可以做自由命名，type有一定类型，有点像窗体控件-->
                  </tr>
                    <tr>
                      <td>邮箱：</td>
                      <td><input name="txtEmail" type="text" value="sfjslf@qq.com"/></td>
                  </tr>
                     <tr>
                      <td>密码：</td>
                      <td><input name="txtPassword" type="password"/></td>
                  </tr>
                     <tr>
                      <td>确认密码：</td>
                      <td><input name="txtConfirmPassword" type="password"/></td>
                  </tr>
                   <tr>
                      <td>性别：</td>
                      <td><input type="radio" name="gender" value="male">男
                      <input type="radio" name="gender" value="female" />女</td>
                   </tr>
                   <tr>
                      <td>兴趣爱好：</td>
                      <td>
                      <input name="hobby" type="checkbox"  value="1"/> 篮球
                       <input name="hobby" type="checkbox"  value="2"/>跑步
                        <input name="hobby" type="checkbox"  value="3"/>看书看报
                         <input name="hobby" type="checkbox"  value="4"/>吃东西
                          <input name="hobby" type="checkbox"  value="5"/>旅游
                      </td>
                   </tr>
                   <tr>
                      <td>所在地区：</td>
                      <td>
                          省：
                          <select name="province" multiple="multiple" size="4"> <!--创建带有 4 个选项的选择列表-->
                              <option value="1">黑龙江</option>
                              <option value="2">吉林</option>
                              <option value="3">武汉</option>
                              <option value="11">襄阳</option>
                                <option value="1">黑龙江</option>
                              <option value="2">吉林</option>
                              <option value="3">武汉</option>
                              <option value="11">襄阳</option>
                          </select>
                          市：
                          <select>
                             <optgroup label="襄阳">
                              <option value="101">宜城</option>
                              <option value="102">枣阳</option>
                              <option value="103">老河口</option>
                              <option value="104">谷城</option>
                              <option value="105">南漳</option>
                             <optgroup label="武汉">
                             <option value="121"武昌区</option>
                              <option value="122">汉阳区</option>
                              <option value="123">汉口</option>
                              <option value="124">江夏区(05）</option>
                              <option value="125">洪山区(06)</option>
                             </optgroup>
                             
                          </select>
                      </td>
                   </tr>
   
                     <tr>
                     
                      <td colspan="2" style="heght:80px;">
                      <fieldset style="height:50px;"><!--<fieldset> 标签将表单内容的一部分打包，生成一组相关表单的字段。-->
                     <legend>请选择你感兴趣的内容：</legend>  <!--组合表单中的相关元素-->
                      <input name="hobby" type="checkbox"  value="1"/> 数据库
                       <input name="hobby" type="checkbox"  value="2"/>网络
                        <input name="hobby" type="checkbox"  value="3"/>web开发
                         <input name="hobby" type="checkbox"  value="4"/>移动开发
                      </fieldset>
                 
       
                      </td>
   
              </table>
            
   
          </form>
  </body>
   
  </html>

详细知识点：www.w3cschool 、菜鸟教程

Html--表单练习的更多相关文章

  1. ASP.NET Aries 入门开发教程9：业务表单的开发

    前言: 经过前面那么多篇的列表的介绍,终于到了大伙期待的表单开发了. 也是本系列的最后一篇文章了! 1:表单页面的权限设置与继承 对于表单页面,权限的设置有两种: 1:你可以选择添加菜单(设置为不显示 ...

  2. 探索ASP.NET MVC5系列之~~~3.视图篇（下）---包含常用表单和暴力解猜防御

    其实任何资料里面的任何知识点都无所谓,都是不重要的,重要的是学习方法,自行摸索的过程(不妥之处欢迎指正) 汇总:http://www.cnblogs.com/dunitian/p/4822808.ht ...

  3. jQuery学习之路（8）- 表单验证插件-Validation

    ▓▓▓▓▓▓ 大致介绍 jQuery Validate 插件为表单提供了强大的验证功能,让客户端表单验证变得更简单,同时提供了大量的定制选项,满足应用程序各种需求.该插件捆绑了一套有用的验证方法,包括 ...

  4. jQuery学习之路（5）- 简单的表单应用

    ▓▓▓▓▓▓ 大致介绍 接下来的这几个博客是对前面所学知识的一个简单的应用,来加深理解 ▓▓▓▓▓▓ 单行文本框 只介绍一个简单的样式:获取和失去焦点改变样式 基本结构: <form actio ...

  5. 12、Struts2表单重复提交

    什么是表单重复提交 表单的重复提交: 若刷新表单页面, 再提交表单不算重复提交. 在不刷新表单页面的前提下: 多次点击提交按钮 已经提交成功, 按 "回退" 之后, 再点击 &qu ...

  6. .net erp（办公oa）开发平台架构概要说明之表单设计器

    背景:搭建一个适合公司erp业务的开发平台.   架构概要图: 表单设计开发部署示例图    表单设计开发部署示例说明1)每个开发人员可以自己部署表单设计至本地一份(当然也可以共用一套开发环境,但是如 ...

  7. javascript表单的Ajax 提交插件的使用

    Ajax 提交插件 form.js 表单的下载地址:官方网站:http://malsup.com/jquery/form/ form.js 插件有两个核心方法:ajaxForm()和ajaxSubmi ...

  8. 玩转spring boot——AOP与表单验证

    AOP在大多数的情况下的应用场景是:日志和验证.至于AOP的理论知识我就不做赘述.而AOP的通知类型有好几种,今天的例子我只选一个有代表意义的“环绕通知”来演示. 一.AOP入门 修改“pom.xml ...

  9. from表单提交数据之后，后台对象接受不到值

    如果SSH框架下,前段页面通过from表单提交数据之后,在后台对象显示空值,也就是接收不到值得情况下.首先保证前段输入框有值,这个可以在提交的时候用jQuery的id或者name选择器alert弹出测 ...

  10. form表单验证-Javascript

    Form表单验证: js基础考试内容,form表单验证,正则表达式,blur事件,自动获取数组,以及css布局样式,动态清除等.完整代码如下: <!DOCTYPE html PUBLIC &qu ...

随机推荐

  1. 快刀斩乱麻之 Katana

    Katana-武士刀,寓意:快.准.狠! 按照常规,我们一般编写的 ASP.NET 应用程序会部署在 IIS 上(有点傻的描述),在 ASP.NET 应用程序中,我们会大量使用 HttpContext ...

  2. EntityFramework 7 Left Join Where is error(Test record)

    First of all, my English is very poor, so I may not be a very good expression, very sorry! In this b ...

  3. 【记录】T-SQL 分组排序中取出最新数据

    示例 Product 表结构: 示例 Product 表数据: 想要的效果是,以 GroupName 字段分组,取出分组中通过 Sort 降序最新的数据,通过示例数据,可以推算出结果数据的 ID 应该 ...

  4. iOS开发--AVFoundation自定义相机

    首先导入一个头文件 #import <AVFoundation/AVFoundation.h> 由于后面我们需要将拍摄好的照片写入系统相册中,所以我们在这里还需要导入一个相册需要的头文件 ...

  5. 开启了HA的XenServer如何关闭虚拟机？

    可开启了HA很方便,在主机自己坏掉的情况下其中的虚拟机能自己飘到活的机器上并被运行起来,不过如果手动的需要关闭虚拟机的话在这情况下,该虚拟机会自己"复活"即便我们选的是关机. 此时 ...

  6. CSS实现单行与多行文字省略（truncation）

    在上一篇文章小div布局之卡片堆叠(card-stacking)中有多行文字溢出省略的效果,这篇文章就对这种效果(包括单行文字溢出省略)的实现做个简单的记录,以防自己忘记.具体来说,就是要实现这种文字 ...

  7. 【字符编码】Java编码格式探秘

    一.前言 在分析Comparable和Comparator的时候,分析到了String类的compareTo方法,String底层是用char[]数组来存放元素,在比较的时候是比较的两个字符串的字符, ...

  8. Github团队开发示例（一）

    Github团队开发示例(二) 作者:Grey 原文地址:http://www.cnblogs.com/greyzeng/p/6044837.html 我们可以在Github上管理自己的团队项目.团队 ...

  9. T- SQL性能优化详解

    摘自:http://www.cnblogs.com/Shaina/archive/2012/04/22/2464576.html 故事开篇:你和你的团队经过不懈努力,终于使网站成功上线,刚开始时,注册 ...

  10. Asp.net 面向接口可扩展框架之核心容器(含测试代码下载)

    新框架的容器部分终于调通了!容器实在太重要了,所以有用了一个名词叫“核心容器”. 容器为什么那么重要呢?这个有必要好好说道说道. 1.首先我们从框架名称面向接口编程说起,什么是面向接口编程?(这个度娘 ...