1. 表格
<table>
<tr>
<td></td>
</tr>
</table>
创建行<tr></tr>
在行中创建单元格<td></td>
1. table 属性
width
height
border 默认以像素为单位
bgcolor 颜色值表示 ： 可以使用英文单词和十六进制
align 设置表格在窗口中的位置 left/center/right
cellspacing 设置单元格与边框之间的距离
cellpadding 设置单元格内容与单元格边框之间的距离
2. tr/td 属性
width
height
bgcolor
align 单元格内容的水平对齐方式
valign 单元格垂直方向的对齐方式 top/middle/bottom
3. td独有属性
rowspan 设置单元格跨行合并取值为数字，表示跨几行
colspan 设置单元格跨列合并，取值为数字，表示跨几列
4. 表格结构
<table>
<thead>
<tr>
<td></td>
</tr>
</thead>
<tbody>
<tr>
<td></td>
</tr>
</tbody>
<tfoot>
<tr>
<td></td>
</tr>
</tfoot>
</table>
thead tbody tfoot 可以省略，如果不写，表格中所有的内容会自动加入tbody中
thead tfoot 用来将一行或是若干行分组，作为表格的头部和尾部信息
5. 表格标题及首行文本特殊样式
<table>
<caption>表格标题</caption>
<tr>
<th></th>
</tr>
</table>
<caption>可以用来设置表格标题，必须作为表格的第一个子元素使用
<th>用法与td 一样，自带文本居中和加粗效果2. 表单 (非常重点)
1. 作用 ： 向服务器发送数据
2. 基本语法
<form action="" method=""></form>
action 属性指定表单数据提交到服务器中哪个文件，属性值为文件的路径
method 属性指定数据提交的方式 常用 get /post
注意 ：
get 请求：数据会被拼接在URL后面，直接发送，安全性较低；数据大小受限，最大为2K。是默认的提交方式
post 请求：数据会被打包，单独发送。隐式提交给服务器，安全性高；数据大小不受限
3. 表单控件（重点）
1. 文本输入框和密码框
<input type="text" name="uname" placeholder="提示文本" maxlength="10"/>
<input type="password" name="upwd"/>
type : 属性用来指定控件类型
name : 属性定义控件名称，缺少的话无法提交
placeholder ： 设置用户输入之前的提示文本
maxlength :设置最大可输入的字符数
2. 单选和复选框
<input type="radio" name="gender" value="male" checked>
<input type="checkbox" name="hobby" value="sing">
注意 ：
radio 表示单选按钮
checkbox 表示复选框
name属性 用来定义控件名称并且分组，一组按钮的name属性必须一致
value属性 用来设置控件的值，最终会发送给服务器
checked属性 设置按钮默认选中状态
3. 隐藏域
隐式发送一些附加信息，用户不可见
<input type="hidden" name="uid" value="101">
<input type="hidden" name="other" value="用户隐私">
4. 文件上传
<input type="file" name="uimg">
5. 文本域
<textarea name="uinfo" cols="20" rows="5"></textarea>
cols 指定文本域默认显示的列数，一行能够显示的英文字符量，中文减半
rows 指定文本域默认显示的行数
注意 ：
可以使用disabled属性禁用表单控件，适用于所有的表单控件
6. 下拉菜单
<select name="area">
<option value="bj">北京</option>
</select>
下拉菜单分组
<select name="address">
<optgroup label="河北省">
<option value="sjz">石家庄</option>
</optgroup>
<optgroup label="河南省">
<option value="zz">郑州</option>
</optgroup>
</select>
注意 ： value属性值是最终发送给服务器的数据
optgroup 用来对选项分组，通过label属性设置组名
option 用来设置具体的选项
7. 提交 重置按钮 普通按钮
1. 提交按钮 <input type="submit">
将表单数据发送给服务器
2. 重置按钮 <input type="reset">
重置表单数据，恢复到初始状态
3. 普通按钮 <input type="button" value="点我">
普通按钮需要通过value属性设置显示文本
4. <button type="submit">提交</button>
type可以取值submit reset button，可以实现 input按钮的功能，需要添加标签文本显示在按钮上
8. label for ID
<label for="male">男</label>
<input type="radio" value="male" id="male" name="gender">
使用label标签显示文本,将label的标签属性 for 的属性值设置为将要绑定的表单控件的id值,实现点击文本跟点击控件一样的效果
补充 :
maxlength 属性 用来设置输入框可输入的最大字符数
9. 取色板
<input type="color" name="colorpick">
<!DOCTYPE html>
<html>
<head>
<title>table</title>
<meta charset="utf-8">
</head>
<body>
<!-- 表格 ：
边框属性 宽高尺寸
背景颜色bgcolor :
1.使用颜色的英文名称表示
2.十六进制表示 每一位取值0-9 a-f
#开头 每两位为一组代表一种三元色
共三组，六位表示
align : 设置表格在窗口中的水平显示位置
valign 不起作用
-->
<table border="1" width="500px" height="500px" bgcolor="pink" align="center" valign="middle">
<!-- tr ：table row 创建行
align : 设置整行文本内容的水平对齐方式
valign ： 设置整行文本的垂直对其方式
用于td 是设置某一个单元格的水平和垂直对齐方式
-->
<tr>
<!-- 在行中创建单元格，用来存放数据 -->
<td align="center">鹿晗</td>
<td valign="top">关晓彤</td>
<td>纪凌尘</td>
<td>阚清子</td>
<td>迪丽热巴</td>
</tr>
<tr align="center" valign="bottom">
<td>鹿晗</td>
<td>关晓彤</td>
<td>纪凌尘</td>
<td>阚清子</td>
<td>迪丽热巴</td>
</tr>
<tr>
<td>鹿晗</td>
<td>关晓彤</td>
<td>纪凌尘</td>
<td>阚清子</td>
<td>迪丽热巴</td>
</tr>
</table>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>table</title>
</head>
<body>
<!-- cellspacing : 设置表格单元格与单元格边框及表格边框之间的距离
cellpadding : 设置单元格内容框与单元格边框之间的距离，上右下左四个方向
-->
<table border="1" bgcolor="orange" cellspacing="20px" cellpadding="50px">
<tr>
<td width="100px" height="50px" bgcolor="pink">鹿晗</td>
<td>张艺兴</td>
</tr>
<tr>
<td>周冬雨</td>
<td>张一山</td>
</tr>
<tr>
<td>古力娜扎</td>
<td>马尔扎哈</td>
</tr>
</table>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格合并</title>
</head>
<body>
<!-- 课程表 10行*6列 的结构
单元格合并，不管是跨行还是跨列，都是对单元格自身td的操作，设置单元格合并之后，注意调整表格结构
-->
<table width="500px" height="500px" border="1" bgcolor="orange">
<!-- 上午 6*6-->
<tr align="center">
<!-- 两个单元格 上午 下午，出现了跨列合并，每个单元格占据了三列的宽
colspan 表示跨列合并，取值为数值，表示跨几列
-->
<td colspan="3">上午</td>
<td colspan="3">下午</td>
</tr>
<tr align="center">
<td>一</td>
<td>二</td>
<td>三</td>
<td>四</td>
<td>五</td>
<td>六</td>
</tr>
<!-- 第三行首个单元格跨行合并 -->
<tr align="center">
<!-- rowspan : 取值为数字，表示跨几行 -->
<td rowspan="4">一</td>
<td>二</td>
<td>三</td>
<td>四</td>
<td>五</td>
<td>六</td>
</tr>
<tr align="center">
<td>二</td>
<td>三</td>
<td>四</td>
<td>五</td>
<td>六</td>
</tr>
<tr align="center">
<td>二</td>
<td>三</td>
<td>四</td>
<td>五</td>
<td>六</td>
</tr>
<tr align="center">
<td>二</td>
<td>三</td>
<td>四</td>
<td>五</td>
<td>六</td>
</tr>
<tr>
<td align="center" colspan="6">午休</td>
</tr>
</table>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<!-- -->
<form action="xx.php" method="get" bgcolor="#b8de21">
<p>
用户姓名 :
<input type="text" name="uname" placeholder="请输入1-10个字符" maxlength="10">
</p>
<p>
用户性别 :
<label for="male">男</label>
<input type="radio" name="gender" value="male" id="male">
<label for="female">女</label>
<input type="radio" name="gender" value="female" id="female">
</p>
<p>
选取颜色
<input type="color" name="colorpick">
</p>
<input type="submit" name="submit">
</form>
</body>
</html>
扫一扫
5698
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
