一、表格

<table></table>表格

  width:宽度。可以用像素或百分比表示。 常用960像素。

  border:边框,常用值为0。

  cellpadding:内容跟边框的距离,常用值为0。

  cellspacing:单元格与单元格之间的间距,常用值为0。

  algin:对齐方式。

  bgcolor:背景色。

  background:背景图片。

<tr></tr>行

  align:一行内容的水平对齐方式。

  valign:一行内容的垂直对齐方式。

  height:行高。

  bgcolor:背景色。

  background:背景图片。

<td></td>单元格

<th></th>表头,单元格的内容自动居中、加粗

  align:单元格内容的对齐方式。

  valign:单元格的内容的垂直对齐方式。

  width:单元格宽度。

  height:单元格高度。

  bgcolor:背景色。

  background:背景图片。  

  内容必须放在单元格里,单元格必须放在行里,行必须放在表格里。

  设置单元格行高、列高时,会同时影响对应的行或列。

单元格合并:(建议尽量用表格嵌套)

  colspan=“n”  合并同一行的单元格(后面写代码要减去相对应的列)

  rowspan=“n”  合并同一列单元格(从第二行开始减去相对应的列)

二、表单

<form id="" name="" method="post/get" action="负责处理的服务端">--输入系统时,必须有,以后用

id不可重复,name可重复,get提交有长度限制,并且编码后的内容在地址栏可见,

post提交没有长度限制,且编码后内容不可见。

</form>

1.文本输入(字符占2个空位,字符相当于3个像素)

  文本框<input type="txt" name="" id="" value="" />

  密码框<input type="password" name="" id="" value="" />

  文本域<textarea name="" id="" cols=""(字符多少) rows=""(几行高)></textarea>

  隐藏域<input type="hidden" name="" id="" value="" />

2.按钮

  提交按钮<input type="submit" name="" id="" disabled="disabled" value="" />点击后转到form内的提交服务器的地址

  重置按钮<input type="reset" name="" id="" disabled="disabled" value="" />

  普通按钮<input type="button" name="" id="" disabled="disabled" value="" />

  图片按钮<input type="image" name="" id="" disabled="disabled" src="图片地址" />

  disabled使按钮失效

  enable使按钮可用

3.选择输入

  单选按钮组<input type="redio" name="" checked="checked" value="" />

  name的值用来分组,value的值看不见,提交给程序用的,checked设置默认选项。

  复选框组<input type="checkbox" name="" checked="checked" value="" />

  文件上传<input type="file" name="" id="" />

  <lable for=""></lable>

  lable标签为input元素定义标注。

  lable元素不会向用户呈现任何特殊效果,不过,他为鼠标用户改进了可用性。如果您在lable元素内点击文本,就会触发此控件。

  就是说,当用户选择该标签时,浏览器会 将焦点转到和标签相关的表单控件上。

  lable标签的for属性应当与相关元素的id属性相同。

4.下拉列表框

  <select name="" id="" size="" multiple="multiple">

  --size为1时,为菜单;>1时,为列表。multiple为多选。

    <option value="值">内容1</option>

    <option value="值" selected="selected">内容2</option>

    --selected,设为默认

    <option value="值">内容3</option>

  </select>

5.标签

<label></label>

字段集 (一堆label)

<fieldset></fieldset>

