02HTML表单
[目录]
一、基础表格
<table>表格
<tr>行
<td>单元格
基本语法与结构
<table> <!--表格开始-->
<tr> <!--tr行标签-->
<td>……</td> <!--td单元格-->
……
</tr>
……
</table> <!--表格结束-->
二、表格操作
-
带表头的表格：
<th>……</th> <!--表格头，内容居中，加粗显示--> -
带标题的表格：
<caption>……</caption> <!--表格标题居中显示--> -
带结构的表格
- thead：表格的头，放表格的表头
- tbody：表格主体，放数据本体
- tfoot：表格的脚，放表格的脚注
-
<table>表格属性
属性 |
值 |
描述 |
|---|---|---|
| width | px/% | 规定表格的宽度 |
| align | left/right/center | 表格相对周围元素的对齐方式 |
| border | px | 规定表格边距的宽度 |
| bgcolor | rgb(x,x,x)/#xxxxxx/colorname | 表格的背景颜色 |
| cellpadding | px/% | 单元边沿与其内容之间的空白 |
| cellspacing | px/% | 单元格之间的空白 |
| fram | 属性值 | 规定外侧边框的哪个部分是可见的 |
| rules | 属性值 | 规定内侧边距的哪个部分是可见的 |
- <tr>标签属性
属性 |
值 |
描述 |
|---|---|---|
| align | left/right/center/justify | 行内容的水平对齐 |
| valign | top/middle/bottom | 行内容的垂直对齐 |
| bgcolor | rgb(x,x,x)/#xxxxxx/colorname | 行的背景颜色 |
| width | px/% | 单元格的宽度 |
| heigh | px/% | 单元格的高度 |
- 跨列属性：colspan
- 跨行属性：rowspan
- 表格嵌套：
- 完整表格结构
- 放到<td>标签
- 注意：尽量少使用表格嵌套，尽量少的使用表格跨行跨列
三、HTML表单
- 语法
<form>
表单元素
</form>
- HTML表单
form标签中，以下标签实现表单元素添加
标签 |
描述 |
|---|---|
| <input> | 表单输入标签 |
| <select> | 菜单和列表标签 |
| <option> | 菜单和列表项目标签 |
| <textarea> | 文字域标签 |
| <optgroup> | 菜单和列表项目分组标签 |
- <input>标签:
<input type="类型属性" name="名称" …… />
Type属性值 |
描述 |
|---|---|
| text | 文字域 |
| password | 密码域 |
| file | 文件域 |
| checkbox | 复选框 |
| radio | 单选框 |
| button | 按钮 |
| submit | 提交按钮 |
| reset | 重置按钮 |
| hidden | 隐藏域 |
| image | 图像域 |
- 单行文本域
Type属性值 |
描述 |
|---|---|
| name | 文字域的名称 |
| maxlength | 指用户输入的最大字符长度 |
| size | 之文本框的宽度，以字符个数为单位，文本框的缺省宽度是20个字符 |
| value | 指定文本框的默认值 |
| placeholder | 规定用户填写输入字段的提示 |
- 多行文本域
Type属性值 |
描述 |
|---|---|
| name | 文字域的名称 |
| placeholder | 规定用户填写输入字段的提示 |
| rows | 文本区内的可见行数 |
| cols | 文本区内的可见宽度 |
- 表单工作原理：访问一个包含表单的页面，输入数据后“提交”表单，浏览器将用户在表单中输入的数据进行打包，并发送给服务器，服务器接收数据并转由程序处理
- <form>标签
<form action="" method="" name="" …… >
表单元素
</form>
属性 |
值 |
描述 |
|---|---|---|
| action | url | 提交表单时向何处发送表单数据 |
| method | get/post | 设置表单以何种方式发送到指定页面 |
| name | form_name | 表单的名称 |
| target | _blank_self_parent_top | 在何处打开action URL |
- GET和POST的区别
- GET：使用URL传递参数，对所送信息的数量也有限制，一般用于信息获取
- POST：表单数据作为HTTP请求体的一部分，对所发送信息的数量无限制，一般用于修改服务器上的资源
四、必备基础
- <div>和<span>
- <div>标签是一个区块容器标记，<div></div>之间是一个容器，可以包含段落、表格、图片等各种HTML元素
- <span>标签没有实际意义，为了应用样式
- HTML标签
块级标签：占据一行、换行
<div><ul><ol><li><dl><dt><dd><h1>~<h6><p><form><hr>
行内标签：在一行，不换行
<b><em><img><input><a><sup><sub><textarea><span>
