学习目标：
- 掌握列表标签实现网页中列表结构的搭建
- 掌握表格标签及其属性实现网页中表格结构的搭建
- 掌握表单标签及其属性实现表单网页的搭建
学习内容：
- 列表标签
- 表格标签
- 表单标签
- 综合案例
一、列表标签：
目标：能够使用无序列表、有序列表、自定义列表标签，实现网页中列表结构的搭建
（一）列表的使用场景
1、场景
在网页中按照行展示关联性的内容，例如账单、排行榜等。
2、特点
按照行的方式，整齐显示内容。
3、种类
无序列表、有序列表、自定义列表
3.1无序列表（最常用）
3.1.1场景
在网页中表示一组无顺序之分的列表，例如新闻列表。
3.1.2标签组成
<ul>
<li></li>
</ul>
ul:表示无序列表的整体，用于包裹li标签。注意：ul标签中只允许包括li标签。
li：表示无序列表中的每一项，包含每一行的内容。li标签可以包含任意内容。
3.2有序列表（偶尔用）
3.2.1场景
在网页中表示一组有顺序之分的列表，例如排行榜。
3.2.2标签组成
<ol>
<li></li>
</ol>
ol： 表示有序列表的整体，ol标签中只允许包括li标签。
li: 表示有序列表中的每一项，包含每一行的内容。li标签可以包含任何内容。
3.3自定义列表（底部导航用）
3.3.1场景
在网页的底部导航中通常使用自定义列表实现
3.3.2标签组成
<dl>
<dt>主题</dt>
<dd>针对主题的每一项内容</dd>
</dl>
dl：表示列表的整体，用于包裹dt/dd标签。dl标签中只允许包含dt/dd标签。
dt：表示自定义列表的主题。
dd：表示针对dt主题解释的每一项内容。dt/dd标签可以包含任意内容。
3.4小结
正确答案：D
二、表格标签：
（一）表格列表的基本标签
1、场景
在网页中以行跟列的单元格的方式整齐显示数据，例如学生成绩表。
2、基本标签
| 标签名 | 说明 |
|---|---|
| table | 表示表格的整体，可以包含多个tr |
| tr | 表示表格的每一行，可以包含多个td |
| td | 表示单元格，用于包裹内容 |
<table>
<tr>
<td></td>
</tr>
</table>
（二）表格相关属性
1、属性作用
设置表格基本展示效果
2、常见相关属性
| 属性名 | 属性值 | 效果 |
|---|---|---|
| border | 数字 | 边框的宽度 |
| width | 数字 | 表格的宽度 |
| height | 数字 | 表格的高度 |
3、注意点
实际开发中针对样式效果推荐使用CSS设置。
（三）表格标题和表头单元格标签
1、使用场景
在表格中表示整体大标题和一列小标题
2、标签
| 标签名 | 名称 | 说明 |
|---|---|---|
| caption | 表格大标题 | 表示表格整体大标题，默认在表格整体顶部居中位置显示 |
| th | 表头单元格 | 表示一列小标题，默认内部文字加粗并居中显示 |
3、注意点
caption标签写在table标签内部；
th标签写在tr标签内部（用于替换td标签）。
（四）表格的结构标签
1、使用场景
让表格的内容分组，突出表格的不同部分（头部、主体、尾部），使语义更加清晰。
2、结构标签
| 标签名 | 名称 |
|---|---|
| thead | 表格头部 |
| tbody | 表格主体 |
| tfoot | 表格尾部 |
3、注意点
表格结构标签内部用于包裹tr标签；
表格结构标签可以省略。
（五）合并单元格
1、使用场景
将水平或者垂直多个单元格合并成一个单元格。
2、合并单元格步骤
2.1明确合并哪几个单元格
2.2通过左上原则，确定保留谁删除谁。
上下合并：只保留最上面的那一个单元格，其他都删除。
左右合并：只保留最左边的那一个单元格，其他都删除。
2.3给保留的单元格设置
跨行合并（rowspan)或者跨列合并（colspan)
| 属性名 | 属性值 | 说明 |
|---|---|---|
| rowspan | 合并单元格的个数 | 跨行合并，将多行的单元格垂直合并 |
| colspan | 合并单元格的个数 | 跨列合并，将多列的单元格水平合并 |
3、注意点
只有同一个结构标签中的单元格才能合并，不能跨结构合并（不能跨：thead、tbody、tfoot）。
三、表单标签
（一）input系列标签
1、使用场景
在网页中显示收集用户信息的表单效果，如登录、注册。
2、标签名
input:input标签可以通过type属性值的不同，展示不同的效果。
3、type属性值
3.1文本框
3.1.1使用场景
在网页中显示输入单行文本的表单控件·。
3.1.2代码
type的属性值：text
<input type="text" placeholder=“请输入您的昵称">
type的属性值：text
type常用属性：placeholder,占位符，提示用户输入内容的文本。
3.2密码框
3.2.1使用场景
在网页中显示输入密码的表单控件·。
3.2.2代码
type的属性值:password
<input type="password" placeholder="请输入密码">
3.2.3注意点
type属性值不要拼错或者多加空格，否则相当于设置了默认值状态：text
3.3单选框
3.3.1使用场景
在网页中显示多选一的表单控件·。
3.3.2代码
type的属性值:radio
<input type="radio" name="sex" checked>男
<input type="radio" name="sex" >女
3.3.3注意点
name属性对于单选框有分组功能
有相同name属性值的单选框为一组，一组中只能同时有一个被选中。
3.4复选框
3.4.1使用场景
在网页中显示多选多的多选表单控件
3.4.2代码
type的属性值:checkbox
<input type="checkbox" checked>音乐
<input type="checkbox">舞蹈
<input type="checkbox">羽毛球
<input type="checkbox">零食
3.5文件选择
3.5.1使用场景
在网页中显示文件选择的表单控件
3.5.2代码
type属性值：file
<input type="filke" multiple>
3.6按钮
3.6.1使用场景
在网页中显示不同功能的按钮表单控件
3.6.2代码
type属性值：
<input type="submit">
<input type="reset">
<input type="button" value="普通按钮">
3.6.3注意点
如果需要实现以上按钮功能，需要配合form标签使用
form使用方法：用form标签把表单标签一起包裹起来就可以了。
（二）button按钮标签
1、使用场景
在网页中显示用户点击的按钮
2、标签名及属性值
| 标签名 | type属性值 | 说明 |
|---|---|---|
| button | submit | 提交按钮，点击之后提交数据给后端服务器 |
| button | reset | 重置按钮，点击之后恢复表单默认值 |
| button | button | 普通按钮，默认无功能，之后配合js添加功能 |
<button type="submit"></button>
<button type="button">普通按钮</button>
3、注意点
谷歌浏览器中button默认是提交按钮
button标签是双标签，更便于包裹其他内容：文字、图片等。
(三）下拉菜单标签
1、使用场景
在网页中提供多个选择的下拉菜单表单控件
2、标签组成
| 标签名 | 说明 |
|---|---|
| select | 下拉菜单的整体 |
| option | 下拉菜单的每一项 |
3、常见属性
selected：默认选中
（四）文本域标签
1、使用场景
在网页中提供可输入的多行文本的表单控件
2、标签名及常见属性
标签名：textarea
常见属性：
cols:规定了文本域内可见的宽度
rows:规定了文本域内可见的行数。
3、注意点
右下角可以拖拽改变大小。
实际开发时这五年对样式效果推荐使用CSS设置。
（五）label标签
1、使用场景
常用于绑定内容与表单标签的关系。
2、使用方法
2.1方法一
使用label标签把内容包裹起来；
在表单标签上添加id属性；
在label标签的for属性中设置对应的Id属性值。
2.2方法二
直接使用label标签吧内容和表单标签一起包裹起来；
需要把label标签的for属性删除。
四、综合案例
（一）会员注册案例
1、代码
<h1>青春不常在，抓紧谈恋爱</h1>
<hr >
<p>昵称：<input type="text" name="" id="" placeholder="请输入昵称"></p>
<p>性别：
<label><input type="radio" name="sex" id="" checked>男</label>
<label><input type="radio" name="sex" id="" >女</label>
</p>
<p>所在城市：
<select name="">
<option >上海</option>
<option >北京</option>
<option >广州</option>
<option >深圳</option>
</select>
</p>
<p>婚姻状态:
<label><input type="radio" name="ss" id="" checked>未婚</label>
<label><input type="radio" name="ss" id="">已婚</label>
<label><input type="radio" name="ss" id="">保密</label>
</p>
<p>喜欢的类型：
<label><input type="checkbox" name="" id="" checked>可爱</label>
<label><input type="checkbox" name="" id="" checked>性感</label>
<label><input type="checkbox" name="" id="" >御姐</label>
<label><input type="checkbox" name="" id="" >萝莉</label>
<label><input type="checkbox" name="" id="" >小鲜肉</label>
<label><input type="checkbox" name="" id="" >大叔</label>
</p>
<p>个人介绍：</p>
<textarea rows="10" cols="60">
</textarea>
<h4>我承诺</h4>
<ul>
<li>年满18岁、单身</li>
<li>抱着严肃的态度</li>
<li>真诚寻找另一半</li>
</ul>
<p><input type="checkbox" name="" id="">我同意所有条款</p>
<input type="button" value="免费注册">
<input type="reset" name="" />
</form>
</body>
2、结果图
（二）小说排行榜
1、代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<table border="1" width="800" height="100">
<caption><h3>今日小说排行榜</h3></caption>
<tr><th>排名</th><th>关键字</th><th>趋势</th><th>今日搜索</th><th>最近七日</th><th>相关链接</th></tr>
<tr>
<td>1</td>
<td>鬼吹灯</td>
<td><img src="images/up.jpg" ></td>
<td>65589</td>
<td>45</td>
<td>
<a href="http://www.tieba.com">贴吧</a>
<a href="http://image.baidu.com">图片</a>
<a href="http://www.baike.com">百科</a>
</td>
</tr>
<tr>
<td>2</td>
<td>盗墓笔记</td>
<td><img src="images/down.jpg" ></td>
<td>1</td>
<td>456</td>
<td>
<a href="http://www.tieba.com">贴吧</a>
<a href="http://image.baidu.com">图片</a>
<a href="http://www.baike.com">百科</a>
</td>
</tr>
<tr>
<td>3</td>
<td>西游记</td>
<td><img src="images/up.jpg" ></td>
<td>2</td>
<td>456</td>
<td>
<a href="http://www.tieba.com">贴吧</a>
<a href="http://image.baidu.com">图片</a>
<a href="http://www.baike.com">百科</a>
</td>
</tr>
<tr>
<td>4</td>
<td>东游记</td>
<td><img src="images/up.jpg" ></td>
<td>4567</td>
<td>456</td>
<td>
<a href="http://www.tieba.com">贴吧</a>
<a href="http://image.baidu.com">图片</a>
<a href="http://www.baike.com">百科</a>
</td>
</tr>
<tr>
<td>5</td>
<td>甄嬛传</td>
<td><img src="images/down.jpg" ></td>
<td>7895</td>
<td>456</td>
<td>
<a href="http://www.tieba.com">贴吧</a>
<a href="http://image.baidu.com">图片</a>
<a href="http://www.baike.com">百科</a>
</td>
</tr>
<tr>
<td>6</td>
<td>水浒传</td>
<td><img src="images/up.jpg" ></td>
<td>4254</td>
<td>456</td>
<td>
<a href="http://www.tieba.com">贴吧</a>
<a href="http://image.baidu.com">图片</a>
<a href="http://www.baike.com">百科</a>
</td>
</tr>
<tr>
<td>7</td>
<td>三国演义</td>
<td><img src="images/up.jpg" ></td>
<td>456</td>
<td>456</td>
<td>
<a href="http://www.tieba.com">贴吧</a>
<a href="http://image.baidu.com">图片</a>
<a href="http://www.baike.com">百科</a>
</td>
</tr>
</table>
</body>
</html>
2、结果图
148
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
