2017年5月8号 星期一 多云 空气质量：中度污染
内容：html5---无序列表，有序列表，自定义列表，html5中的一些input属性，
表格的使用，表格的跨行跨列，iframe内联框架
备注：本次课堂笔记主要转载自：老师博客，博客地址:http://www.cnblogs.com/999-/category/919604.html
一、无序列表
老师代码：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>无序列表</title>
</head>
<body>
<!--
01.没有顺序 每个li独占一行
02.默认的li标签之前有 实心的小圆点 后面我们学css的时候 可以去掉或者改变样式
03.适用于新闻栏以及导航界面！
-->
<ul>
<li>无序列表内容1</li>
<li>无序列表内容2</li>
<li>无序列表内容3</li>
<li>无序列表内容4</li>
</ul>
</body>
</html>
二、有序列表
老师代码：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>有序列表</title>
</head>
<body>
<!--
01.有顺序 每个li独占一行
02.默认的li标签之前有数字 后面我们学css的时候 可以去掉或者改变样式
03.适用于 问卷调差，试卷。。。。
-->
<ol>
<li>有序列表内容1</li>
<li>有序列表内容2</li>
<li>有序列表内容3</li>
<li>有序列表内容4</li>
</ol>
</body>
</html>
三、自定义列表
老师代码：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>自定义列表</title>
</head>
<body>
<!--
01.没有顺序 每个dt dd独占一行
02.默认没有任何标记
-->
<dl>
<dt>C盘</dt>
<dd>文件夹1</dd>
<dd>文件夹2</dd>
<dt>D盘</dt>
<dd>文件夹1</dd>
<dd>文件夹2</dd>
</dl>
</body>
</html>
四、html5中的一些input属性
老师代码：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
</head>
<body>
<form action="#" method="post">
<input type="number" min="1" max="5">
<input type="date" min="1990-01-01">
<input type="date" max="2016-12-09">
<input type="time" value="14:43">
<input type="email">
<button type="submit">提交</button>
</form>
</body>
</html>
01.html5中的一些input属性
五、表格的使用
1、表格的基本使用
老师代码
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>表格的使用</title>
</head>
<body>
<!--
border:表格的边框
cellspacing：单元格之间的距离
cellpadding：单元格与内容之间的距离
代表表格在整个浏览器中的宽度显示
bgcolor:表格的背景色
align:表格中内容的对齐方式
-->
<table border="1" cellspacing="0" cellpadding="5" width="100%" bgcolor="#ffc0cb">
<tr align="center">
<td>第1行第1列</td>
<td>第1行第2列</td>
<td>第1行第3列</td>
<td>第1行第4列</td>
</tr>
<tr align="center">
<td>第2行第1列</td>
<td>第2行第2列</td>
<td>第2行第3列</td>
<td>第2行第4列</td>
</tr>
</table>
</body>
</html>
2、高级表格的使用
老师代码
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>高级表格的使用</title>
</head>
<body>
<table width="80%" cellspacing="0" cellpadding="0" border="1">
<!--标题-->
<caption>年终数据报表</caption>
<!--页眉-->
<thead bgcolor="yellow">
<!--表头-->
<tr>
<th>月份</th>
<th>收入</th>
</tr>
</thead>
<!--主体-->
<tbody bgcolor="pink">
<tr>
<td>1</td>
<td>1000</td>
</tr>
<tr>
<td>2</td>
<td>2000</td>
</tr>
<tr>
<td>3</td>
<td>3000</td>
</tr>
<tr>
<td>4</td>
<td>4000</td>
</tr>
</tbody>
<!--页脚-->
<tfoot bgcolor="green">
<tr>
<td>平均月收入</td>
<td>4000</td>
</tr>
<tr>
<td>总计</td>
<td>40000</td>
</tr>
</tfoot>
</table>
</body>
</html>
六、表格的跨行跨列
老师代码
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>表格的跨行跨列</title>
</head>
<body>
<!-- 跨行和跨列 只能在 列中td使用-->
<table width="80%" cellspacing="0" cellpadding="0" border="1">
<tr>
<!--学生成绩跨了3列-->
<td colspan="3">学生成绩</td>
</tr>
<tr>
<!--张三跨了2行-->
<td rowspan="2">张三</td>
<td>语文</td>
<td>85</td>
</tr>
<tr>
<td>数学</td>
<td>85</td>
</tr>
<tr>
<td rowspan="2">李四</td>
<td>语文</td>
<td>85</td>
</tr>
<tr>
<td>数学</td>
<td>85</td>
</tr>
</table>
</body>
</html>
七、iframe内联框架
1、内联框架
老师代码
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>内联框架</title>
</head>
<body>
<!--
src:需要引入的文件路径
frameborder:是否显示边框 0 不显示 1 显示
scrolling：是否显示下拉框 auto no yes
align:根据周围的元素 这是位置
srcdoc：在内联框架中显示html内容
seamless:默认不显示边框和下拉框
name:内联框架的名称
-->
<iframe src="http://www.baidu.com" srcdoc="<h1>哈哈</h1>" align="top"></iframe>
<iframe src="http://www.baidu.com" seamless="seamless"></iframe>
</body>
</html>
2、使用iframe 内联框架 实现页面间的相互跳转
老师代码
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!-- 使用iframe 内联框架 实现页面间的相互跳转-->
<a href="1.html" target="mainFrame">第1页的内容</a>
<a href="2.html" target="mainFrame">第2页的内容</a>
<a href="3.html" target="mainFrame">第3页的内容</a>
<iframe name="mainFrame" src="http://www.baidu.com" height="500px" width="800px"/>
</body>
</html>
八、作业和考试
1、看视频，尽量往后多看
2、mindmanager写列表、表格与媒体元素
3、按照老师代码自己练习敲一遍
4、周二无论如何写完项目（周三再次答辩）
5、考试
2017.05.08
16:07 开始，17:32 结束；答题时间：85-30=55 分钟；检查时间:1 分钟；
成绩： 84 分
云题库卡顿，第一次答完未成功提交，答了第二遍，时间酌情减少
答题时间长主要因为html视频没有看，所以很多题目思考时间长。
调整时间，实在安排不开跟老师商量暂时大数据不作为重点学习，专心java
九、老师辛苦了！
