跟学：b站黑马程序员pink老师 欢迎大家指正
6.表格标签 显示数据
6.1 表格的主要作用
用于规整地显示、展示数据，增加可读性
6.2 表格的基本语法
1.<table></table>用于定义表格的标签
2.<tr></tr>用于定义表格中行的标签，必须嵌套在<table></table>标签里
3.<td></td>用于定义表格中单元格的标签，必须嵌套在<tr></tr>标签里
6.3 表头单元格标签
<th></th>可以将表头单元格里的文字加粗和居中
表头单元格也是单元格，用于表格第一行突出重要性，可以将文字加粗和居中
6.4 表格相关属性
在html里不常用，一般在css里设置
这些属性要写到表格标签table里面
<table align="center" border="1" cellpadding="5" cellspacing="0" width="300"> </table>
1.align是指表格在页面中的相对位置
2.border是指表格边框的粗细
3.cellpadding是指单元格边框和文字内容的距离
4.cellspacing是指单元格之间的距离(空心线变成实心线）
5.width是指表格的宽度，height是指表格的高度
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>表格基础</title>
</head>
<body>
<table align="center" border="1" cellpadding="5" cellspacing="0" width="300">
<tr><th>姓名</th> <th>性别</th> <th>年龄</th></tr>
<tr><td>刘德华</td> <td>男</td> <td>61</td></tr>
<tr><td>张学友</td> <td>男</td> <td>62</td></tr>
<tr><td>郭富城</td> <td>男</td> <td>57</td></tr>
<tr><td>黎明</td> <td>男</td> <td>56</td> </tr>
</table>
</body>
</html>
改变：
小说排行榜案例练习
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>小说排行榜</title>
</head>
<body>
<table align="center" border="1" cellpadding="3" cellspacing="0" width="500">
<tr>
<th>排名</th>
<th>关键词</th>
<th>趋势</th>
<th>今日搜索</th>
<th>最近七日</th>
<th>相关链接</th>
</tr>
<tr>
<td>1</td>
<td>鬼吹灯</td>
<td><img src="down.jpg"></td>
<td>345</td>
<td>123</td>
<td><a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a></td>
</tr>
<tr>
<td>2</td>
<td>盗墓笔记</td>
<td><img src="down.jpg"></td>
<td>124</td>
<td>675</td>
<td><a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a></td>
</tr>
<tr>
<td>3</td>
<td>西游记</td>
<td><img src="up.jpg"></td>
<td>212</td>
<td>7564</td>
<td><a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a></td>
</tr>
<tr>
<td>4</td>
<td>东游记</td>
<td><img src="up.jpg"></td>
<td>23</td>
<td>75645</td>
<td><a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a></td>
</tr>
<tr>
<td>5</td>
<td>甄嬛传</td>
<td><img src="down.jpg"></td>
<td>121</td>
<td>7676</td>
<td><a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a></td>
</tr>
<tr>
<td>6</td>
<td>水浒传</td>
<td><img src="up.jpg"></td>
<td>576576</td>
<td>1231421</td>
<td><a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a></td>
</tr>
<tr>
<td>7</td>
<td>三国演义</td>
<td><img src="up.jpg"></td>
<td>234</td>
<td>7686</td>
<td><a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a></td>
</tr>
</table>
</body>
</html>
6.5 表格结构标签
因为表格可能很长，为了更好地分清表格结构,提出了<thead></thead>和<tbody></tbody>
<thead></thead>标签：表示表格的头部区域，里面必须有<tr></tr>
<tbody></tbody>标签：表示表格的主体区域
<th></th>代表了表头单元格，<thead></thead>表示表格的头部区域，<th>是<thead>里的一个单元格
试了一下，只有<thead></thead>只代表了结构，如果只有它没有<th></th>,是不能将表头的文字加粗和居中的
6.6 合并单元格
1.跨行合并：rowspan="合并单元格的个数"
目标单元格为最上侧单元格
2.跨列合并：colspan="合并单元格的个数"
目标单元格为最左侧单元格
3.合并三部曲：
1.跨行？跨列？
2.找到目标单元格，写代码：<td colspan="2"> </td>
3.删除多余的单元格代码；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>合并单元格</title>
</head>
<body>
<table align="center" border="1" cellspacing="0" width="500" height="250">
<tr>
<td rowspan="3"></td>
<td></td>
<td></td>
</tr>
<tr>
<td colspan="2"></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>
</body>
</html>页面显示
7.列表标签 布局
7.1 无序列表 <ul>
<ul></ul>:无序列表标签
<li></li> :列表项标签
1.无序列表中各个列表项没有顺序，是并列的
2.<ul></ul>中只能嵌套<li></li>,不能放其它文字和标签
3.<li></li> 相当于一个容器，里面是可以放其他元素的
4.无序列表会带有自己的样式属性，但实际使用时，我们会用CSS来设置
7.2 有序列表 <ol>
<ol></ol>:无序列表标签
<li></li> :列表项标签
1.<ol></ol>中只能嵌套<li></li>,不能放其它文字和标签
2.<li></li> 相当于一个容器，里面是可以放其他所有元素
3.有序列表会带有自己的样式属性，但实际使用时，我们会用CSS来设置
7.3 自定义列表<dl><dt><dd>
大哥领小弟： 常用于对术语或者名词进行解释和描述，无符号
<dl></dl>:用于定义列表
<dt></dt>:用于定义项目/名字
<dd></dd>:用于描述项目/名字
1.<dl></dl> 里只能包含<dt></dt>和<dd></dd>
2.<dt></dt>和<dd></dd>个数没有限制，一个<dt>可以对应多个<dd>
7.4 列表总结
7.5 代码练习
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>无序列表和有序列表</title>
</head>
<body>
<h4>你喜欢的食物</h4>
<!-- 无序 -->
<ul>
<li>桃子</li>
<li>苹果</li>
<li>香蕉</li>
</ul>
<ul>
<!-- 错误 -->
<p>111</p>
<!-- 正确 -->
<li><p>111</p></li>
</ul>
<!-- 有序 -->
<ol>
<li>桃子</li>
<li>苹果</li>
<li>香蕉</li>
</ol>
<!-- 自定义列表 -->
<dl>
<dt>水果</dt>
<dd>桃子</dd>
<dd>苹果</dd>
<dd>香蕉</dd>
<dt>水果</dt>
<dd>桃子</dd>
<dd>苹果</dd>
<dd>香蕉</dd>
</dl>
</body>
</html>8.表单标签 收集信息
8.1 为什么需要表单
为了收集用户信息
8.2 表单的组成
在html中一个完整的表单通常由表单域、表单控件（又叫表单元素）和提示信息组成
8.3 表单域 <form>
表单域就是一个包含表单元素的区域
在html标签中，<form></form>标签用于定义表单域，以实现用户信息的收集和传递
<form></form>标签会将它范围内的表单元素信息提交给服务器
属性说明
1.action="url": 决定了把表单数据送到那=哪个地址去处理
2.method="提交方式"：get/post
3.name="名称"
8.4 表单元素/表单控件
单元素是允许用户在表单中输入或者选择的内容控件
8.4.1 input输入表单元素
<input />标签：用于收集用户信息，单标签
属性值：
1. type属性：根据不同的type属性值，输入字段拥有很多种形式，如文本、复选框、掩码后的文本控件、单选按钮等
文本框：<input type="text" />
单选按钮：<input type="radio" />
重置按钮：<<input type="reset" /> 还原为表单的初始状态
提交按钮：<input type="submit" /> 把表单域里数据提交给服务器
提交按钮里的文字一般是提交，要改变的话加value属性：<input type="submit" value="注册"/>
普通按钮：<input type="button" value="发送验证码"> 后期结合js
文件域：<input type="file"> 点击上传文件
2.name属性是表单元素的名字
<input type="text" name="username" />
要注意的是单选的选项必须有相同的名字才能实现多选一的效果
复选框的选项也必须有相同的name属性
3.value属性用于定义input元素的值
<input type="text" name="username" value="请输入用户名" />
注意！
1.name属性和value属性是每个元素都有的属性，主要是给后台人员使用的
2.name属性 表单元素的名字，要求单选按钮和复选框有相同的name值
4.checked属性表示某元素首次加载时就应当被选中
主要针对单选按钮和复选框
单选：只能给一个元素checked
<input type="radio" name="sex" value="沃尔玛购物袋" checked="checked">沃尔玛购物袋
复选框：可以给多个
5.maxlength属性规定可输入字符最大长度
<input type="text" name="username" value="请输入用户名" maxlength="8">
试试代码吧
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>input表单元素</title>
</head>
<body>
<form action="xxx.php" method="get">
<!-- 示范 -->
<!-- text 文本框，用户可以输入文字 -->
用户名：<input type="text"><br>
<!-- value属性 -->
用户名：<input type="text" name="username" value="请输入用户名" maxlength="8"><br>
<!-- maxlength属性 规定可输入字符最大长度-->
<!-- password 密码字段，输入被掩码-->
密码：<input type="password" name="pwd" ><br>
<!--radio 单选按钮，实现多选一-->
<!-- 还未实现单选 -->
性别：
<input type="radio">男
<input type="radio">女<br>
<!--radio 单选按钮，实现多选一-->
<!-- 已经实现单选 -->
性别：
<input type="radio" name="sex" value="男">男
<input type="radio" name="sex" value="女">女
<!-- checked属性 代表元素首次加载便被选中 单选只能给一个，多选随便-->
<input type="radio" name="sex" value="沃尔玛购物袋" checked="checked">沃尔玛购物袋<br>
<!-- checkbox 复选框 ，实现多选-->
爱好:
<input type="checkbox" name="hobby" value="吃饭">吃饭
<input type="checkbox" name="hobby" value="睡觉">睡觉
<input type="checkbox" name="hobby" value="打豆豆">打豆豆<br>
<!-- 重置按钮reset 可以还原表单的初始状态 -->
<input type="reset">
<input type="reset" value="重新填写"><br>
<!-- 提交按钮submit 可将表单域中的文字提交给服务器 -->
<input type="submit">
<input type="submit" value="免费注册"><br>
<!-- 普通按钮button 后期结合js -->
<input type="button" value="发送验证码"><br>
<!-- 文件域 点击上传文件 -->
<input type="file">
</form>
</body>
</html>6.属性小结：你记住了吗？
#<label>标签 定义标注标签
<label> 标签用于绑定一个表单元素，当点击<label>标签内的文本时，浏览器就会自动将焦点转到对应的表单元素上：
比如在选择性别时，不需要点击单选按钮，只需要点击单选按钮的文字"男"，即可选择
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>label标签</title>
</head>
<body>
<form action="xxx.php" method="get">
性别：<br>
<input type="radio" name="sex" value="男" id="男"> <label for="男">男</label> <br>
<input type="radio" name="sex" value="女" id="女"> <label for="女">女</label> <br>
<input type="radio" name="sex" value="沃尔玛购物袋" checked="checked" id="沃尔玛购物袋"><label for="沃尔玛购物袋">沃尔玛购物袋</label><br>
</form>
</body>
</html>8.4.3 select下拉表单元素
如果在页面中有多个选项让用户选择，并且想要节约页面空间，我们可以用<select>标签来定义下拉列表
1.<select></select>里面至少有一对<option></option>
2.在<option>中定义selected="selected",可以设定默认选中项
<option selected="selected">上海</option>
8.4.4 textarea文本域元素
当用户输入内容较多时，我们就不能用文本框表单了，要用<textarea>标签
<textarea>标签：用于定义多行文本输入的控件，常用于评论区，留言板等
1.通过<textarea>标签可实现创建多行文本输入框
2.rows=“显示的行数”
cols=“每行的字符数" 实际开发用css来设置
9 综合案例-注册界面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>注册页面</title>
</head>
<body>
<h4>青春抓不住，抓紧谈恋爱</h4>
<table width="600">
<tr>
<td>性别：</td>
<td>
<input type="radio" name="sex" value="nan" checked="checked" id="男"><img src="man.jpg" id="男"> <label for="男"> 男</label>
<input type="radio" name="sex" value="nv" id="女"><img src="women.jpg" id="女"> <label for="女"> 女</label>
</td>
</tr>
<!-- 性别 -->
<tr>
<td>生日：</td>
<td>
<select>
<option>--请选择年--</option>
<option>1985</option>
<option>1986</option>
<option>1987</option>
<option>1988</option>
<option>1989</option>
<option>1990</option>
<option>1991</option>
<option>1992</option>
<option>1993</option>
<option>1994</option>
<option>1995</option>
<option>1996</option>
<option>1997</option>
<option>1998</option>
<option>1999</option>
<option>2000</option>
</select>
<select>
<option>-请选择月--</option>
<option>1月</option>
<option>2月</option>
<option>3月</option>
<option>4月</option>
<option>5月</option>
<option>6月</option>
<option>7月</option>
<option>8月</option>
<option>9月</option>
<option>10月</option>
<option>11月</option>
<option>12月</option>
</select>
<select>
<option>--请选择日--</option>
<option>1日</option>
<option>2日</option>
<option>3日</option>
<option>4日</option>
<option>5日</option>
<option>6日</option>
<option>7日</option>
<option>9日</option>
<option>10日</option>
<option>11日</option>
<option>12日</option>
<option>13日</option>
<option>14日</option>
<option>15日</option>
<option>16日</option>
<option>17日</option>
<option>18日</option>
<option>19日</option>
<option>20日</option>
<option>21日</option>
<option>22日</option>
<option>23日</option>
<option>24日</option>
<option>25日</option>
<option>26日</option>
<option>27日</option>
<option>28日</option>
<option>29日</option>
<option>30日</option>
<option>31日</option>
</select>
</td>
</tr>
<!-- 生日 -->
<tr>
<td>所在地区：</td>
<td>
<input type="text" name="address" value="北京思密达">
</td>
</tr>
<!-- 地区 -->
<tr>
<td>婚姻状况：</td>
<td>
<input type="radio" name="marriage" value="weihun" checked="checked" id="未婚"><label for="未婚"> 未婚</label>
<input type="radio" name="marriage" value="yihun" id="已婚"><label for="已婚"> 已婚</label>
<input type="radio" name="marriage" value="lihun" id="离婚"><label for="离婚"> 离婚</label> <br>
</td>
</tr>
<!-- 婚姻 -->
<tr>
<td>学历：</td>
<td>
<input type="text" name="study" value="幼儿园">
</td>
</tr>
<!-- 学历 -->
<tr>
<td>喜欢的类型：</td>
<td>
<input type="checkbox" name="like" id="wumei"> <label for="wumei">妩媚的</label>
<input type="checkbox" name="like" id="keaid"><label for="keaid">可爱的</label>
<input type="checkbox" name="like" id="xiaoxianrou"><label for=" xiaoxianrou">小鲜肉</label>
<input type="checkbox" name="like" id="laolarou"><label for="laolarou">老腊肉</label>
<input type="checkbox" name="like" id="douxihuan"><label for="douxihuan">都喜欢</label> <br>
</td>
</tr>
<!-- 喜好 -->
<tr>
<td>自我介绍：</td>
<td>
<textarea rows="3" cols="20">
自我介绍
</textarea>
</td>
</tr>
<!-- 自我介绍 -->
<tr>
<td></td>
<td><input type="submit" value="免费注册"> </td>
</tr>
<!--提交按钮 -->
<tr>
<td></td>
<td>
<input type="checkbox" name="xieyi" checked="checked" id="xieyi" ><label for="xieyi">我同意注册条款和会员加入标准</label><br>
</td>
</tr>
<tr>
<td> </td>
<td><a href="#">我是会员，立即登录</a> </td>
</tr>
<tr>
<td></td>
<td>
<h5>我承诺</h5>
<ul>
<li>年满18岁、单身</li>
<li>抱着严肃的态度</li>
<li>真诚寻找另一半</li>
</ul>
</td>
</tr>
</table>
</body>
</html>我的反思：
1.我一开始使用了表单标签，两边很乱，对不齐
应该使用表格标签，分成两个单元格
2.最下面我以为是自定义列表
应该是<h5> 标题+无序列表
9798
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