HTML--表格与表单的更多相关文章

  1. DOM之表格与表单基础分享

    我是沐晴,好久不见.马上要放假啦,也是比较的忙. 今天来谈谈表格和表单的基本知识.前期的写的都是比较基础的知识,后期会慢慢增加实例.一起来学习吧. 先看表格,DOM中提供了一些属性,便于我们获取表单节 ...

  2. css011 表格和表单的格式化

    css011 表格和表单的格式化 一.    让表格专司其职    Html中创建一个三行三列的表格 <table> <caption align="bottom" ...

  3. BootStrap入门教程 (二) :BASE CSS(排版(Typography),表格(Table),表单(Forms),按钮(Buttons))

    上讲回顾:Bootstrap的手脚架(Scaffolding)提供了固定(fixed)和流式(fluid)两种布局,它同时建立了一个宽达940px和12列的格网系统. 基于手脚架(Scaffoldin ...

  4. 第3天:CSS浮动、定位、表格、表单总结

    今天学的是浮动.定位.表格.表单等内容,这些是CSS中最容易混淆的知识,有许多小技巧在写代码过程中需要注意.下面是主要知识点: 一.float浮动1.块元素在一行显示2.内联元素支持宽高3.默认内容撑 ...

  5. WEB入门二 表格和表单

    学习内容 Ø        表格的作用和制作 Ø        表单的制作 能力目标 Ø        掌握表格的创建 Ø        掌握设置表格的常用属性: Ø        理解表单的作用 Ø ...

  6. HTML&CSS精选笔记_表格与表单

    表格与表单 表格标记 创建表格 要想创建表格,就需要使用表格相关的标记 <table>     <tr>     <td>单元格内的文字</td>   ...

  7. Unit01: Web概述 、 HTML概述 、 文本处理 、 图像和超链接 、 表格 、 表单

    Unit01: Web概述 . HTML概述 . 文本处理 . 图像和超链接 . 表格 . 表单 demo1.html <!-- 声明网页的版本(文档类型) --> <!doctyp ...

  8. 13、Semantic-UI之表格与表单

    13.1 定义基础样式表格   在HTML中可以通过table进行表格定义,在Semantic-UI中也可以通过class="ui table"定义表格. 示例:定义基础表格 &l ...

  9. 框架,表格,表单元素,css基础以及基本标签的结合

    <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8&quo ...

  10. Html学习之十八(表格与表单学习--统计表制作)

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

随机推荐

  1. BZOJ 3296: [USACO2011 Open] Learning Languages

    Time Limit: 5 Sec Memory Limit: 128 MB Submit: 387 Solved: 206 [Submit][Status][Discuss] Description ...

  2. webpack学习之—— 依赖图(Dependency Graph) 及 构建目标(Targets)

    Dependency Graph 任何时候,一个文件依赖于另一个文件,webpack 就把此视为文件之间有依赖关系.这使得 webpack 可以接收非代码资源(non-code asset)(例如图像 ...

  3. Hdu 1045 二分匹配

    题目链接 Fire Net Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Tot ...

  4. C#中的事件注册和注销

    C#中的事件注册和注销 由于.NET框架对消息循环机制进行了很好的封装,开发人员不再需要深入的了解Windows事件/消息实现的具体机制,也无需创建复杂的事件结构体和所谓的消息句柄.我们所要做的无非就 ...

  5. DataIntputStream / DataOutputStream 类

    1. DataInputStream类(熟悉)   (1)基本概念 java.io.DataInputStream类用于读取java中的基本数据类型.   (2)常用的方法 DataInputStre ...

  6. Linux SSH远程链接 短时间内断开

    Linux SSH远程链接 短时间内断开 操作系统:RedHat 7.5 问题描述: 在进行SSH链接后,时不时的就断开了 解决方案: 修改 /etc/ssh/sshd_config 文件,找到 Cl ...

  7. JavaScript:利用递归实现对象深拷贝

    先来普及一下深拷贝和浅拷贝的区别浅拷贝:就是简单的复制,用等号即可完成 let a = {a: 1} let b = a 这就完成了一个浅拷贝但是当修改对象b的时候,我们发现对象a的值也被改变了 b. ...

  8. NOIP模拟 7.03

    Problem 1 抓牛(catchcow.cpp/c/pas) [题目描述] 农夫约翰被通知,他的一只奶牛逃逸了!所以他决定,马上出发,尽快把那只奶牛抓回来. 他们都站在数轴上.约翰在N(O≤N≤1 ...

  9. PPT转PDF

    需求:可以上传ppt,前台可以预览. 在用程序将ppt转pdf的过程中,遇到几个问题,记录如下: 1.检索 COM 类工厂中 CLSID 为 {91493441-5A91-11CF-8700-00AA ...

  10. python中defaultdict类

    回宿舍前翻翻Codeforces的时候发现了一个有趣的代码..其实是我没这么用过 :D 这是一份417B的代码 import sys from collections import defaultdi ...