html表格与表单
一、表格
- 什么是表格 ？ 表格是较为常用的一种标签，但不是用来布局，常用来处理、显示表格式数据。
- 表格标签 table
- 表格的组成 行 tr 单元格 td
- 建立表格步骤
1、建立表格，
2、判断行数和列数
3、用行去包含单元格
4、在每个单元格中去添加内容
- 表格的各大属性
cellspacing：边框与边框之间的距离
Cellpadding:单元格内容与边框之间的距离
Border:表格的边框(默认边框值为“0”)
width:表格的宽
height:表格的高
- 表格的结构：
标题：caption标签
表头：thead标签 表格的第一行，一般用来描述每一列所显示的内容，用thead标签讲第一行包起来，然后用th替换td，单元格中的内容相对于单元格水平居中，且加粗
表格主体：tbody标签
- 表格的标题，caption只在表格中使用(紧随table之后)
- 表格的缺点：
a. 太深的嵌套，比如table>tr>td>h3，会导致搜索引擎读取困难，而且，最直接的损失就是大大增加了冗余代码量。
b. 灵活性差，比如要将tr设置border等属性，是不行的，得通过td
c. 代码臃肿，当在table中套用table的时候，阅读代码会显得异常混乱
d. 混乱的colspan与rowspan，用来布局时，频繁使用他们会造成整个文档顺序混乱。
e. 不够语义
二、合并单元格
- 分类：跨行合并（rowspan）、跨列合并（colspan）
- 步骤
1、判断是跨行合并还是跨列合并
2、跨行合并用rowspan属性，跨列合并用colspan属性
3、将属性写在需要合并的单元格上
4、将合并的行数或者列数写在对应的属性值中
5、将多余的单元格注释掉
三、表单元素
- 什么是表单： 表单是一块可采集用户数据的区域
- 作用：显示、存储、提交数据
- 组成：表单标签、表单域、提交按钮
表单标签：action:表单向后台提交的地址
method:向后提交的方式 get post
name: 指定表单名称，以区分同一页面多个表单
表单域：表单中的元素 其中包含了文本框、密码框、隐藏域、多行文本框、
复选框、单选框、下拉选择框和文件上传框
input控件
获取焦点：光标放在输入框内，可以打出文字
单击指定的名字获取焦点则需要将label标签中的属性值与input输入框的属性值保持一级即可
<label for="male">Male</label>
<input type="radio" name="sex" id="male" value="male">
type: 设置文本框类型
value:输入框的值 , 表示发送到服务器的值
name: 表示发送到服务器的键名
placeholder：文本提示信息
普通的文本框 type = text
密码框 :type=post
单选框:type =radio
多选框：type = checkbox
普通按钮：button
提交按钮：submit
重置按钮：reset
图片按钮：image
单选框、多选框的默认选中
1、checked="checked
2、checked
3、checked=true
选择框默认选中1、selected=”selected”
2、selected
3、selected=true
多行文本标签：textarea
<textarea cols="宽度 " rows="高度"> 文本内容</textarea>
下拉菜单： select标签
<select>
<option selected="selected">选项1</option>
<option>选项2</option>
<option>选项3</option>
</select>
posted on
