html入门知识点(二)

1. 表格标签

表格也是一个组标签

1.1 表格的基本用法

<table>
    <tr>
        <td>单元格的内容</td>
        <td>单元格的内容</td>
</tr>
</table>

结构说明:
- <table></table>表示表格开始结束
- <tr></tr> 表示行，有多少行就有多少对该标签
- <td></td> 表示单元格，写在tr标签中间，一行有多少个单元格就有多少对td标签
- <th></th> 表示标题单元格，在该标签内部的文本会自动加粗居中

1.2 常用属性

属性名	功能
border	设置边框，单位为像素，取值0-n
width	设置宽度，单位为像素，取值固定值和百分比
height	设置高度，一般不设置，由内容来决定
background	设置背景图片，相对路径和绝对路径
bgcolor	设置背景颜色
align	设置表格本身的水平对齐，取值:left(默认),right,center
cellpadding	设置单元格中内容到边框的距离，内填充
cellspacing	设置单元格与单元格的距离，外边距

1.3 tr标签属性

属性名	功能
align	设置行内内容的水平对齐
valign	设置行内内容的垂直对齐 取值:top，middle(默认),bottom
bgcolor	给行设置背景色
height	给行设置高度

1.4 td标签的属性

属性名	功能
align	设置单元格的水平对齐
valign	设置单元格的垂直对齐
bgcolor	给单元格设置背景色
height	给单元格设置高度
width	给单元格设置宽度
rowspan	跨行合并单元格，取值为合并的单元格个数
colspan	跨列合并单元格，取值为合并的单元格个数

合并单元格要点
1. 一定要明白是跨行还是跨列
2. 要明白在哪个单元格中书写跨行跨列属性
3. 要知道合并的单元格数量
4. 合并后要删除对应的单元格

2.表单

2.1 表单的功能

主要用来收集用户输入的相关数据

格式：

<form>
    <input type="text" />
</form>

2.2 form 标签的属性

• action:行为，表单的数据处理，不写时表示由当前页面处理
• method:方法，表单数据的提交方式
  • get:没有写method属性时的默认提交方式，提交的数据会显示在地址栏中,显示格式为表单处理程序?name的属性值=用户输入的数据&name的属性值=用户的输入数据等等
  • post:不显示到地址栏，直接提交给表单处理程序

get方式提交数据量小，不安全；post提交数据量大，相对安全

3. 表单控件

3.1 表单控件标签

• 单行文本框:<input type="text”name="名称"”value="值" />
• 单行密码框:<input type="password”name=”名称”value="值" />
• 单选按钮: <input type="radio”name=”名称”value="值"checked="checked"/>
  一组单选按钮name值一样时时互斥的，只能选择一个。checkde表示被选中，值为checked。
• 多选按钮: <input type=”checkbox”name="名称"value="值" checked=”checked”/>
  一组多选按钮name值也是一样的。
• 提交按钮: <input type="submit" name="名称"”value="值" />
• 重置按钮: <input type="reset”name="名称" value="值" />
• 普通按钮: <input type="button”name=”名称”value="值" />
• 提交按钮: <button type="submit">内容</button>
• 重置按钮: <button type="reset">内容</button>
• 普通按钮: <button type="button">内容</button>
• 图片按钮: <input type="img”name=”名称”value="值" />
  图片按钮具有表单提交的功能，同时会提交鼠标在图片上点击时的坐标值。
• 文件上传: <input type="file”name="名称"/>
• 隐藏域: <input type="hide”name=”名称”value="值"/>
  浏览器不现实隐藏域，一般会获取不需要用户输入的指定数据进行提交
• 下拉列表:

<select  name=”名称”>
        <option  value="值"></option>
        <option  value="值"  selected="selected"></option>
        <option  value="值"></option>
</select>

selected表示默认选择这个选项，值为selected

• 多行文本域: <textarea cols="列数" rows="行数" name="名称">

4. 标签的通用属性

每一个标签都会有的属性

• title:标题 鼠标悬浮的时候显示的文本信息
• class:类名 类名一样的可以视为同一类，一般用于css
• id: id的属性值唯一，一般用来单独使用css赋予样式
• style: 设置CSS行内样式