22-表格标签
<!-- border="1" 设置表格边框为一像素
width="500" 宽500px
height="200"
高200px align="center" 居中 left 靠左 right 靠右
cellspacing="0" 单元格间距为0
cellpadding="20" 字和单元格间距为20 -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<table border="1" width="500" height="200" align="center" cellspacing="0" cellpadding="20">
<tr>
<td>姓名</td>
<td>性别</td>
<td>年龄</td>
</tr>
<tr>
<td>张三</td>
<td>男</td>
<td>18</td>
</tr>
<tr>
<td>张三疯</td>
<td>女</td>
<td>68</td>
</tr>
<tr>
<td>张三丰子</td>
<td>男</td>
<td>188</td>
</tr>
</table>
</body>
</html>
24-表头单元格 表头单元格 加粗居中
<th> </th>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<table border="1" width="500" height="200" align="center" cellspacing="0" cellpadding="20">
<tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
</tr>
<tr>
<td>张三</td>
<td>男</td>
<td>18</td>
</tr>
<tr>
<td>张三疯</td>
<td>女</td>
<td>68</td>
</tr>
<tr>
<td>张三丰子</td>
<td>男</td>
<td>188</td>
</tr>
</table>
</body>
</html>
25-表格标题 caption 在表格内部写
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<table border="1" width="500" height="200" align="center" cellspacing="0" cellpadding="20">
<caption>个人信息</caption>
<tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
</tr>
<tr>
<td>张三</td>
<td>男</td>
<td>18</td>
</tr>
<tr>
<td>张三疯</td>
<td>女</td>
<td>68</td>
</tr>
<tr>
<td>张三丰子</td>
<td>男</td>
<td>188</td>
</tr>
</table>
</body>
</html>
26-跨行跨列合并
<!-- 1.跨行合并 rowspan 跨列合并colspan
2.一般原则线上后下先左后右 -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<table border="1" width="500" height="200" align="center" cellspacing="0" cellpadding="20">
<tr>
<td rowspan="2">11</td>
<td>12</td>
<td>13</td>
<td>14</td>
</tr>
<tr>
<td>22</td>
<td colspan="2">23</td>
</tr>
<tr>
<td>31</td>
<td>32</td>
<td>33</td>
<td>34</td>
</tr>
</table>
</body>
</html>
27-表格划分结构
<thead></thead>
<tbody></tbody>
<tfoot></tfoot>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<table border="1" width="500" height="200" align="center" cellspacing="0" cellpadding="20">
<thead>
<tr>
<td>姓名</td>
<td>性别</td>
<td>年龄</td>
</tr>
</thead>
<tbody>
<tr>
<td>张三</td>
<td>男</td>
<td>18</td>
</tr>
<tr>
<td>张三疯</td>
<td>女</td>
<td>68</td>
</tr>
<tr>
<td>张三丰子</td>
<td>男</td>
<td>188</td>
</tr>
<tfoot>
<tr>
<td>
表格划分案例
</td>
</tr>
</tfoot>
</tbody>
</table>
</body>
</html>
28-列表
<!-- 作用：用来有序的显示图片和文字
分类：有序 无序 自定义 -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
无序
<ul>
<li>香蕉</li>
<li>苹果</li>
<li>榴莲</li>
</ul>
有序
<ol>
<li>Java是全世界最好的语言</li>
<li>不PHP才是</li>
<li>Java and php：垃圾Python</li>
</ol>
自定义
<dl>
<dt>北京</dt>
<dd>昌平</dd>
<dd>东城区</dd>
<dd>西城区</dd>
<dt>大明王朝</dt>
<dd>东厂</dd>
<dd>西厂</dd>
<dd>锦衣卫</dd>
</dl>
</body>
</html>
29-表单标签
<!-- input
type="text" 指定格式
text 普通文本
password 密码框
radio 单选框
checkbox: 复选框 默认checked="checked" 被选状态
name="username" ： 指定元件名字
id ：指定id -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
用户名:<input type="text" name="username" id="" value="请输入用户名">
<br> 密码:
<input type="password" />
<br>
性别：<input type="radio" name="sex"> 男
<input type="rasio" name="sex"> 女
<br>
爱好：
<input type="checkbox" name="hobby" id="" checked="checked">吃饭
<input type="checkbox" name="hobby" id="">睡觉
<input type="checkbox" name="hobby" id="">打豆豆
<input type="checkbox" name="hobby" id="">看电视
<input type="button" value="按钮">
<input type="submit" value="提交">
<input type="submit" value="重置">
<!-- 图片提交按钮 -->
<input type="image" src="#" alt="">
<input type="file" name="图片上传" id="">
</body>
</html>
30-labal
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 1 -->
<label>用户名：<input type="text" name="" id=""></label>
<!-- 2 -->
<label for="nc">昵称</label><input type="text" name="" id="nc">
</body>
</html>
31-文本域
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
留言：<textarea name="" id="" cols="30" rows="10"></textarea>
</body>
</html>
32-下拉列表
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
籍贯：
<select name="" id="">
<option value="">--请选择省份--</option>
<option value="">北京</option>
<option value="">上海</option>
<option value="">广州</option>
<option value="">杭州</option>
</select>
</body>
</html>
33-form表单
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- get显示和post不显示提交 -->
<form action="提交到的位置" method="get">
用户名:<input type="text" name="username" id="user" value="请输入用户名">
<br> 密码:
<input type="password" name="password" id="passwd"/>
</form>
<input type="submit" value="提交">
<input type="submit" value="重置">
</body>
</html>
案例练习
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>世纪佳缘-你在我也在</title>
</head>
<body>
<table width="600" align="center">
<caption> <h4> 青春不常在，抓紧谈恋爱 </h4></caption>
<!-- 1 -->
<tr>
<td>性别</td>
<td>
<input type="radio" name="sex" checked="checked" /><img src="images/man.jpg" /> 男
<input type="radio" name="sex" /><img src="images/women.jpg" /> 女
</td>
</tr>
<!-- 2 -->
<tr>
<td>生日</td>
<td>
<!-- 年份的 -->
<select>
<option>--请选择年--</option>
<option>1995</option>
<option>1996</option>
<option>1997</option>
<option>1998</option>
</select>
<!-- 月份的 -->
<select>
<option>--请选择月--</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>
<!-- 日子 -->
<select>
<option>--请选择日--</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>
</td>
</tr>
<!-- 3 -->
<tr>
<td>所在地区</td>
<td>
<input type="text" value="北京思密达" />
</td>
</tr>
<!-- 4行 -->
<tr>
<td>婚姻状况</td>
<td>
<input type="radio" name="marry" checked="checked"/> 未婚
<input type="radio" name="marry" /> 已婚
<input type="radio" name="marry" /> 离婚
</td>
</tr>
<!-- 5行 -->
<tr>
<td>学历</td>
<td>
<input type="text" value="幼儿园">
</td>
</tr>
<!-- 6行 -->
<tr>
<td>月薪</td>
<td>
<input type="text" value="10000-20000">
</td>
</tr>
<!-- 7行 -->
<tr>
<td>手机号码</td>
<td>
<input type="text">
</td>
</tr>
<!-- 8行 -->
<tr>
<td>昵称</td>
<td>
<input type="text" >
</td>
</tr>
<!-- 9行 -->
<tr>
<td>喜欢的类型</td>
<td>
<input type="checkbox" name="love" /> 妩媚的
<input type="checkbox" name="love" /> 可爱的
<input type="checkbox" name="love" /> 小鲜肉
<input type="checkbox" name="love" /> 老腊肉
<input type="checkbox" name="love" /> 都喜欢
</td>
</tr>
<!-- 10 行 -->
<tr>
<td>自我介绍</td>
<td>
<textarea> 自我介绍 </textarea>
</td>
</tr>
<!-- 11行 -->
<tr>
<td></td>
<td>
<input type="image" src="images/btn.png" />
</td>
</tr>
<!-- 12 行 -->
<tr>
<td></td>
<td> <input type="checkbox" name="agree" checked="checked" />我同意注册条款和会员加入标准</td>
</tr>
<!-- 13行 -->
<tr>
<td></td>
<td>
<a href="#">我是会员，立即登录</a>
</td>
</tr>
<!-- 14 -->
<tr>
<td></td>
<td>
<h3>我承诺</h3>
<ul>
<li>年满18岁、单身</li>
<li>抱着严肃的态度</li>
<li>真诚寻找另一半</li>
</ul>
</td>
</tr>
</table>
</body>
</html>